JS
Play-By-Play Announcer:Todd Bashor
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
3 3AGE
1.0.0 1.2.0-RC.2CURRENT
18 55RELEASES
2753 3577ISSUES CLOSED
21 623ISSUES OPEN
19.4KB 81.4KBWEIGHT
VS
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
SyncCollection
View--
RouterEvents
ModuleScope$http, $resource-ViewDirectiveFilter$routeProvider, $locationController, $...
Round 2: Separation of Concerns
Viewvar 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();
Modelvar 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>
Round 2: Separation of Concerns
Image credit: http://docs.angularjs.org/guide/concepts
Angular Directive <input todo-blur="doSomething(todo)">
todomvc.directive('todoBlur', function () { return function (scope, elem, attrs) {
elem.bind('blur', function () { scope.$apply(attrs.todoBlur);});
}; });
BACKBONESTILL UP BY 1
Round 3: TemplatingPick your favorite template engine
underscorehandlebars
dustejs
jade…
Decorate the DOM
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>
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>
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: '/'}); }]);
<div ng-view></div>
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('<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);
});
});
2 EACH
Round 6: Reusability
Plugins DirectivesFilters
Services
ANGULAR UP BY 1
Round 7: Community
192 397CONTRIBUTORS
1,268 1,577WATCHERS
15,810 14,842STARS
29,181 34,295STACKOVERFLOW
76 55BOOKS
TIED! 3 ROUNDS
EACH
Fix your jQuery
Enhance your page
Play well with other libraries
Round 8: Fit for PurposeTake HTML to a new
level
Build serious CRUD apps
Maintain large apps
Learn More
backbonejs.orgtodomvc.combackbonetutorials.comgithub.com/addyosmani/backbone-fundamentals
angularjs.orgtodomvc.comegghead.iogithub.com/jmcunningham/AngularJS-Learning
Todd [email protected]
Top Related