Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Angular or Backbone: Go Mobile! 
Doris Chen Ph.D. 
Senior Developer Evangelist 
Microsoft 
doris.chen@microsoft.com 
http:...
Doris Chen, Ph.D. 
•Developer Evangelist at Microsoft based in Silicon Valley, CA 
•Blog: http://blogs.msdn.com/b/dorische...
Agenda 
1.Angular vs Backbone 
2.Demo: ToDoApp in Angular and Backbone 
3.Mobile Apps for JavaScript 
4.Demo: ToDoApp with...
Angular vs Backbone
Angular vs Backbone: common 
•Client-side framework using the MV* design pattern 
•Solve the problem of Single Page Web Ap...
History 
Angular 
•Born in 2009 as a part of commercial product, called GetAngular 
•MiskoHevery, one of founders, turn a ...
Learning curve and Flexibility 
Angular 
•Looks quite easy at first sight 
•After the very basics it is quite a steep lear...
Community 
Metric 
Angular 
Backbone 
Stars on GitHub 
29.8k 
19.3k 
Third-Party Modules 
800 ngmodules 
236 backplugs 
St...
Angular 
Backbone 
Architecture 
MV* (Model View Whatever) 
MV + VC 
Template Support 
YES. doesn’t require any other sepa...
Angular: templates 
•Simply HTML with binding expressions baked-in 
•Binding expressions are surrounded by double curly br...
Backbone: templates 
<ul> 
<% _.each(frameworks, function(framework) { %> 
<li title="<%-framework.description%>"> 
<%-fra...
Angular: model 
•Angular does not use observable properties, no restriction on implementing model 
•No class to extend and...
Backbone: modelapp.TodoModel= Backbone.Model.extend({ defaults: { title: '', done: false, location: 'Getting your location...
Backbone: modeland collectionvarTodoCollection= Backbone.Collection.extend({ model: app.TodoModel, }); app.todoCollection=...
Angular: good things 
•Two-way data bindings, dependency injection, easy-to-test code, extending the HTML dialect by using...
2-way bindings and directives<divclass="templateWrapper"ng-repeat="toDoItemin todos"> <divclass="templateContainer"> <inpu...
Dependency injection<sectionid="todoapp"ng-controller="ToDoCtrl"> <buttonclass="templateLefttemplateRemove" ng-click="remo...
Angular: more good things 
•Building application blocks into: Controllers, Directives, Factories, Filters, Services and Vi...
Custom directives<inputclass="templateTitle" ng-class="{crossedOut: toDoItem.done}"type="text" ng-text-change=" changeToDo...
Custom directives, continued$scope.changeToDoText= function(toDoItem) { //Notice .then Promisepattern is used heregetAddre...
Angular: bad things 
•Extremely opinionated 
•Frustrated: prior experience in creating UI with Javascriptis rendered almos...
Backbone: good things 
•Compact, minimal, not opinionated 
•Resembles classic Javascriptthe most 
•Has the least learning ...
Backbone: bad things 
•Hands off: Needto develop own 
•Application Architecture / Layout Structure / Memory management/ 
•...
Backbone vs AngularupdateCrossOut: function() { if(this.model.get('done')) { this.$input.addClass('crossedOut'); … … } els...
Performance Comparison: TodoMVCBenchmark 
•Angular (v1.2.14), Backbone (v1.1.2) + jQuery (v2.1.0) 
•Test case: 
•Add 100 t...
Demo 
ToDoMVC in Angular and Backbone
When to use Angular? 
•Something declarative that uses View to derive behavior 
•Custom HTML tags and components that spec...
When to use Backbone? 
•Something flexible, offers a minimalist solution 
•Support a persistence layer and RESTfulsync, mo...
Go mobile 
From web app to hybrid app
Apps dominate the mobile web
Low investment for more capabilities 
Capabilities 
Developer Investment 
Web App 
Hybrid App 
Native App
World Wide Web 
Hybrid 
Deliverymechanism 
Delivered via browser 
Packagedon my device 
Input 
Touch 
Touch 
Offline Suppo...
What is Apache Cordova? 
•Open-source framework
Native Wrapper 
What is Apache Cordova? 
•Open-source framework 
•Hosted webview 
•Single, shared codebase deployed to all...
Native Wrapper 
What is Apache Cordova? 
•Open-source framework 
•Hosted webview 
•Single, shared codebase deployed to all...
Native Wrapper 
What is Apache Cordova? 
•Open-source framework 
•Hosted webview 
•Single, shared codebase deployed to all...
Demo 
Converting ToDoMVC into a hybrid app
Tips, Tricks & Considerations 
•Use Cordova when an idea makes sense as a web app, but you need… 
•Cross-platform support ...
Summary 
•Backbone was easier to learn compared to Angular 
•Backbone tends to be faster than Angular in ToDoMVCperftests ...
Resources 
•AngularJS: http://angularjs.org 
•BackboneJS:http://backbonejs.org 
•ToDoMVC: http://todomvc.com 
•Tools for A...
Prochain SlideShare
Chargement dans…5
×

Angular or Backbone: Go Mobile!

4 652 vues

Publié le

Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.

Publié dans : Technologie
  • Soyez le premier à commenter

Angular or Backbone: Go Mobile!

  1. 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. 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. 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. 4. Angular vs Backbone
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. Demo ToDoMVC in Angular and Backbone
  27. 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. 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. 29. Go mobile From web app to hybrid app
  30. 30. Apps dominate the mobile web
  31. 31. Low investment for more capabilities Capabilities Developer Investment Web App Hybrid App Native App
  32. 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. 33. What is Apache Cordova? •Open-source framework
  34. 34. Native Wrapper What is Apache Cordova? •Open-source framework •Hosted webview •Single, shared codebase deployed to all targets <webview> Your JavaScript App
  35. 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. 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. 37. Demo Converting ToDoMVC into a hybrid app
  38. 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. 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. 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

×