Play-By-Play Announcer: Todd Bashor todd@TheStartersAcademy - PowerPoint PPT Presentation

milo
play by play announcer todd bashor todd@thestartersacademy com n.
Skip this Video
Loading SlideShow in 5 Seconds..
Play-By-Play Announcer: Todd Bashor todd@TheStartersAcademy PowerPoint Presentation
Download Presentation
Play-By-Play Announcer: Todd Bashor todd@TheStartersAcademy

play fullscreen
1 / 29
Download Presentation
Play-By-Play Announcer: Todd Bashor todd@TheStartersAcademy
169 Views
Download Presentation

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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

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