1. 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

2. Background image credit: nicksarebi on Flickr

3. 3 3 3 3 AGE 1.0.0 1.2.0-RC.2 CURRENT 18 55 RELEASES 2753 3577 ISSUES CLOSED 21 623 ISSUES OPEN 19.4KB 81.4KB WEIGHT

4. 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

5. BACKBONE UP BY 1

6. Round 2: Separation of Concerns - Model Sync Collection View - Router Events Module Scope $http, $resource - View Directive Filter $routeProvider, $location Controller, $...

7. 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

8. Round 2: Separation of Concerns Image credit: http://docs.angularjs.org/guide/concepts

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

10. BACKBONE STILL UP BY 1 BACKBONE STILL UP BY 1

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

12. Round 3: Templating > ">

13. Round 3: Templating {{todo.title}}

14. 1 EACH

15. Round 4: Routing var TodoRouter = Backbone.Router.extend({ routes: { '*filter': 'setFilter’ }, setFilter: function (param) {…} }); app.TodoRouter = new TodoRouter(); Backbone.history.start();

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

17. BACKBONE UP BY 1

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

19. 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; });

20. 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 });

21. 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); });

22. 2 EACH

23. Round 6: Reusability PluginsDirectives Filters Services

24. ANGULAR UP BY 1

25. Round 7: Community 192 397 CONTRIBUTO RS 1,268 1,577 WATCHERS 15,810 14,842 STARS 29,181 34,295 STACKOVERFLO W 76 55 BOOKS

26. TIED! 3 ROUNDS EACH TIED! 3 ROUNDS EACH

27. 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

29. 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 todd@TheStartersAcademy.com