Angular or Backbone: Go Mobile!
Doris Chen Ph.D.
Senior Developer Evangelist
Microsoft
http://blogs.msdn.com/dorischen/
@doristchen
Doris Chen, Ph.D.
• Developer Evangelist at Microsoft based in Silicon Valley, CA
• Blog: http://blogs.msdn.com/b/dorischen/
• Twitter @doristchen
• Email: [email protected]
• Over 18 years of experience in the software industry focusing on web technologies
• Spoke and published widely at O'Reilly OSCON, Fluent, HTML5 Dev Conf, JavaOne, Google Developer Conference, Silicon Valley Code Camp and worldwide User Groups meetups
• Doris received her Ph.D. from the University of California at Los Angeles (UCLA)
Agenda
1. Angular vs Backbone
2. Demo: ToDo App in Angular and Backbone
3. Mobile Apps for JavaScript
4. Demo: ToDo App with Apache Cordova
5. Summary and Resources
Angular vs Backbone
Angular vs Backbone: common
• Client-side framework using the MV* design pattern
• Solve the problem of Single Page Web Applications• Structure
• Modular
• Support multiple clients
• Both open-sourced, under the permissive MIT license
• Have the concept of views, events, data models and routing
History
Angular
• Born in 2009 as a part of commercial product, called GetAngular
• Misko Hevery, one of founders, turn a web application• 17,000 lines in 6 months to 1,000 lines
in 3 weeks using just GetAngular
• Google starts sponsoring, becomes open-source Angular.js
Backbone
• Born in 2010, lightweight MVC framework/library
• As a lean alternative to heavy, full-featured MVC (MVVC) frameworks such as ExtJS
Learning curve and Flexibility
Angular
• Looks quite easy at first sight • After the very basics it is quite a steep
learning curve from there
• Highly opinionated• Fighting the framework if you don’t
like the way it does certain things
• Reading the documentation is not easy as a lot of Angular specific jargon
• Lack of examples
Backbone
• Basic of backbone is very easy to learn
• Not opinionated• most flexible framework with the less
conventions and opinions
• Need to make a lot of decisions when using Backbone
• Need to watch or read a few tutorials to learn some best Backbone practices
• probably need to learn another library on top of Backbone (e.g. Marionette or Thorax)
Community
Metric Angular Backbone
Stars on GitHub 29.8k 19.3k
Third-Party Modules 800 ngmodules 236 backplugs
StackOverflow Questions 49.5k 15.9k
YouTube Results ~75k ~16k
GitHub Contributors 928 230
Chrome Extension Users 150k 7k
Angular Backbone
Architecture MV* (Model View Whatever) MV + VC
Template Support YES. doesn’t require any other separate template engine.(Also doesn’t support template engine)
Uses underscore.js( an embedded template engine which allows logic inside template code)
File Size 39.5K (no dependencies) 6.5K - 43.5K (w/underscore & jQuery)
Nested Template Support Yes No
Data Binding Yes No
Routing Yes Yes
Compatible with other frameworks
Yes Yes
Additional Features Dependency Injection, Directives, Watch Expressions and 2-way Binding, HTML5 validations, Form Validations, and Filtering
Angular: templates
• Simply HTML with binding expressions baked-in
• Binding expressions are surrounded by double curly braces<ul>
<li ="framework in frameworks"
title="{{framework.description}}">
{{framework.name}}
</li>
</ul>
Backbone: templates
<ul>
<% _.each(frameworks, function(framework) { %>
<li title="<%- framework.description %>">
<%- framework.name %>
</li>
<% }); %>
</ul>
Underscore is very basic and you usually have to throw JavaScript into the mix
Angular: model
• Angular does not use observable properties, no restriction on implementing model
• No class to extend and no interface to comply
• Free to use whatever you want (including existing Backbone models)
• In practice, most developers use plain old JavaScript objects (POJO)
Backbone: model
app.TodoModel = Backbone.Model.extend({
defaults: {
title: '',
done: false,
location: 'Getting your location...'
},
toggleCompleted: function () {
this.save({
done: !this.get('done')
});
},
sync: function () { return false; }
});
Backbone: model and collection
var TodoCollection = Backbone.Collection.extend({
model: app.TodoModel,
});
app.todoCollection = new TodoCollection;
• Backbone is built around observable properties, forced to extend Backbone.Model and Backbone.Collection
• Backbone does not support observing functions, property needs to reset when any change happens
Angular: good things
• Two-way data bindings, dependency injection, easy-to-test code, extending the HTML dialect by using directives, out of the box filters, reusable services and factories
• Minimizes drastically the boilerplate code, no direct DOM manipulation
• The automatic Dirty Checking• No need getters and setters
• modify property and angular automatically detects the change and notify all the watchers
2-way bindings and directives
<div class="templateWrapper" ng-repeat="toDoItem in todos">
<div class="templateContainer">
<input class="templateTitle"
ng-class="{crossedOut: toDoItem.done}" type="text"
ng-text-change="changeToDoText(toDoItem)"
ng-model="toDoItem.text" />
<h3 class="templateAddress">{{toDoItem.address}}</h3>
</div>
</div>
Dependency injection
<section id="todoapp" ng-controller="ToDoCtrl"> <button class="templateLeft templateRemove"ng-click="removeToDo(toDoItem)"></button>
</section>
angular.module("xPlat.controllers").controller('ToDoCtrl', ['$scope', 'maps', 'storage',
function ($scope, maps, storage) {$scope.removeToDo = function (toDoItem) {
storage.del(toDoItem).then(function (todo) {var index = $scope.todos.indexOf(todo);$scope.todos.splice(index, 1);
});}
}]);
Angular: more good things
• Building application blocks into: Controllers, Directives, Factories, Filters, Services and Views (templates). • Views UI, Controllers logic behind UI, Services communication with
backend and common functionality, Directives reusable components and extending HTML by defining new elements, attributes and behaviors
• Promises play a main role in Angular
Custom directives
<input class="templateTitle"ng-class="{crossedOut: toDoItem.done}" type="text"ng-text-change=" changeToDoText(toDoItem)"ng-model="toDoItem.text" />
angular.module('xPlat.directives').directive('ngTextChange', function () {
return {restrict: 'A',replace: 'ngModel',link: function (scope, element, attr) {
element.on('change', function () {scope.$apply(function () {
scope.$eval(attr.ngTextChange);});
…});
Custom directives, continued
$scope.changeToDoText = function (toDoItem) {//Notice .then Promise pattern is used heregetAddress().then(function (address) {
toDoItem.address = address;return storage.update(toDoItem);
}, function (errorMessage) {toDoItem.address = errorMessage;return storage.update(toDoItem);
});}
Angular: bad things
• Extremely opinionated• Frustrated: prior experience in creating UI with Javascript is rendered almost useless
• Do everything according to the “Angular way”
• Directives could be super complicated and odd
• Expression language too powerful• <button ng-click="(oldPassword && checkComplexity(newPassword) && oldPassword != newPassword) ? (changePassword(oldPassword, newPassword) && (oldPassword=(newPassword=''))) : (errorMessage='Please input a new password matching the following requirements: ' + passwordRequirements)">Click me</button>
Backbone: good things
• Compact, minimal, not opinionated
• Resembles classic Javascript the most
• Has the least learning curve
• Huge community (ecosystem) and lots of solutions on StackOverflow
• Many popular applications • Twitter, Foursquare, LinkedIn Mobile, Soundcloud, Pitchfork, Pandora,
Pinterest, Flixster, AirBNB
Backbone: bad things
• Hands off: Need to develop own • Application Architecture / Layout Structure / Memory management/
• Too much option of bringing third party plugins• Cost time to do research, it’s not so minimal and becomes opinionated
• Lacking features compared to the newer frameworks• No data binding
• a lot of boiler plate code to make it work well
• doesn’t allow easy iteration through UI variants
• No nested model• userModel.get("name").first = "Tom"; userModel.set("name.first","Tom"); -- can’t do
• Views manipulate the DOM directly, making them really hard to unit-test, more fragile and less reusable.
Backbone vs Angular
updateCrossOut: function () {if (this.model.get('done')) {
this.$input.addClass('crossedOut');… …
}else {
this.$input.removeClass('crossedOut');… …
}},
<input class="templateTitle"ng-class="{crossedOut: toDoItem.done}"… ng-model="toDoItem.text" />
Performance Comparison: TodoMVC Benchmark
• Angular (v1.2.14), Backbone (v1.1.2) + jQuery (v2.1.0)
• Test case: • Add 100 todos, toggle them one by one, then delete them one by one,
• 10 runs average • Data collected on an Late 2013 Retina Macbook Pro 13 with a 2.6GHz dual-core i5-4288U
Processor under OS X Mavericks 10.9.1.
• Average Response on Chrome 33, Firefox 28 and Safari 7
• AngularJS 1617.72ms
• Backbone 833.36ms
• http://vuejs.org/perf/
DemoToDo MVC in Angular and Backbone
When to use Angular?
• Something declarative that uses View to derive behavior
• Custom HTML tags and components that specify your application intentions
• Easily testable, URL management (routing) and a separation of concerns through a variation of MVC
• Good at making quick changes• create easily testable code and test it often
• Not a good fit for Angular• Games and GUI editors are examples of applications with intensive and tricky
DOM manipulation, different from CRUD apps• may be better to use a library like jQuery
• Has its own scaffolding tools available (angular-seed)
When to use Backbone?
• Something flexible, offers a minimalist solution
• Support a persistence layer and RESTful sync, models, views (with controllers), event-driven communication, templating and routing
• Imperative, update View when model changes
• Like some decisions about the architecture left to you
• Building something complex, • Active extension community Marionette62, Chaplin63, Aura64, Thorax65
• Scaffolding tools (grunt-bbb66, brunch67)
Go mobileFrom web app to hybrid app
Apps dominate the mobile web
Low investment for more capabilities
Capabilities
Deve
lop
er
Inve
stm
ent
Web App
Hybrid App
Native App
World Wide Web Hybrid
Delivery mechanism Delivered via browser Packaged on my device
Input Touch Touch
Offline Support No Yes
Device Capabilities Web APIs Only Native Device APIs
Monetization Web Commerce App Store & In-App Purchases
Discoverability Bookmarks & Search Engines Always on my home screen
🌐
What is Apache Cordova?
• Open-source framework
Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase deployed to all targets
<webview>
Your JavaScript App
Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase deployed to all targets
• Plugins provide a common JavaScript API to access device capabilities
<webview>
Your JavaScript App
Cordova Plugin JS API
Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase deployed to all targets
• Plugins provide a common JavaScript API to access device capabilities
• About 6% of apps in stores (13% in enterprise)
<webview>
Your JavaScript App
Cordova Plugin JS API
DemoConverting ToDo MVC into a hybrid app
Tips, Tricks & Considerations
• Use Cordova when an idea makes sense as a web app, but you need…• Cross-platform support as a packaged application• Offline support • Access to native device capabilities (e.g. camera, accelerometer, file system)• Better reach & discoverability
• If you’re building a first-person shooter… go native.
• Cordova depends on the platform build system• To build for iOS, you need a Mac• To build for Windows 8+, you need Windows 8+• To build for Android, you need the Android SDK
• Touch input means bigger everything. Consider a control framework like Ionic.
Summary
• Backbone was easier to learn compared to Angular
• Backbone tends to be faster than Angular in ToDoMVC perftests
• Angular resulted in fewer lines code than Backbone for our app making it easier to maintain
• Angular provided far more features (e.g. data-binding, custom directives, declarative markup)
• Converting both frameworks to mobile was equally simple via Apache Cordova
Resources
• AngularJS: http://angularjs.org
• BackboneJS: http://backbonejs.org
• ToDo MVC: http://todomvc.com
• Tools for Apache Cordova: http://aka.ms/cordova
• StackOverflow #multi-device-hybrid-apps