AngularJS: A Smart Decision for Increased Productivity and Business Agility

Email this to someoneShare on Google+0Share on Facebook8Tweet about this on Twitter2Share on LinkedIn8Share on Reddit0Share on TumblrDigg thisPin on Pinterest0
AngularJS: A Smart Decision for Increased Productivity and Business Agility     By Rohan Jyoti, Software Engineer 1. Introduction AngularJS is a JavaScript framework that aims to make JavaScript second nature to HTML. It enables developers creating web applications to feel right at home with proper coding principles and design. Utilizing an efficient MVC design pattern and two-way data binding, AngularJS allows us to reduce direct DOM manipulation on the client side as well as reduce server load. Imagine an engine; an engine consists of multiple moving parts, countless nuts and bolts, and precision logic assembled together to make a purposeful machine. Realize that you don’t build an engine by first laying down the foundation and assembling it only to realize that now you must go back and "grab" bits here and there to make it work properly... So why-oh-why would you create an enterprise-level web application in such a hacky, grab-this, grab-that after-the-fact manner? The day and age of Web Applications with plain JavaScript and JQuery DOM manipulation driving business logic has got to go. AngularJS (and other JavaScript frameworks alike) allows us to build said application with the logic integrated from the ground-up; thus creating a well organized, easy to extend/reuse, and most importantly: readable code implemented in a relatively object oriented fashion (a great plus for Java Web Application Developers).
2. What do we currently work with at ZoomInfo? Why did we try AngularJS?
Here at ZoomInfo, the technology stack for web applications is broad. Based on Java EE, Spring.io’s Spring framework, and Apache Struts, adding unorganized JQuery/JavaScript on the frontend was a quick way to a world of disarray and a lot of headaches. In addition, from a business perspective, it leads to wasted time understanding/tracing the code, wasted space (as the code is barely reusable), and the fact that it is so cumbersome to test. Now I know what you may be thinking: why not just create a company method of doing things, i.e. a ZoomInfo way of organizing and structuring code to a clean, extensible, Object-Oriented like JQuery/JavaScript code base? Because that's widely inefficient, waste of time and resources, and eventually bound to fail. Why? Plain JavaScript and JQuery is an open playground—there’s no structure. Consequently, enforcing such a methodology and expecting it to work is highly presumptuous and quite foolish. The solution is to use a framework to provide said structure and enforcement. And yes, you may argue that frameworks potentially limit you and "lock-you-down"; however, that particular viewpoint is reserved for the uninitiated to the beauty and simplicity frameworks like AngularJS provide. Our main objective was the following: Create a JavaScript code base that is capable of being the foundation of an extensible, well structured, and easy to read web application. In addition, it should be compatible with the existing legacy code base, especially JQuery Datatables. We flirted with several possibilities, ranging from BackboneJS to Ember to AngularJS. In the end, we decided to pick AngularJS because it provided a better structure that better represented our needs.
3. Implementation
Overall, documentation/tutorials on AngularJS is limited; however, the following were essential to developing a solid foundation as a beginner in the framework: http://shop.oreilly.com/product/0636920028055.do https://egghead.io/ http://www.thinkster.io/angularjs/GtaQ0oMGIl http://docs.angularjs.org/api

We’ll start with a very brief, high-level explanation of the listed concept.

1. Data-Binding

AngularJS' two-way data-binding model is one of the things that elevate the framework to whole another level. In the olden days, when a particular data point in the model changes, you would have to grab the DOM element and then push the change. Conversely, if there were a change in the view, again we would have to set up a listener to grab the DOM element and pull the change. AngularJS does away with this archaic methodology by creating a two-way binding system that automatically synchronizes the model and the view. Not only does this allow for less code, but also allows easier management of the variable throughout the scope of the application.

Here is a simple example of data binding.

View Plunkr

Notice the use of ng-model to bind the view to the variable in the model and ng-click to bind the view to the function in the model.

2. Controllers

AngularJS Docs defines a Controller as "a JavaScript constructor function that is used to augment the Angular scope." In layman terms, a controller is a like a private class that houses the business logic (i.e. functions, variables, etc.). In the above Plunkr example, you can see the Controller defined as mCntrl within the myApp module. All the relevant variables and functions are defined within this scope.

3. Directives

An AngularJS Directive is another feature that distinguishes Angular from the rest. Directives are an awesome way to add custom behavior to DOM elements that gets attached at compile-time so that it breathes and lives with the DOM itself.

Below is a simple example of multiple kinds of directive. The first directive shows how a directive can house snippets of html code you may want use in many places. The other two directives show how you can link to a controller function.

View Plunkr

4. Filters

Simply put, filters are nothing but way to quickly format angular expressions pushed to the view. Look at the following example:

View Plunkr

See how easy they are?

5. Services/Factories/Providers and Dependency Injection

AngularJS services/factories/providers are singleton objects that serve as the foundation for sharing code across the app. Services are what make AngularJS excel in structure and code reusability. Services are wired through dependency injection.

Below is a simple example of a factory object that allows sharing within two different controllers.

View Plunkr

For a more detailed explanation on how services differ from factories and providers: http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory

4. Advanced Example (Coming Soon)

This portion is pending. It will show an advanced example putting everything together in a full-blown application called Advanced Search. It consists of AngularUI: tabs, typeahead, collapse JQuery: Datatables (client-side and server-side pagination), Datepicker [[Will put up AngularBase which houses the generics for Datatables, Datepicker, Typeahead…]] 5. Problems Encountered and Inefficiencies As is any experience with new technology, there were several problems and frustrations. Scrambling through the docs and perusing StackOverflow, we collected some of the biggest inefficiencies and relieved headaches involved with AngularJS. For the most part, AngularJS is extremely efficient. However, things tend to go downhill when an app has more than 2000 data-bindings or when you use ng-repeat on large number of elements (rule of thumb: if there are more than 100 elements, use some JQuery table alternative)   Next major problem was how to efficiently and properly share data between controllers (and apps). The two main options were using a root scope or using Services. After a whole lot of research, the best way turned out to be Services. Simply put, the root scope way (similar to the plain JavaScript and JQuery way) is poor practice; just like having global variables in Java is poor practice. Next major headache came when compiling the entire app with the rest of code base. Previously, we used the YUI Compressor to minify and compile both JavaScript and CSS. However, YUI Compressor cannot minify AngularJS because Angular is ECMA Script 5 whereas YUI can only really do ECMA Script 3. Solution to this was to use Closure Compiler (maven port of the Google Closure Compiler) to minify and compile all the JavaScript code and YUI for CSS. Next: script ordering matters. Because Datatables and Datepicker need JQuery, JQuery must be included before AngularJS. Otherwise AngularJS will use its own JQuery Lite, which doesn’t have everything JQuery Datatables needs, causing it look funky. Another issue with AngularJS + Datatables was linking the logic in fnCreatedRow() to Angular objects. Realize that JQuery Datatables will assemble and inject the row after the DOM is loaded; therefore, by default Angular would have no idea about it. The solution was to tell AngularJS to compile it in at runtime by using: $compile(nRow)($scope); Another issue resided in testing. The conventional method at ZoomInfo of testing code written in plain JavaScript/JQuery was Selenium. The existing tests relied on element IDs; however, AngularJS does away with the need of using IDs. I could obviously go in an manually add IDs to all my elements; but, realize that the IDs would not be used at all within the App – only in testing, which makes it pointless to include in the code. So we were left with the following options:
  1. add IDs to all the elements to facilitate testing
  2. use xpaths
Both of these options required a lot of maintenance, which is a waste of time and hinders business agility. Ultimately, the best solution was to use another framework for testing such as Jasmine, but that’s best left for another day. 5. Conclusion Overall, the transition to using AngularJS in our apps was frustrating at times, but in the end was worth it. We were able to implement and streamline the entire process of creating new web apps utilizing AngularJS with much greater ease than before. Albeit still a learning process, the beauty and simplicity that AngularJS provides for developing web application is thus far unparalleled. Still in my first year out of college, the opportunity to not only play around with new technology but, to be able to implement it in a production environment as well was incredible.
Email this to someoneShare on Google+0Share on Facebook8Tweet about this on Twitter2Share on LinkedIn8Share on Reddit0Share on TumblrDigg thisPin on Pinterest0

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>