1 / 29

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

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. VS. 3. AGE. 3. 1.0.0. CURRENT.

milo
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related