JS

Play-By-Play Announcer:Todd Bashor

todd@TheStartersAcademy.com

Image credit: http://www.mobygames.com/images/shots/l/73414-mtv-celebrity-deathmatch-windows-screenshot-title-screens.jpg

VS

Background image credit: nicksarebi on Flickr

3 3AGE

1.0.0 1.2.0-RC.2CURRENT

18 55RELEASES

2753 3577ISSUES CLOSED

21 623ISSUES OPEN

19.4KB 81.4KBWEIGHT

VS

Round 1: Learnability

“…perhaps easy to adopt because it’s so

minimal”-Steven Sanderson

“The learning curve of AngularJS can be

described as a hockey stick.”

-Matt Frisbie

BACKBONE UP BY 1

Round 2: Separation of Concerns

-Model

SyncCollection

View--

RouterEvents

ModuleScope$http, $resource-ViewDirectiveFilter$routeProvider, $locationController, $...

Round 2: Separation of Concerns

Viewvar HelloView = Backbone.View.extend({ template: _.template($('#hello-template').html()), events: {"click button": "doSomething"}, render: function(){ $(this.el).html( this.template( this.model.attributes)); return this; }, doSomething: function(e){ /*do something*/}});

var helloView = new HelloView({model: greeting});$("body").append(helloView.el);helloView.render();

Modelvar Greeting = Backbone.Model.extend({});

var greeting = new Greeting({title: ”World"});

DOM<script type=“text/template” id=“hello-template”> <p>Hello <%= title %></p> <button>OK</button></script>

Round 2: Separation of Concerns

Image credit: http://docs.angularjs.org/guide/concepts

Angular Directive <input todo-blur="doSomething(todo)">

todomvc.directive('todoBlur', function () { return function (scope, elem, attrs) {

elem.bind('blur', function () { scope.$apply(attrs.todoBlur);});

}; });

BACKBONESTILL UP BY 1

Round 3: TemplatingPick your favorite template engine

underscorehandlebars

dustejs

jade…

Decorate the DOM

Round 3: Templating<script type="text/template" id="item-template"> <div class="view"> <input class="toggle" type="checkbox” <%= completed ? 'checked': '' %>> <label><%- title %></label> <button class="destroy"></button> </div> <input class="edit" value="<%= title %>">

</script>

Round 3: Templating

<div class="view"> <input class="toggle" type="checkbox" ng-model="todo.completed">

<label ng-dblclick="editTodo(todo)">{{todo.title}}</label><button class="destroy" ng-click="removeTodo(todo)"></button>

</div>

1 EACH

Round 4: Routing var TodoRouter = Backbone.Router.extend({ routes: { '*filter': 'setFilter’ },

setFilter: function (param) {…} });

app.TodoRouter = new TodoRouter(); Backbone.history.start();

Round 4: Routing var todomvc = angular.module('todomvc', []). config(['$routeProvider', function($routeProvider) { $routeProvider .when('/:state', { templateUrl: 'index.html', controller: todomvc.TodoCtrl }) .otherwise({redirectTo: '/'}); }]);

<div ng-view></div>

BACKBONE UP BY 1

Round 5: Testability beforeEach(function () { this.model = new app.Todo(); this.view = new app.TodoView({ model: this.model }); });

Round 5: Testability it("should set focus for editing", function () { // Must call render to populate element for // `$input` this.view.render();

var spy = sinon.spy(this.view.$input, "focus"); this.view.edit(); expect(spy).to.be.calledOnce; });

Round 5: Testability /*global inject, expect, angular*/ describe('todoFocus directive', function () { var scope, compile, browser;

beforeEach(inject( function ($rootScope, $compile, $browser) { scope = $rootScope.$new();

compile = $compile; browser = $browser; }));

//snip });

Round 5: Testability describe('SetFocus directive', function() {

var scope, element, timeout;

beforeEach(inject(function($rootScope, $compile, $timeout) { timeout = $timeout;

scope = $rootScope.$new();

element = angular.element('<input set-focus="inFocus" />');

$compile(element)(scope);scope.$digest();

}));

it('sets the input to be focussed when inFocus message is broadcast', function() {

scope.$broadcast('inFocus');timeout.flush();expect(scope.focusedElement).toEqual(element);

});

});

2 EACH

Round 6: Reusability

Plugins DirectivesFilters

Services

ANGULAR UP BY 1

Round 7: Community

192 397CONTRIBUTORS

1,268 1,577WATCHERS

15,810 14,842STARS

29,181 34,295STACKOVERFLOW

76 55BOOKS

TIED! 3 ROUNDS

EACH

Fix your jQuery

Enhance your page

Play well with other libraries

Round 8: Fit for PurposeTake HTML to a new

level

Build serious CRUD apps

Maintain large apps

Learn More

backbonejs.orgtodomvc.combackbonetutorials.comgithub.com/addyosmani/backbone-fundamentals

angularjs.orgtodomvc.comegghead.iogithub.com/jmcunningham/AngularJS-Learning

Todd Bashortodd@TheStartersAcademy.com