1.
Angular or Backbone: Go Mobile!
Doris Chen Ph.D.
Senior Developer Evangelist
Microsoft
doris.chen@microsoft.com
http://blogs.msdn.com/dorischen/
@doristchen

2.
Doris Chen, Ph.D.
•Developer Evangelist at Microsoft based in Silicon Valley, CA
•Blog: http://blogs.msdn.com/b/dorischen/
•Twitter @doristchen
•Email: doris.chen@microsoft.com
•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)

3.
Agenda
1.Angular vs Backbone
2.Demo: ToDoApp in Angular and Backbone
3.Mobile Apps for JavaScript
4.Demo: ToDoApp with Apache Cordova
5.Summary and Resources

4.
Angular vs Backbone

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

6.
History
Angular
•Born in 2009 as a part of commercial product, called GetAngular
•MiskoHevery, 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

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

8.
Community
Metric
Angular
Backbone
Stars on GitHub
29.8k
19.3k
Third-Party Modules
800 ngmodules
236 backplugs
StackOverflowQuestions
49.5k
15.9k
YouTube Results
~75k
~16k
GitHub Contributors
928
230
Chrome Extension Users
150k
7k

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

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

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

12.
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)

13.
Backbone: modelapp.TodoModel= Backbone.Model.extend({ defaults: { title: '', done: false, location: 'Getting your location...' }, toggleCompleted: function() { this.save({ done: !this.get('done') }); }, sync: function() { returnfalse; }
});

14.
Backbone: modeland collectionvarTodoCollection= Backbone.Collection.extend({ model: app.TodoModel, }); app.todoCollection= newTodoCollection;
•Backbone is built around observable properties, forcedto extend Backbone.Modeland Backbone.Collection
•Backbone does not support observing functions, property needs to resetwhen any change happens

15.
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, reusableservicesand 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

16.
2-way bindings and directives<divclass="templateWrapper"ng-repeat="toDoItemin todos"> <divclass="templateContainer"> <inputclass="templateTitle" ng-class="{crossedOut: toDoItem.done}"type="text" ng-text-change="changeToDoText(toDoItem)" ng-model="toDoItem.text"/> <h3class="templateAddress">{{toDoItem.address}}</h3> </div> </div>

17.
Dependency injection<sectionid="todoapp"ng-controller="ToDoCtrl"> <buttonclass="templateLefttemplateRemove" 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) { varindex =$scope.todos.indexOf(todo); $scope.todos.splice(index, 1); }); } }]);

18.
Angular: more good things
•Building application blocks into: Controllers, Directives, Factories, Filters, Services and Views (templates).
•ViewsUI, Controllerslogic behind UI, Servicescommunication with backend and common functionality, Directivesreusable components and extendingHTMLby defining new elements, attributes and behaviors
•Promisesplay a main role in Angular

19.
Custom directives<inputclass="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); }); … });

20.
Custom directives, continued$scope.changeToDoText= function(toDoItem) { //Notice .then Promisepattern is used heregetAddress().then(function(address) { toDoItem.address= address; returnstorage.update(toDoItem); }, function(errorMessage) { toDoItem.address= errorMessage; returnstorage.update(toDoItem); }); }

21.
Angular: bad things
•Extremely opinionated
•Frustrated: prior experience in creating UI with Javascriptis rendered almost useless
•Do everything according to the “Angular way”
•Directives could be super complicated and odd
•Expression language too powerful
•<buttonng-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>

22.
Backbone: good things
•Compact, minimal, not opinionated
•Resembles classic Javascriptthe 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

23.
Backbone: bad things
•Hands off: Needto 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.

24.
Backbone vs AngularupdateCrossOut: function() { if(this.model.get('done')) { this.$input.addClass('crossedOut'); … … } else{ this.$input.removeClass('crossedOut'); … … }}, <inputclass="templateTitle" ng-class="{crossedOut: toDoItem.done}"… ng-model="toDoItem.text"/>

25.
Performance Comparison: TodoMVCBenchmark
•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 MacbookPro 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
•AngularJS1617.72ms
•Backbone833.36ms
•http://vuejs.org/perf/

26.
Demo
ToDoMVC in Angular and Backbone

27.
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)

28.
When to use Backbone?
•Something flexible, offers a minimalist solution
•Support a persistence layer and RESTfulsync, models, views (with controllers), event-driven communication, templatingand 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)

29.
Go mobile
From web app to hybrid app

30.
Apps dominate the mobile web

31.
Low investment for more capabilities
Capabilities
Developer Investment
Web App
Hybrid App
Native App

32.
World Wide Web
Hybrid
Deliverymechanism
Delivered via browser
Packagedon my device
Input
Touch
Touch
Offline Support
No
Yes
DeviceCapabilities
Web APIs Only
Native Device APIs
Monetization
Web Commerce
App Store & In-App Purchases
Discoverability
Bookmarks & Search Engines
Always on my home screen


33.
What is Apache Cordova?
•Open-source framework

34.
Native Wrapper
What is Apache Cordova?
•Open-source framework
•Hosted webview
•Single, shared codebase deployed to all targets
<webview> Your JavaScript App

35.
Native Wrapper
What 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

36.
Native Wrapper
What 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

37.
Demo
Converting ToDoMVC into a hybrid app

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

39.
Summary
•Backbone was easier to learn compared to Angular
•Backbone tends to be faster than Angular in ToDoMVCperftests
•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

40.
Resources
•AngularJS: http://angularjs.org
•BackboneJS:http://backbonejs.org
•ToDoMVC: http://todomvc.com
•Tools for Apache Cordova: http://aka.ms/cordova
•StackOverflow#multi-device-hybrid-apps