Angular or Backbone: Go Mobile!
7 likes4,979 views
The document discusses a comparison between Angular and Backbone frameworks, highlighting their features, learning curves, and performance. Angular offers a comprehensive solution with features like two-way data binding and custom directives, while Backbone provides a more flexible, minimalist approach. The author concludes that Angular might be easier to maintain for larger applications, whereas Backbone has a lower learning curve and faster performance in certain benchmarks.
![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); }); } }]);](https://image.slidesharecdn.com/google-angularvsbackboneformatted-141117193734-conversion-gate01/85/Angular-or-Backbone-Go-Mobile-17-320.jpg)
Angular or Backbone: Go Mobile!
- 1. Angular or Backbone: Go Mobile! Doris Chen Ph.D. Senior Developer Evangelist Microsoft [email protected] 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: [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)
- 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
- 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