At XTIVIA, we have been building enterprise AngularJS applications for more than a couple of years now, particularly on top of Liferay. We think AngularJS 1.x is production ready. This, in fact, gave birth to our homegrown Liferay-based REST services framework. Currently we have a very smooth development process with AngularJS. However, we did not get here overnight. Along our journey with AngularJS, we learned there are few things that you need to sort out before venturing into the enterprise software space.
Here are four prerequisites for enterprise AngularJS applications that everyone should address. This will help achieve successful, high quality, and timely enterprise AngularJS applications.
Select a style guide
We know that AngularJS is an opinionated framework. However, one thing that is not very well documented is the way to structure the code base. Unlike frameworks like Rails that use conventions heavily, AngularJS doesn’t have much in terms of well-defined conventions.
Here’s where a style guide will come handy. How do you split controllers? Where do you put directives? How would you reuse services? How about libraries? A lot questions pop up as you start implementing enterprise AngularJS applications. Having a convention on how to go about doing this will ensure consistency across the board. This will also make sure code reviews go very smoothly.
We personally have had a lot of success using John Papa’s AngularJS Style Guide.
Understand the current ecosystem
Enterprises love Java for its ecosystem. Similarly, jQuery is now the defacto library for basic Web 2.0 applications. One of the main reasons for this is its rich plugin ecosystem. Though AngularJS has a lot of plugins, there is no easily accessible central repository for AngularJS plugins and libraries. This results in a lot of teams trying to reinvent the wheel.
For example, in one of my earlier gigs with an old version of AngularJS, we had hand rolled an AngularJS-Bootstrap integration. We never bothered keeping tabs on the community. We eventually realized that there was an officially supported integration available and that it was in fact doing a lot more than our implementation. We keep running into this situation over and over again.
Our suggestion, especially for enterprise AngularJS applications, is to starting with a widget library collection. This includes everything from basic widgets like filtering, sorting, pagination, look ahead, trees, and drag-drop widgets, all the way through to framework integration like Angular-Bootstrap (which is quite handy on Liferay). This collection should be documented up front and the focus should be completely towards leveraging the ecosystem rather than reinventing the wheel.
Understand Scopes, Promises and Events
AngularJS scopes is one of those concepts which seem straightforward on the surface but can prove frustrating when debugging actual issues. Personally, I am quite comfortable with the idea and know the documentation well enough. Still, when in doubt I resort to writing a quick and dirty standalone page with a simplified version of what I want to achieve. This helps me to make sure I have things right. Spend enough time to understand scopes because you will definitely have to deal with them at some point!
Rich user experience is typical of enterprise AngularJS applications. This invariably translates to AJAX-heavy applications. To deal with the asynchronous nature of such apps, AngularJS leverages the idea of Q promises. Without a good understanding of how promises work, even using and debugging fundamental libraries like angular-ui-router becomes tricky. Do spend some time understanding the idea of promise resolution.
AngularJS events are quite powerful in helping take care of cross cutting concerns. It also becomes the way to help different controllers and directives collaborate with each other. Events and the associated scopes are something to keep in mind to help build more modularized AngularJS code.
Testing with Karma
It’s common to think of testing as an after the fact process that you need to do once everything is implemented. However, building enterprise AngularJS applications without testing is almost always disastrous. The problem with postponing unit testing is that you will never get to testing in time. One common hindrance to testing JavaScript is the setup cost. In the past, writing tests for JavaScript required one to write production code in a certain way, write mock HTML files and figure out how to make the tests and test infrastructure a part of the standard build process.
Karma, along with Jasmine, has completely changed this situation. Since AngularJS is an MVC framework, the business logic is decoupled from the views. This means it is now possible to write pure unit tests without having fake HTML that needs to be loaded for testing. Also, the idea of Dependency Injection (DI) is very powerful. The entire idea of DI is going towards modular, testable code. Since it’s one of the design foundations for AngularJS, most code we end up writing becomes inherently testable.
With this kind of infrastructure in place, not writing tests seems like a disservice! Understanding the testing landscape in AngularJS is a very important prerequisite.
After delivering multiple projects using AngularJS, we think these are some important prerequisites that one needs to take care of before venturing into building enterprise software built on AngularJS.