JavaScript MVC Frameworks: Backbone, Ember and Angular JS
•
6 likes•2,814 views
In this fast paced world, how many users would like to stare at loading screen or the spinning wheel, while the request or process is being completed? If your answer is "None", you are spot on. The application developers work does not get easier with the myriad range of devices they need to cater to. We already have desktops, laptops,tablets, smartphones, smart TVs and adding further to this complexity are the distinctive characteristics of these devices like screen size, operating system, computing power, limited battery life, storage and many more. This leaves the developers to make variety of decisions regarding application compatibility, performance, usability and maintainability. One also needs to ensure that the application is scalable to meet future goals and needs of an organization. Here is where JavaScript frameworks come to the rescue; many of them work on the Model-View-Controller (MVC) design, thus enabling you to focus on making your applications rich and engaging rather than on their code structure and maintenance. However, with the large number of JavaScript frameworks available, it can become a nightmare on the development team to choose the right framework for their web app development. Thank you, for joining us for webinar on "JavaScript MVC Frameworks: Backbone, Ember and Angular JS - The paradigm shift and the impact on application development" on May 6. Attendees gained insights on the major JavaScript frameworks utilized for web app development and selecting the right framework. THE WEBINAR KEY TAKEAWAYS : 1- How JavaScript MVC frameworks are becoming the cornerstone in Web Application development: The business need, the impact, and the advantages 2-Who are the key players? - Backbone JS, Ember JS, Angular JS -A brief introduction 3-What are the Key considerations while selecting a framework 4-The salient features and constraints of each framework 5-Use case walk-through
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to JavaScript MVC Frameworks: Backbone, Ember and Angular JS
Similar to JavaScript MVC Frameworks: Backbone, Ember and Angular JS (20)
More from Harbinger Systems - HRTech Builder of Choice
More from Harbinger Systems - HRTech Builder of Choice (20)
Recently uploaded
Recently uploaded (20)
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
- 1. Webinar Javascript MVC Frameworks- Backbone, Ember and Angular Js The Paradigm Shift and The Impact on Application Development
- 2. Panelists Mahesh Kumar Kharade Associate Architect Harbinger Systems Meera Navale Software Engineer Harbinger Systems © Harbinger Systems | www.harbinger-systems.com
- 3. Agenda • Overview – Web Application UI – Single Page Applications [SPA] • JavaScript Ecosystem • JavaScript [JS] MVC – Features – Architecture – Key Components • Key JS MVC Frameworks – Backbone JS – Angular JS – Ember JS • Choosing the Framework • Case Study © Harbinger Systems | www.harbinger-systems.com
- 4. Overview: Web Application UI • Not just Basic HTML views like – Grids – Lists – Charts • More real-time components like – Online User Counters – Real-time Feeds – Overall number of components on webpage – Web views becoming Web Applications • Role of REST APIs © Harbinger Systems | www.harbinger-systems.com • Client side processing • Mobile Support • HTML5 – Local Storage – pushState • JS templating engines – Mustache.js – Twig.js
- 5. What is SPA? • Single Page Application is a web app in which the majority of interactions are handled on the client without the need to reach a server, with a goal of providing a more fluid user experience © Harbinger Systems | www.harbinger-systems.com
- 6. SPA: Driving Factor for JS Frameworks • It is an application so it can do Cool Stuff! • Responsive, native application feel. No page flicker! • Faster UI, More Interactive • Most of the page processing happens client side, offloading server load • Massive tooling support, Vibrant community • Code reuse, REST endpoints are general purpose and can be used for multiple applications • UI is just another Client • Perfect for supporting multiple platforms © Harbinger Systems | www.harbinger-systems.com
- 7. Business Usage • Create “App-like user experience” • Bind to your own (or 3rd party) RESTful API • Build hybrid (native) HTML5 applications • Mobile version of your website © Harbinger Systems | www.harbinger-systems.com The SPA sweet spot is likely not on web sites, but on content-rich cross-platform mobile apps
- 8. MVC JavaScript • Front end developers know JavaScript • Better organization to front end applications • Abstract complexity • Good integration with JavaScript frameworks • An easier way to do tests © Harbinger Systems | www.harbinger-systems.com
- 9. JavaScript Ecosystem © Harbinger Systems | www.harbinger-systems.com JavaScript MVC Framework ( EmberJS, JavaScriptMVC, Backbone.js, … ) JavaScript Frameworks ( jQuery, MooTools, YUI Library, Dojo Toolkit,…) Template Frameworks ( Mustache, JAML, Eco, ICanHaz.js, JQote 2, … ) Testing Frameworks (QUnit, Jasmine SinonJS, … ) Dynamic Stylesheet Language ( SASS, LESS ) Mobile Frameworks ( PhoneGap, Zepto, … ) Minification Frameworks ( YUI compressor JSMIN, … )
- 10. Building Blocks of JS MVC © Harbinger Systems | www.harbinger-systems.com Source: http://www.slideshare.net/SC5/building-single-page-applications-16543203
- 11. MVC Architecture © Harbinger Systems | www.harbinger-systems.com view controller Model Client side Server side web services DOM back end
- 12. Top JS MVC Frameworks © Harbinger Systems | www.harbinger-systems.com
- 13. • A lightweight MVC framework • Born in 2010 • Popular as a lean alternative to heavy, full- featured MVC frameworks such as ExtJS © Harbinger Systems | www.harbinger-systems.com
- 14. Backbone JS : Main concepts • Model • Collection • View • Template • Router • History • Events © Harbinger Systems | www.harbinger-systems.com
- 15. MVC: Backbone © Harbinger Systems | www.harbinger-systems.com Source: http://www.jboss.org/jdf/examples/ticket-monster/tutorial/UserFrontEnd/
- 16. •Open-source JavaScript framework •Developed in 2009 •Maintained by Google •Actively developed and supported © Harbinger Systems | www.harbinger-systems.com
- 17. Key Features of AngularJS • Declarative HTML approach • Easy Data Binding: Two way Data Binding • Reusable Components • MVC/Model View View Model (MVVM)Design Pattern • Dependency Injection • End to end Integration Testing / Unit Testing • Routing • Templating © Harbinger Systems | www.harbinger-systems.com
- 18. HTML Compiler • Angular's HTML compiler allows the developer to – Teach the browser new HTML syntax – Attach behaviour to any HTML element or attribute and even create new HTML elements or attributes with custom behavior – Angular calls these behaviour extensions directives • Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens in two phases. – Compile: traverse the DOM and collect all of the directives. The result is a linking function. – Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth. © Harbinger Systems | www.harbinger-systems.com
- 19. MVVM: AngularJS Way © Harbinger Systems | www.harbinger-systems.com VIEW • User Interface • Reusable Components • UI Logic • Observers & Notify View Model CONTROLLER • Maintain state • Define Application Behavior • Maps user actions to Model VIEW MODEL • Presentation Logic • State • Observe Mutations • Notify View Data Processing Data Binding Commands Notifications Events User Interactions Other Key Components of an Angular Application Dependency Injection | Directives | Filters | Templates
- 20. © Harbinger Systems | www.harbinger-systems.com •Open-source client-side JavaScript web application framework •Developed in 2011
- 21. Ember JS • Borrowed ideas pioneered by native application frameworks like Cocoa and Smalltalk • Small choices are made for you, just like Rails • Convention over configuration • Dependencies – jQuery – Handlebars.js – Template Language © Harbinger Systems | www.harbinger-systems.com “It is more important to reduce the effort of maintenance than it is to reduce the effort of implementation” Max Kanat-Alexander, Code Simplicity Ember in the Wild discourse.org | zendesk.com | livingsocial.com | groupon.com | sqaureup.com | Yapp.us
- 22. Core Concepts • Templates • Routers • Components • Models • Routes • Views © Harbinger Systems | www.harbinger-systems.com
- 23. Comparative analysis: AngularJS • The Good – Has brought many innovative concepts to the world of web developers – Two-way data binding saves a lot of boilerplate code – The largest community and much more online content – Better modularity achieved – Easy to create reusable components and extending HTML by defining new elements, attributes and behaviors – A lot of emphasis on separation of concerns, unit isolation and provides ready-to-use, powerful mocks for fundamental built-in services © Harbinger Systems | www.harbinger-systems.com
- 24. Comparative analysis: AngularJS • Pain Points – The complexity of the Directives API – Use of templates, reduces testability – Coding errors/typos hard to locate – A lot of interactive elements, Angular becomes really slow © Harbinger Systems | www.harbinger-systems.com
- 25. Comparative analysis: BackboneJS • The Good – Lightweight, fast and has a small memory footprint – Learning curve is very linear – Great documentation – API very stable • Pain Points – Does not provide structure – Memory management have to be carefully considered – Lacks support for two-way data binding – Hard to unit-test, more fragile and less reusable © Harbinger Systems | www.harbinger-systems.com
- 26. Comparative analysis: EmberJS • The Good – Automatically infer much of the configuration itself – an excellent router and an optional data layer that integrates really nicely with backend like RoR or any other RESTful JSON API – Better Performance: application loads and runs fast • Pain Points – API changed much before it stabilized, there is a lot of outdated content and examples that no longer work © Harbinger Systems | www.harbinger-systems.com
- 27. Choosing Framework • Features – JavaScript MVC Frameworks are a set of common features – main features of a JavaScript MVC Framework • Two-way Binding between HTML and a client-side JavaScript object model • View Templates • Data Storage (local or through a web server to a database) • URL Routing (keeping the back button working and search engines happy) © Harbinger Systems | www.harbinger-systems.com
- 28. Choosing Framework • Maturity – How many real-world production apps are using these frameworks and how many users do these apps have? – How good is the documentation and how many examples/tutorials are available? – Are the examples up to date? – How stable is the API? – Do other developers know or are they getting to know this technology? © Harbinger Systems | www.harbinger-systems.com
- 29. Choosing Framework • Size © Harbinger Systems | www.harbinger-systems.com 39.5 6.5 90 0 20 40 60 80 100 Angular JS Backbone JS ember.js Size (kb) Size
- 30. Choosing Framework • Dependencies © Harbinger Systems | www.harbinger-systems.com 39.5 50 ( jQuery + Underscore) 136.2 (jQuery + Handlebars) 0 20 40 60 80 100 120 140 160 Angular JS Backbone JS ember.js Size (kb) Size
- 31. Choosing Framework • Community © Harbinger Systems | www.harbinger-systems.com Metric AngularJS Backbone.js Ember.js Stars on Github 27.2k 18.8k 11k Third-Party Modules 800 ngmodules 236 backplugs 21 emberaddons StackOverflow Questions 49.5k 15.9k 11.2k YouTube Results ~75k ~16k ~6k GitHub Contributors 928 230 393 Chrome Extension Users 150k 7k 38.3k Source: https://www.airpair.com/js/javascript-framework-comparison
- 32. DEMO screens © Harbinger Systems | www.harbinger-systems.com
- 33. DEMO screens © Harbinger Systems | www.harbinger-systems.com
- 34. Q&A © Harbinger Systems | www.harbinger-systems.com
- 35. Thank You! Visit us at: www.harbinger-systems.com Write to us at: hsplinfo@harbingergroup.com Blog: blog.harbinger-systems.com Twitter: twitter.com/HarbingerSys (@HarbingerSys) Slideshare: slideshare.net/hsplmkting Facebook: facebook.com/harbingersys LinkedIn: linkedin.com/company/382306 © Harbinger Systems | www.harbinger-systems.com
Editor's Notes
- “App-like user experience” Touch navigation Instant response to your clicks Fluid transitions between pages Cached & pre-fetched content Binding to your own (or 3rd party) RESTful API Ease of populating models Replacement for Flash or Java in your web pages e.g. FlipBoard, LinkedIn iPad Hybrid (native) HTML5 applications e.g. FlipBoard, LinkedIn iPad Apache Cordova, Embedded WebViews, Tizen, Windows 8 Mobile version of your web site m.veikkaus.fi, plus.hbl.fi, app.ft.com
- XMLHTTPRequestHTML and all the assets are loaded in first request Additional data is fetched over In addition to normal server stack, you need to have API endpoints in the same level as presentation layer If you want to go real-time, WebSockets (socket.io) can help you When it gets slow, cluster the backend behind a caching reverse proxy like Varnish
- Backbone.js operates with following objects * Model contains data and provides business logic used in the application. * Collection is a set of models that can be processed in the loop and supports sorting and filtering. * View renders model or collection and interacts with the user. * Templates are used for separation HTML from JavaSript in the View. By default Undescore template engine is used, but it can be replaced with Twig, which is used in Drupal 8 or Mustache. * Router is similar to hook_menu. It allows to define a path and provide callbacks. * History is global object, which contains router that is currently in use. * Backbone objects such as Models, Collections, Views and Router implements Events object, they can provide own events and listen to events from other objects.
- There are some differences in Backbone architecture and traditional MVC pattern. At the left there is a MVC structure . Here we see, that the Model updates the View seen by the user. User can perform actions which are handled by the Controller. Controller manipulates model data and can trigger business logic methods. Also Models is synchronized with a storage. At the right you can see Backbone.js structure. The main difference is that some of the controller functionality is implemented by the View, while other by the router. Typically view can listen model events and update DOM. View also listens to user events and updates model accordingly. Model is synchronized with a server using REST approach. Read ops are typically controlled by the Router, while write ops by the View.
- Controllers Contains the code behind the view Try to keep lightweight Controllers do not need to directly manipulate the view contain only the business logic needed for a single view
- discourse.org zendesk.com livingsocial.com groupon.com sqaureup.com Yapp.us
- A template, written in the Handlebars templating language, describes the user interface of your application. Each template is backed by a model, and the template automatically updates itself if the model changes. HTML + embeded expression The router translates a URL into a series of nested templates, each backed by a model. As the templates or models being shown to the user change, Ember automatically keeps the URL in the browser's address bar up-to-date. (Manage the state of application) at any point, users are able to share the URL of your app A component is a custom HTML tag whose behavior you implement using JavaScript and whose appearance you describe using Handlebars templates. They allow you to create reusable controls that can simplify your application's templates. A model is an object that stores persistent state. Templates are responsible for displaying the model to the user by turning it into HTML. A route is an object that tells the template which model it should display. If you don't specify the controller (app/controllers/post.js), Ember will automatically make one for you based on the return value of the route's model hook. If the model is an Array, you get an ArrayController. Otherwise, you get an ObjectController. By default creates index route Encapsulates templates, combines templates with data and responds to user initiated events