JavaScript MVC Frameworks: Backbone, Ember and Angular JS

Editor's Notes

• #8: “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
• #11: 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
• #15: 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.
• #16: 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.
• #20: 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
• #22: discourse.org zendesk.com livingsocial.com groupon.com sqaureup.com Yapp.us
• #23: 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