Play-By-Play Announcer: Todd Bashor todd@TheStartersAcademy

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

2. VS Background image credit: nicksarebi on Flickr

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

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 varHelloView= 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*/} }); varhelloView= new HelloView({model: greeting}); $("body").append(helloView.el); helloView.render(); Model var 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>

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

9. Angular Directive <input todo-blur="doSomething(todo)"> todomvc.directive('todoBlur', function () { return function (scope, elem, attrs) { elem.bind('blur', function () { scope.$apply(attrs.todoBlur); }); }; });

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

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

14. 1 EACH

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

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

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(); varspy = 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 () { varscope, compile, browser; beforeEach(inject( function ($rootScope, $compile, $browser) { scope = $rootScope.$new(); compile = $compile; browser = $browser; })); //snip });

21. Round 5: Testability describe('SetFocusdirective', function() { varscope, 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); }); });

22. 2 EACH

23. Round 6: Reusability Plugins Directives Filters Services

24. ANGULAR UP BY 1

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

26. TIED! 3 ROUNDS EACH

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

29. Learn More angularjs.org todomvc.com egghead.io github.com/jmcunningham/AngularJS-Learning backbonejs.org todomvc.com backbonetutorials.com github.com/addyosmani/backbone-fundamentals Todd Bashor todd@TheStartersAcademy.com