Author: Martin Kornblum, Santiago Chapotot, and Hernan Taboada ⎢ Engineering Team
Introduction
Traditionally, web applications left the heavy-lifting of data to servers that pushed HTML to the browser in complete page loads. The use of client-side JavaScript was limited to improving the user experience. Now, this relationship has been inverted – client applications pull raw data from the server and render it into the browser when and where it is needed. 1
The problem with the classical approach is that it has a way of disrupting the user experience quite badly. There’s an obvious transition from one page to the next which requires you to wait until entire new pages have loaded and this often means requesting the same content again and again (eg. the sidebars, header, navigation, etc). 2
A Single-Page Application (SPA) model emerged as an attempt to address these issues.
The basic idea behind a SPA is that regardless of what interactions your users might have with the application, the page doesn’t get reloaded or have its control handled by another page outside of the current one. SPAs typically contrast from classical multi-page web applications where page changes are regular and the browser is often asked to fetch new content from the server and then reload to fulfill user requests. 3
A standards-compliant approach to implement the SPA model would typically involve the use of JavaScript frameworks such as Knockout, Ember.js, or AngularJS.
Adoption
This chart illustrates the interest over time of the three major frameworks, whereas per September 2014, Angular surpasses its competitors by a 9 to 1 ratio 4:
In the same vein, referential Q&A community Stack Overflow yields the following figures:
- Angular: 61,226 questions tagged “angularjs” 5
- Ember: 12,380 questions tagged “ember.js” 6
- Knockout: 12,163 questions tagged “knockout.js” 7
In this case, a 5 to 1 ratio separates Angular from any meaningful competition.
Last year InfoQ conducted a poll 8 asking the development community to rank the most popular MVC frameworks in terms of Value Proposition and Adoption Readiness. The following chart illustrates the results after 3168 votes:
Comparison
Data Binding
2-way data binding has entrenched modern front-end development as a tool allowing you to avoid boilerplate code when working with DOM, concentrate on logic, and isolate the logic from your templates. 9
The following code samples show basic data binding implementations for a simple, read-only data table use case:
| EMBER | ~104 LINES OF CODE | ( OPEN | VIEW SOURCE ) |
| Knockout | ~78 lines of code | ( Open | View Source) |
| Angular | ~64 lines of code | ( Open | View Source ) |
Why Angular?
AngularJS is a new, powerful, client-side technology that provides a way of accomplishing really powerful things in a way that embraces and extends HTML, CSS, and JavaScript while shoring up some of its glaring deficiencies. It is what HTML would have been, had it been built for dynamic content. 10
Among the key features it provides:
Two-Way Data Binding
A typical web application may contain up to 80% of its codebase, dedicated to traversing, manipulating, and listening to the DOM. Data-binding makes this code disappear, so you can focus on your application.
Traditionally, when the model changes, the developer is responsible for manually manipulating the DOM elements and attributes to reflect these changes. This is a two-way street. In one direction, the model changes drive change in DOM elements. On the other, DOM element changes necessitate changes in the model. This is further complicated by user interaction, since the developer is then responsible for interpreting the interactions, merging them into a model, and updating the view.
AngularJS’ two-way data-binding handles the synchronization between the DOM and the model, and vice versa. 11
Templates
In AngularJS, a template is just plain old-HTML. The HTML vocabulary is extended, to contain instructions on how the model should be projected into the view.
The HTML templates are parsed by the browser into the DOM. The DOM then becomes the input to the AngularJS compiler. AngularJS traverses the DOM template for rendering instructions, which are called directives. Collectively, the directives are responsible for setting up the data-binding for your application view.
It is important to realize that at no point does AngularJS manipulate the template as strings. The input to AngularJS is browser DOM and not an HTML string. The data-bindings are DOM transformations, not string concatenations or innerHTML changes. Using the DOM as the input, rather than strings, is the biggest differentiation AngularJS has from its sibling frameworks. Using the DOM is what allows you to extend the directive vocabulary and build your own directives, or even abstract them into reusable components.
One of the greatest advantages of this approach is that it creates a tight workflow between designers and developers. Designers can mark up their HTML as they normally would, and then developers take the baton and hook in functionality, via bindings with very little effort. 12
Model-View-Controller
AngularJS incorporates the basic principles behind the original MVC software design pattern into how it builds client-side web applications.
The MVC or Model-View-Controller pattern means a lot of different things to different people. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel).
The Model is simply the data in the application. The model is just plain old JavaScript objects. There is no need to inherit from framework classes, wrap it in proxy objects, or use special getter/setter methods to access it. The fact that we are dealing with vanilla JavaScript is a really nice feature, which cuts down on the application boilerplate.
A ViewModel is an object that provides specific data and methods to maintain specific views. The ViewModel is the $scope object that lives within the AngularJS application. $scope is just a simple JavaScript object with a small API designed to detect and broadcast changes to its state.
The Controller is responsible for setting the initial state and augmenting $scope with methods to control behavior. It is worth noting that the controller does not store state and does not interact with remote services.
The View is the HTML that exists after AngularJS has parsed and compiled the HTML to include rendered markup and bindings.
This division creates a solid foundation to architect your application. The $scope has a reference to the data, the controller defines behavior, and the view handles the layout and handing off interaction to the controller to respond accordingly. 13
Dependency Injection
AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.
To gain access to core AngularJS services, it is simply a matter of adding that service as a parameter; AngularJS will detect that you need that service and provide an instance for you. 14
Directives
Directives can be used to create custom HTML tags that serve as new, custom widgets. They can also be used to ‘decorate’ elements with behavior and manipulate DOM attributes in interesting ways. 15
Unit Testing
Given the fact that JavaScript is dynamic and interpreted, rather than compiled, it is extremely important for developers to adopt a disciplined mindset for writing tests.
AngularJS is written entirely from the ground up to be testable. It even comes with an end-to-end and unit test runner setup. If you would like to see this in action, go check out the angular-seed project. 16
Our Experience
Truelogic Software Solutions is a custom web and mobile software development company that leverages global facilities, world-class engineers, and state-of-the-art tools and methodologies to help you reduce operating costs and shorten timelines.
Truelogic has over ten years of experience working with well-known multinationals such as McAfee, Nissan, The Emmys, The New York Times, Manpower, Panasonic, Honda, and Verizon as well start-ups and medium-sized businesses alike. We are proud to have a wide range of clients of all sizes, reflecting our flexibility and versatility, always finding the right balance that each particular client seeks.
One of the core front-end technologies we recommend for new enterprise-scaled applications in AngularJS. Since 2012, we have been using this framework with amazing results and outstanding customer satisfaction.
If you want to know more about what Truelogic can deliver for your project, please visit www.truelogic.io
References
1 Addy Osmani, “Developing Backbone.js Applications”, 2013-05-01
http://addyosmani.github.io/backbone-fundamentals
2 3 Addy Osmani, “Building Single Page Applications with jQuery’s Best Friends”,
http://addyosmani.com/blog/building-spas-jquerys-best-friends, 2011-02-23
4 Google Trends, “Web search interest: angularjs, knockoutjs, emberjs – Worldwide, 2004 – present”,
http://goo.gl/tgdbz5, 2014-10-27
5 Stack Overflow, “Newest ‘angularjs’ questions”
http://stackoverflow.com/questions/tagged/angularjs, 2014-10-27
6 Stack Overflow, “Newest ‘ember.js’ questions”
http://stackoverflow.com/questions/tagged/ember.js, 2014-10-27
7 Stack Overflow, “Newest ‘knockout.js’ questions”
http://stackoverflow.com/questions/tagged/knockout.js, 2014-10-27
8 Dio Synodinos, “Top JavaScript MVC Frameworks”
http://www.infoq.com/research/top-javascript-mvc-frameworks, 2013-02-05
9 Boris Staal, “2-Way Data Binding under the Microscope”
http://staal.io/blog/2014/02/05/2-way-data-binding-under-the-microscope, 2014-02-05
10…16 Lukas Rubbelke, “5 Awesome AngularJS Features”,
http://code.tutsplus.com/tutorials/5-awesome-angularjs-features–net-25651, 2012-07-05
