White Paper

AngularJS

A Powerful Framework

idexcel

IntroductionWeb is changing fast- the old methodologies are being challenged and are becoming irrelevant, and new technologies are constantly being evolved, thriving to become better and more efficient. Over the past decade, there has been tremendous growth in the User Experience (UX) libraries and frameworks. Developers now have innumerable choices of Model View framework for structuring and organising their JavaScript applications. The number of developers using JavaScript frame-works to create structured applications is growing, and this rapid change reflects the increasing importance of the UI frameworks in the application development.

A balanced framework must be stable, solid, and provides ability to maintain code in the future. There are newer, better and more stable solutions, some of which are open source, and the list continues to grow every day. Most frameworks have a lot in common, but some are definitely better than the others, based on the specific requirements. Choosing the right framework can have a huge impact on the team’s ability to deliver on time, with least possible errors.

With such a vast sea of available choices, it becomes quite difficult for the web developers to choose the framework which best matches their requirements. AngularJS framework has brought several innovative concepts, making web develop-ment an exciting and rich experience for developers, as well as end users. In this paper, we will try to understand some of the basic functionalities of AngularJS, and compare it with some of the other commonly used JS frameworks, mainly Back-bone and Ember.

2 P a g e

AngularJS idexcel

History of Front-End Development

In 2005, AJAX became the internet buzzword, and gained huge popularity. Although updating web content without reloading was not a new concept, but around that time, there was increased convergence between web browsers, and this allowed web developers to implement asynchronous content updating en-masse. This was a big leap forward for the content delivery performance via the Internet. The same year also witnessed the dawn of the server RAD (Rapid Applica-tion Development Framework). RAD framework reduced the web application development time from several months to just few days mainly because few standard conventions were followed, abstracting most of heavy lifting.

A year later, JavaScript toolkit JQuery hit the market and smoothed out the differences in competing browsers behaviour. Now developers could write one JavaScript program using JQuery for DOM interaction, and could run it in different browsers with minor debugging. Wider usage of JQuery also led to best practice called unobtrusive JavaScript which meant keeping the JavaS-cript separate from the HTML which was used for content presentation. However, use of JavaScript made the code quite large and complicated because estab-lished server-side programming patters such as MVS could not translate well to a single threaded browser DOM tree. The situational dependencies started grow-ing, making the code difficult to reuse and test. Over time, several JavaScript libraries, frameworks, abstrac-tions and toolkits came along to help structure and organise the front end code. For next few years, MVP (Model-View-Presenter) and MVVM (Model-View-View-Model) were used for Client-side development. The newer JavaScript frameworks and toolkits have incorpo-rated aspects of MVP and MVVM patterns in the com-ponent architectures and the tools include AmberJS,

3 P a g e

Knockout, Backbone.js and AngularJS. Backbone is at one end of the spectrum and adds few structural, exten-sible tools for client-side routing, view logic containers, REST, and data modelling. Backbone.js is more of a foun-dation for the developers to build their own framework, and for the developers to manage binding between data and view. Ember.js is at the other end of the spectrum and handles management of data binding. However, the developers need to adhere to its basic conventions for all the aspects of application development. Knockout and AngularJS are built around tight data-view binding and can exist within applications that are controlled by the other frameworks.

idexcelAngularJS

4 P a g e

AngularJS is an open web application framework which is maintained by Google, and helps create single-page applications consisting of one HTML page with CSS, and with JavaScript on the client side. It was born in 2009 as a part of bigger commercial product, called GetAngular. Being a Google product, it offers a promising spin on the web with its features and upcoming standards. Angular-JS brings the concepts from different programming languages, including JavaScript and server-side languag-es, and enhances HTML, making it a dynamic language. Hence, developers need not refresh models, update DOM and engage in other time-consuming tasks, such as browser inconsistencies and bug-fixes. They can concentrate on data and programming the application, and data takes care of the HTML. MVW (Mod-el-View-Whatever) gives the flexibility over the design patterns for application development. Developers may choose Model-View-Controller (MVC) or Mod-el-View-ViewModel (MVVM) approach.

Some of the key features of AngularJS include:

idexcelAngularJS

Understanding AngularJS

Angular helps categorize the application blocks in differ-ent types: Directives, Controllers, Filters, Factories, Views and Services, and these in turn are organised into modules that depend on one another. Each building block has a specific role to play.

As compared to Ember.js and Backbone.js frameworks, AngularJS take a different stance in delivering data-bind-ing and other engineering concepts. With Angular, DOM are updated with any changes in the Model, and once the model value is updated, Angular updates its Objects. In Angular, the data lives in the Model, HTML lives in the template that is rendered for viewing, and Controller is used to connect the two.

Two way data binding provides synchronisation between Model and View layers, propagating the changes instantly.

Dependency Injection, DI is a software design pattern which deals with the way components get hold of their dependencies. These dependencies are referred to as Services, and involve passing of the dependency to the dependent object. DI in Angular is a very useful as it makes easily testable components.

Angular offers consistent application structure, allowing developers to easily jump onto projects if required. It creates expected debugging processes and predictable APIs so that there is enhancement in development time and rapid prototyping.

Applications in Angular are created using modules that act as containers for different parts of the application, making the code reusable and testable.

Angular provides unit isolations, and offers powerful, ready-to-use mocks for the fundamental built-in services for testing.

Angular has a large community support, and is backed and promoted by Google. The core team is constantly growing leading to the development of tools that improve productivity. Additionally, the team and community work in collaboration on the design decisions.

5 P a g e

There are several frameworks for the web, and each has its own benefits and limitations. We have compared few most commonly used frameworks here with Angular, and have highlighted the pros and cons of each.

Backbone.js - Born in 2010, Backbone is a lightweight MVC framework which gained popularity quickly as it provided a very feasible option over fully-featured MVC frameworks such as ExtJS. This led to fast adoption by some of the large companies. The learning curve of Backbone is quite linear and the concepts are easy to grasp. Code is simple, docu-mentation is great, and annotated version of the code explains how it works in detail. Being a basic framework, it provides a good foundation.

Backbone uses behavior to drive the view, whereas Angu-lar uses view to derive behaviour. Angular uses markup to infer behaviour, and is best suited for very data driven apps, whereas Backbone is best suited for heavy DOM manipulation. Angular is easy to start with, however the learning curve is steep. Basics of Backbone are easy to learn, but it has fewer conventions, does not default to any view template, no in-built testing recipe and does not have a default project structure, hence, a lot of decisions are left on the developer.

Backbone provides just the basic tools to create structure, and structuring of the application is left to the developers, with lots of blanks to fill. The applications become prone to memory leaks due to lack of viewing life-cycle manage-ment. Backbone does not provide many functions, and these can be filled by the third-party plugin, but there are way too many options as many functions will have several alternative plugins. Making the right choice requires time to research.

Ember.js - The roots of Ember go way back to 2007 when it was originally developed by SpoutIt and then by Apple. Ember has a steep learning curve and is quite flexible; however it believes in conventions over configuration. If developers can follow the naming conventions, a lot can be achieved. Instead of writing a lot of boilerplate code, it can automatically infer the configuration itself. It has good router and an optional data layer called Ember data. It has a minimal data layer, comes with a full-fledged data mod-ules that integrates well with any RESTful JSON API. Grou-pon, Yahoo and ZenDesk are the notable Ember users.Ember API was changed before it could stabilize, and hence there is a lot of content and examples that do not work any longer, causing confusion for new developers. There are also innumerable <script> tags that fill up the DOM tree and also break the CSS styling. Also, Ember can be quite challenging to learn.As compared to Angular, Ember has more concepts to understand, and this toolbox full of complex concepts is great if you wish to build large and maintainable applica-tions.

Knockout - Knockout is a library, like jQuery, where the code is written, and functions are called when required, whereas Angular is a framework, where code is written, and framework calls the code. Knockout uses HTML by default as its templating mechanism however it also supports other string based templating engines.

Angular is more feature-complete, and provides a complete solution for everything required for client-side web application development including dependency-injec-tion, redirection and deep-linking, animation, mini-jQuery, and modern and powerful event handling. These features are not available in Knockout.

idexcelAngularJS

Comparison of Tools

6 P a g e

base, with simple approaches to persistence, binding and routing. However, developers cannot declaratively re-use entire components backed by their own logic.

Sammy-It is a small framework that provides a basic struc-ture for developing JS application. It provides small core framework and developers can use the additional plugins for specific applications. Sammy has a simple learning curve and is easy to integrate with the existing server side applications. However, it is too simple, and does not provide enough functionalities for larger applications.

ActiveJS - Provides local and REST based data modelling and pure DOM view construction.

DHTMLX Suite - Provides a comprehensive set of Ajax-powered UI components to build applications with fast performance, clean interface and rich user experi-ence.Maria - Offers smaller file size with and without dependen-cies, uses observables for data binding, uses templating engine and templates can be pre-complied on the server. Agility - Agility lets developers write the maintainable and reusable code without many overheads as compared to some other MVC libraries. Elm offers a different way of developing GUI in a functional reactive programming way. Developers do not directly deal with the traditional DOM APIs. Elm has standard library which provides tools to create and manipulate text, graphics etc. Node is an execution environment for JS outside the browser, and some libraries that can access the network and manipulate files. Express runs on top of node.js, and add formalized structure to build the backend for web applications. Meteor is a new framework that takes full-stack approach, and comes bundled with MongoDB.

idexcelAngularJS

Kendo UI is an end-to-end framework for application development based on HTML/Javascript, overlapping with AngularJS. Angular is completely open source, however Kendo UI is not, and only Core is open source. For complex projects, users may need Pro version. Kendo UI has power-ful built-in controls whereas Angular requires companion AngularUI/Mobile AngularUI for controls. Both Angular and Kendo use different approaches for MV, and data binding mechanisms. As compared to Angular, Kendo has strong Data support, even for complex data binding scenarios. Use Angular if you need 100% open source, and KendoUI for powerful controls. Coexistence is possible, however it may require fiddling around with the integra-tion issues.

CanJS - CanJS is an easy and flexible tool that allows devel-opers to easily integrate with other libraries, and they can use entirely different rendering engine if required. CanJS offers many features for large SPA projects. It includes two-way binding, in-template declarative binding, custom tags etc. However, it lacks community support, and its fate seems to be tied with just one company: bitovi.

Spine - Spine is a simple and lightweight framework with friendly documentation. 7k in size, Spine simplifies MVC and provides structure to Javascript code and features that help developers write better web applications. It is highly influenced by Backbone, and follows the similar model. However, a big flaw of Spine is its asynchronous UIs, mean-ing that the UIs should never block, which is quite unrealis-tic unless backend has something like operational transfor-mation.

Batman.js was created by Shopify, and is quite similar to Knockout. It provides good html attribute based UI binding system. The framework is tightly integrated with Node.ja and also has its own Node.js server. It is a very clean code-

7 P a g e

Reasons Web Developers Should Learn AngularJSAngularJS is fast gaining traction, improving the quality and efficiency, leading to fewer bugs and quickly delivering features in the applications. As per Google Trends, the popularity of AngularJS is exploding. We will explore Angu-larJS here to analyze its offerings, and decide if it is the right tool for your box.

1. XAML is an XML based declarative language to instanti-ate object graphs and set values. With XAML, it becomes much easier to layout complex UIs that change over time, and it also supports inheritance and bubble events. Angu-lar framework enables parallel workflows between differ-ent components.

2. In Angular World, data binding is quite easy and straight forward. There is no need to derive from the existing object, or declare the properties and dependencies. Devel-opers can just pass what they already have to Angular, it is that powerful.

3. AngularJS handles Dependency injection quite well. With the help of libraries such as RequireJS, developers can dynamically load JavaScript as and when required.

4. For testing, Angular allows apps to be divided into logical modules that are initialized separately, but can have dependencies on each other. This makes testing approach quite tactical as it only brings the modules that testers might be interested in.

5. Single Page Applications (SPAs) are not new, however these apps can grow very quickly with lots of dependen-cies on different services and modules. With the help of AngularJS, it becomes much easier to organize and use them as and when required. SPA fill a very specific need, and more functionalities are being moved to the web

idexcelAngularJS

where browser acts as a distributed computing node. SPA applications are quite responsive, and offer experience which feels almost similar to native app in the web. 6. Declarative UI has several advantages, and AngularJS allows developers to express UI declaratively. Structured UI makes the understanding and manipulation much easier for the designers who are not necessarily program-mers, and learning markup is easier than programming. By declaring UI and placing markup directly in HTML, presen-tation logic gets separated from the imperative logic. Declarative UI also reduces the side-effects when main-taining large systems by declaring binding at the source, and removes the need for hidden code that dictates the behavior of UI.

7. Angular provides extended markup that clarifies where data is being bound and to what it is being bound. The intent of UI is made further transparent by the additional tools like directives and filters.

8 P a g e

idexcelAngularJS

AngularJS makes it much easier to maintain dependen-cies, which can be very valuable feature for larger projects where it enables processes and workflows that empowers the companies to scale their teams.

Angular allows designers to add markup without break-ing the application mainly because it is easier to locate an element and perform tasks. The portions of the code can be rearranged easily.

Angular enable “Directives” that allow developers to create new HTML elements and attributes.

In AngularJS, the lifecycle of the applications begins with the compilation as Angular parses the DOM and collects all the directive references.

Angular provides end-to-end solutions for building web application, and not just one single piece in the overall puzzle.

As compared to other JavaScript frameworks, Angular-JS uses much less Javascript to perform same task, and in AngularJS cycles, the tasks are performed only when required.

Data Binding MVC Routing Testing

View Model Controllers Views Directives

Services Dependency Injection Validation

jqLite Templates History Factories

is a full-featured SPA Framework

Undoubtedly, each JS framework has its own set of advan-tages and disadvantages, however, their goal is one: to make the application development process easier and faster. The choice of any framework largely depends on the kind of required application, and personal preferences of the developers. End users do not have much patience during browsing, and page load time is crucial for any web site. Hence it is required to take all the steps to load the application as fast as possible. Framework size and time taken by the framework to boot-strap are the two main factors that affect the loading time of the application. Size of the framework is quite an important consideration as it adds to the overall size of the application. The GZipped size of Angular is 36kb. Other frameworks are not only bigger, but also have external dependencies that affect the performance, and tradeoff is usually between flexibility and features. The feature-rich and ambitious frameworks are usually larger is size, and difficult to integrate with others. Flexible frameworks are usually smaller in size, but require lot of coding to be done by developers. If developers can handle a slightly steep learning curve, Angular can be a good choice. Backbone on the other hand offers easy REST API data access and routing, but requires a lot of boilerplate code. People who

9 P a g e

like declarative html opt for Angular, and those who prefer using template engine choose Backbone, Ember or CanJS. For heavy DOM manipulation, use JQuery and Backbone. Angular can be used for heavily data driven apps. For developers, a strong community is also an important factor to choose any framework. Strong community means

idexcelAngularJS

more third-party modules, more questions answered, more tutorials and so on. As shown below, when compared with Ember and Backbone, Angular shows a much stronger community support as on August, 2014.

Metric AngularJS Backbone.js Ember.js

Stars on Github

Third-Party Modules

StackOverflow Questions

YouTube Results

GitHub Contributers

Chrome Extension Users

27.2k

800 ngmodules

49.5k

~75k

928

150k

18.8k

236 backplugs

15.9k

~16k

230

7k

11k

21 emberaddons

11.2k

~6k

393

38.3k

11 P a g e

idexcelAngularJS

knockout ember backbone angular spine yui3 agility dojo

Watchers Forks Open Issues

Google Trends can be used to know the growing popularity, and as per the statistics, Angular is gaining foothold in the market at a much faster pace.

Flip SideLike any other framework, Angular has its limitations as well. One of the biggest drawbacks of Angular is the side effects of the data binding. Framework monitors the markup for any changes in order to update the model, and if there are any third party plugins that modify the markup, it can lead to unexpected results.

Angular has a steep learning curve, and documentation can feel incomplete or cumbersome. The way Angular handles errors is also usually a cause of concern for the developers. It does not provide any useful information that can help debug the problem. Code review can help identify the mistake, and in worst cases, the browser console can be used to roughly gauge the cause of error.

AngularJS does not force developers to use its module system, and developers can end up with the files with lots of controllers and no segregation, making it quite difficult to navigate the file, and this huge file needs to be loaded for every page. The developers then need to refactor the code, split controllers into modules, set up dependencies correctly and use dependency injection. While using Angu-

lar, it makes more sense to plan the modules.

Also, many developers feel that they may learn and use AngularJS for developing single page applications; howev-er they would think twice before considering it for some-thing else as Angular brings in lots of accidental complexi-ties without added benefits. On the other hand, some feel that it solves more problems than it makes.

Angular is also criticized for the Directive API complexity, and Transclusion is a concept that confuses many develop-ers. Additionally, scope hierarchy uses prototypal inheri-tance, and this can be a very tough concept to grasp, espe-cially for developers from Oops background. View Layer of Angular makes extensive use of Angular Expressions, and this language is quite powerful, that puts the logic inside the template. This can make the applica-tion much harder to test. The codebase is not very modu-lar, and views are not modular enough too. Also, the Digest Cycle of Angular surprises the developers. If the page has lots of interactive elements, Angular can get painfully slow. Not having more than 2000 active bindings on the same page is usually a safe bet.

10

ConclusionAngularJS has been designed to build front-end of web applications easily. It saves considerably on the development time and reduces the number of defects. It creates abstraction between code, data and rendering by adhering to the MVC methodology. However, AngularJS is not the only option out there. To eliminate the need of major re-architecture, the key to build well controlled large single page web apps is to create reusable and well-encapsulated UI components. Examine your application’s goals: you want to add powerful features? You want to build something that exceeds people’s expectations? Or you want your application to be super simple. Take your time to learn the frameworks to understand how the pieces fit together.

P a g e

idexcelAngularJS

About the AuthorPonbharathi Bakthaduruvan works as a Technical Lead with Idexcel. He has over eight years’ experience in developing enterprise and rich internet applications using HTML5, CSS/CSS3, Adobe Flex and Java/J2EE technologies. He has exper-tise in software design, architecture, development, implementation and maintenance of enterprise applications and has delivered many successful projects . He has a deep knowledge of UI development using HTML5, CSS3, JavaScript, jQuery and developing enterprise level applications using Java, J2EE, Hibernate, Spring, JSP, Servlet, Adobe Flex and ActionScript.

About IdexcelIdexcel is an innovative provider of IT Products & Services focused on emerging technologies. We help world leading companies build efficiencies and stronger businesses. With more than 15 years into existence Idexcel’s main focus is client satisfaction and technology innovation. Our industry expertise and a global, collaborative workforce forms the backbone of our services. We offer high degree of skills in Enterprise Applications, Cloud Services, Data-warehousing, Big Data, Analytic, QA & Testing Services, IT consulting and Staffing. Idexcel product line includes: NDS, ERP, and Cync - A revolutionary credit monitoring application for the manufacturing and �nancial management.For more information log on to www.idexcel.com.

Global Head quarters459 Herndon Parkway Suite 11Herndon, VA 20170Tel: 703-230-2600Fax: 703-467-0218Email: inquiry@idexcel.com

India Operations“Crystal Plaza” 9, 10 ,11Bhuvanappa Layout, Hosur RoadBengaluru – 560 029KarnatakaTel: +91-80-2550 8830Email: inquiry@idexcel.com

© Copyright, Idexcel. All rights reserved. No part of this document may be reproduced, stored in a retrieval system, transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the express written permission from Idexcel. The information contained herein is subject to change without notice. All other trademarks mentioned herein are the property of their respective owners.

idexcelAngularJS