Play-By-Play Announcer: Todd Bashor Image credit:

Background image credit: nicksarebi on Flickr

AGE RC.2 CURRENT RELEASES ISSUES CLOSED ISSUES OPEN 19.4KB 81.4KB WEIGHT

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 Sync Collection View - Router Events Module Scope $http, $resource - View Directive Filter $routeProvider, $location Controller, $...

Round 2: Separation of Concerns View var 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(); View var 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(); Model var Greeting = Backbone.Model.extend({}); var greeting = new Greeting({title: ”World"}); Model var Greeting = Backbone.Model.extend({}); var greeting = new Greeting({title: ”World"}); DOM Hello OK DOM Hello OK

Round 2: Separation of Concerns Image credit:

Angular Directive todomvc.directive('todoBlur', function () { return function (scope, elem, attrs) { elem.bind('blur', function () { scope.$apply(attrs.todoBlur); }); }; });

BACKBONE STILL UP BY 1 BACKBONE STILL UP BY 1

Round 3: Templating Pick your favorite template engine underscore handlebars dust ejs jade … Decorate the DOM

Round 3: Templating > ">

Round 3: Templating {{todo.title}}

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: '/'}); }]);

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(' '); $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 PluginsDirectives Filters Services

ANGULAR UP BY 1

Round 7: Community CONTRIBUTO RS 1,268 1,577 WATCHERS 15,810 14,842 STARS 29,181 34,295 STACKOVERFLO W BOOKS

TIED! 3 ROUNDS EACH TIED! 3 ROUNDS EACH

Fix your jQuery Enhance your page Play well with other libraries Round 8: Fit for Purpose Take HTML to a new level Build serious CRUD apps Maintain large apps

Learn More backbonejs.org todomvc.com backbonetutorials.com github.com/addyosmani/backbone- fundamentals angularjs.org todomvc.com egghead.io github.com/jmcunningham/Angular JS-Learning Todd Bashor