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
“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
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