When we started planning the front end for SHIFT, the first question everyone asked was, “what framework should we use?” It was agreed upon early on that we wanted a single-page app built on the same API that we would be providing to third party developers. We wanted a solid front end framework to help us manage a large single-page app. Backbone seemed like the obvious choice because it was lightweight, easy to use, and it had a huge community. However, after doing a few prototyping exercises, we were impressed with the development speed we were achieving with AngularJS. Ultimately we were so impressed that we dove head first into AngularJS, and these are some of the things we found.
What We Liked
Two-Way Data Binding
Dependency Injection and Testing
Using a system called dependency injection, AngularJS provides an easy way to keep track of dependencies. Whenever you create a new AngularJS component, you can have it request each of the services it relies on, and AngularJS will resolve those dependencies at run time. Having AngularJS resolve dependencies for you has an added benefit when you are testing; you can easily replace components, such as the service that does HTTP requests, with a mock service that provides fake data you specify in the test.
Directives: Extending HTML
AngularJS’s built-in HTML extensions, or “directives,” provide a lot of power right out of the box. One of the most exciting things about AngularJS is that it gives you access to the same tools the framework’s authors are using to create the built-in directives. With AngularJS directives you can create new elements and attributes that do almost anything you can think of, and create a sort of DSL (Doman Specific Language) out of HTML to describe your applications. For a more in-depth look into how to create your own directives, check out this developer guide.
When you have an app running and you are working with your favorite browser’s developer console, you may want to inspect a particular part of your application to see what’s going on at runtime. AngularJS provides some great tools for inspecting the DOM elements to see what data is bound to them and where it is coming from. They also have a great Chrome extension that provides even more debugging tools.
What to Watch Out For
The Model Layer
AngularJS doesn’t really provide a solution for managing models. You can use the optional ngResource module, which provides a simple REST interface for grabbing models, but it doesn’t really help you manage models once you get the data. The downside is obviously that you are going to have to figure out how the model layer should work on your own. The upside is flexibility; you can use the model layer of any framework you want and AngularJS won’t care. For SHIFT we built our own data store and model system that has served us pretty well. For our next project we are experimenting with Backbone models and collections, and the results so far have been pretty encouraging.
AngularJS adds more “magic” to the process than other lightweight frameworks such as Backbone. Because of that, it can be easy not to notice how certain patterns may affect the performance of your application. AngularJS makes it very easy, for example, to bind the result of a certain function to the DOM, and have AngularJS update the DOM whenever the result changes. What you might not realize though, is that AngularJS will update this value every time someone interacts with the page. Making sure that your application performs the way you want will be a little less straightforward, because you need to have some understanding of how AngularJS works internally to know how your code will affect performance.
“Directives are Hard”
Directives are powerful, but sometimes writing directives is not intuitive. AngularJS documents almost everything you can do with directives on their website, but examples are not always sufficient. We found many times that the only way we could learn how to use a particular feature when creating directives was to read AngularJS’s source code. Improved documentation could really alleviate this issue, and AngularJS has recently released some videos on their blog that do a much better job of explaining directives.
Documentation is a problem in general with AngularJS. The most commonly used features are very well documented but some concepts like directives, providers, and some lower-level components are not very well documented. This will likely improve as the framework matures. Since we started working with AngularJS, their team has posted a lot of useful videos from their monthly meetups on their blog, explaining such topics as testing and directives in a lot of detail.
AngularJS provides a lot of powerful tools for building applications quickly. Within a couple of months we finished an MVP for our product, and had a great foundation on which to keep building. The more we learned about AngularJS the more it helped us out, and it has been a great experience overall.