A few months ago I started building things in my free time using AngularJS and it has been an incredibly rewarding and productive journey. In my day job, I spend most of my time building single page applications using either Dojo or jQuery. This article is my attempt to make an objective argument that AngularJS is ready for use in building enterprise software. To accomplish this, I am first going to give a brief history of Angular, then dive into what is important to enterprises by talking about:
- Who is Behind AngularJS?
- How can I Hire and Educate Developers?
- What Kind of Browser Support does AngularJS have?
- How does Google protect AngularJS' Intellectual Property?
- What GUI Toolkits work with AngularJS?
- How can I handle internationalization and accessibility in Angular?
- How can I test my AngularJS applications?
But, for various reasons, I think we can do better than Backbone.js and Ember.js for building large scale, enterprise applications. That better is AngularJS.
But the “Why Angular is Better” is a post for another day. Today I simply want to convince you, as an enterprise, that Angular is simply as viable as Dojo for building large scale, single page, enterprise applications.
The History of AngularJS
AngularJS was created, as a side project, in 2009 by two developers, Misko Hevery and Adam Abrons. The two originally envisioned their project, GetAngular, to be an end-to-end tool that allowed web designers to interact with both the frontend and the backend.
Hevery eventually began working on a project at Google called Google Feedback. Hevery and 2 other developers wrote 17,000 lines of code over the period of 6 months for Google Feedback. However, as the code size increased, Hevery began to grow frustrated with how difficult it was to test and modify the code the team had written.
So Hevery made the bet with his manager that he could rewrite the entire application using his side GetAngular project in two weeks. Hevery lost the bet. Instead of 2 weeks it took him 3 weeks to rewrite the entire application, but he was able to cut the application from 17,000 lines to 1,500 lines. (For a talk from Misko Hevery about the full history up until January 2014, see his keynote from ngConf 2014).
Because of Hevery's success his manager took notice, and things began to accelerate from there.
Who is Behind AngularJS?
Google. Well, in a word, anyway.
One of the original creators, Adam Abrons stopped working on AngularJS but Misko Hevery and his manager, Brad Green, spun the original GetAngular project into a new project, named it AngularJS, and built a team to create an maintain it within Google.
One of AngularJS' first big wins internally occurred when the company DoubleClick was acquired by Google and they started rewriting part of their application using AngularJS. Because of DoubleClick's initial success, Google seems to have invested even more resources into Angular and has blessed AngularJS for internal and external product usage.
Because of this, the Angular team inside Google has grown rapidly.
Take a look at the list of the top 10 contributors to AngularJS:
|Pete Bacon Darwin||01/23/2014||135|
|Ken Sheedlo||Google (Intern)||09/27/2013||29|
The first thing you'll notice is that they are all Googlers. This might make you uneasy, and to be sure, relying on a framework that is entirely controlled by a single entity can be a little risky from a business perspective.
At second glance, though, there are many positives about the AngularJS team that can be learned from the above table. For one, having one commercial entity control the framework can sometimes be a positive because it completely avoids infighting between political factions. In the open source world, this infighting can be public and nasty, detracting for the team's purpose of building great software. In fact, forks of open source software can often be bad for consumers, especially in the short term.
There is one important fact that the above table hides, though. Many of the top contributors did not start out as Googler's, but were hired by Google after they started actively contributing to AngularJS. This tells you that Google is serious about investing in AngularJS.
What about non-Google contributors? Surely they exist, right?
Another odd thing you might notice about the above table is that the co-creator Misko Hevery and one of the earlier contributors Chirayu Krishnappa haven't made many recent commits compared to others on the Angular team. What gives? (Ken Sheedlo, as an intern, has probably returned to school and that explains why he has no recent commits.)
How Can I Educate & Hire Developers?
One of the great things about AngularJS, however, is the availability of third party video tutorials and lessons. You can learn an incredible amount about Angular by watching the short (and mostly free) videos by John Lindquist at his egghead.io training site. This site is full of 3-5 minutes videos introducing AngularJS topics using real code. Another great video introduction to Angular is Dan Wahlin's AngularJS in 60ish Minutes . If reading is more of your thing, a great introduction to AngularJS is an article by Todd Motto entitled “Ultimate Guide to Leraning AngularJS in One Day."
More recently, AngularJS had its first conference, ngConf. This conference was incredible, and even more so because it was not put on by the core AngularJS team, but instead a few independent developers and companies in Utah. The best thing about this conference is that all the videos are posted on YouTube and can be found at http://www.youtube.com/user/ngconfvideos. My two favorite talks from the conference were Dave Smith's “Deep Dive into Custom Directives" and Vojta Jina's talk on Dependency Injection
What Browsers Does AngularJS Support?
Angular claims to support “Class A Browsers.” As of Angular 1.2, the Angular team considers the following browsers “Class A”:
However, starting with AngularJS 1.3, the Angular team is dropping support for IE8 because Google has stated that it does not have a need to support IE8. The Angular team has asked the community if there are any community members willing to step up and support IE8. The AngularJS core team seems willing to help facilitate community development of IE8 support, but are just not interested in maintaining it on their own.
What About AngularJS' Intellectual Property?
Intellectual property concerns are very important for enterprise software development, and the AngularJS team (along with Google) takes steps to protect their intellectual property and the intellectual property of the contributions they receive.
AngularJS is licensed under the MIT license.
AngularJS also makes all contributors sign an contributors license agreement (CLA). Google also accepts signed CLAs on behalf of a company. To make code contributions to AngularJS you or your company MUST have a signed CLA on file with Google, otherwise your contribution will be rejected.
Because of the MIT license and the strict CLA requirement, AngularJS is a good fit for enterprise usage, but you should probably consult your intellectual property lawyer for more details.
What GUI Toolkits are available for AngularJS?
If you are coming from a Dojo background, you have certainly been spoiled by the Dijit GUI toolkit. It's the best out there when it comes to building HTML forms and widgets. Nothing else even comes close.
With that said, there are a couple of alternatives that work great with AngularJS.
The first, and most popular is angular-ui which provides a number of directives and modules that are pre-built and provide additional UI functionality. Their most popular widgets are provided by the angular-ui/bootstrap project which is an encapsulation of Twitter's Bootstrap widgets to Angular.
There are two major problems with angular-ui/bootstrap. The first is that the directives are not very accessible. Most of the widgets are missing wai-aria tags and you cannot tab between widgets. When building an application that is Section 508 compliant, or just accessible in general, angular-ui/bootstrap falls pretty short. The second issue is that Twitter's bootstrap does not support RTL locales. This feature has been planned for bootstrap for a long period of time, but they keep pushing this feature back. The core developers have indicated that they plan to include RTL support in the next version of Bootstrap, but this has been said before.
If you're looking to go the commercial route, Kendo UI also has bindings for Angular that support RTL and seem to be more accessible than the angular-ui/bootstrap project. Another commercial option is wijmo, which provides a variety of UI widgets for a variety of UI frameworks, including Angular.
How Does AngularJS Handle Internationalization and Accessibility?
Out of the box, Angular comes with several filters that provide basic internationalization and localization features. These filters are the datetime, number, and currency. These filters provide the i18n features as their name suggests.
AngularJS also has a $locale service which allows you to detect the browsers locale and serve content according. This makes it incredibly easy to roll your own translation service for applications that need to support multiple languages. If you'd much rather use translations provided by well tested open source , a project called angular-translate is the preferred method of translating strings in AngularJS. Most details about using angular-translate can be found on angular-translate's github page.
Nothing about core AngularJS makes AngularJS inherently inaccessible. However, most of your accessibilities issues are going to come as a result of the GUI toolkit you decide to use. Since no non-commerical GUI toolkit that works well with Angular is accessible (as mentioned in the GUI toolkit section), your best bet is to roll your own if you have strict accessibility requirements. Since AngularJS allows you to create easily tested and reusable DOM manipulating modules, called directives, rolling your own accessible widgets is not as bad as it first may seem.
This is probably the biggest area improvement for the AngularJS team if they are looking for more widespread enterprise adoption.
How Can I Test My AngularJS Code?
Since one of the major pain points leading to the creation of AngularJS, as we know it today, was the inability to create good tests, it is no surprise that AngularJS takes testing very seriously.
The AngularJS team has also released a number of tools to make testing AngularJS apps easier. One that I find really interesting is a Google Chrome plugin called Batarang. Batarang integrates with the Chrome developer tools and provides all kinds of interesting interesting insights into your AngularJS application. With Batarang you can see how your application scopes are nested, how well your application performs, and a dependencies graph between your modules. These three features makes Batarang a great tool for working with AngularJS and understanding how your application code works together. Batarang is available here.
End to End(e2e) testing is also a focus of AngularJS. The Angular team has created an e2e tool called Protractor which uses the WebDriver API, much like Selenium does in the Java world. Much like AngularJS's unit testing guide, the AngularJS team has published a good introduction to e2e testing of AngularJS applications. You can read that guide here.
AngularJS is a great frontend framework for enterprise development. Its focus on testability and code quality really set it apart from other frameworks. It's not without some minor problems, however. If you do not mind rolling your own widget library and are willing to do a little bit more work to make sure your site is fully accessible, then AngularJS might be a perfect fit for your enterprise.