We recently re-designed the UpTop website using AngularJS as the front-end framework. And as enterprise leaders today struggle to make sense of the many options available within the modern web, we wanted to share our thoughts on why we decided to make this transition.
Very powerful community solutions exist for common problems encountered in modern web development like maintainability and scalability, but the trick is finding a client-slide framework that allows enterprise (or even the smallest startup) to focus on just solving business problems, while also considering basic engineering concepts like testable code, separation of concerns, MVC (Model-View-Controller), and so on.
As you can see from Google Trends below, AngularJS appears to be the prime candidate, sparking more interest from the development community than competing frameworks like Backbone, Ember, or Knockout.
But just like any other framework, there are Pros and Cons to consider. We made a list to help you decide if AngularJS is right for you.
- Making the switch to Angular can be gradual (and therefore cheaper). If your project is already using another framework (other than SPA) and you think it’d be too expensive to rewrite everything in Angular, you can embed Angular apps within different parts of your web pages; it’s really modular. This allows you to make the switch over time as opposed to all at once. It also allows you to test if Angular is right for your needs before investing a lot of time into a new framework.
- AngularJS testing is simple. It is ridiculously simple to unit test AngularJS apps, which also makes the app stable and easier to maintain over a longer period of time. This equates to less money spent on maintenance and also reassures you that your code will most likely not break on different devices and browsers.
- Automatically keeps your View and Model in sync. AngularJS comes with this great feature called two-way data binding, which is the automatic synchronization of data between the model and view components. In essence, this again lets developers write less boilerplate code. Moreover, it makes it easy for updating CRUD (Create, Read, Update, Delete) interfaces like articles or posts as Angular watches for changes in input fields automatically for you.
- Clean and clear user interface. AngularJS keeps DOM manipulation code inside something Angular calls directives and not in the view. This augments in generating a clean and clear user interface, which is exactly what you’d want for your end users.
- Learning curve. May be hard to grasp at first. This is mostly due to Angular’s Directive API, which is used to manipulate the DOM. This API is known to be offsetting for Angular newcomers. Developers will have to familiarize themselves with new terms like isolate scopes, transclusion, etc.
- Directives may be annoying for developers to use at times. jQuery or another DOM parsing framework in directives may be painful to use (need more tests) because of the way Angular compiles templates (see http://egghead.io/video/angularjs-angularelement/) . This is because Angular may not know of the changes from another framework and you will have to use Angular’s built-in $scope.$apply()method to let Angular know that bindings have been updated. This isn’t necessarily bad, but can be annoying at times for developers.
- Memory storage and performance may be an issue. Two-way data binding: We just mentioned this as a strength, but it comes with a trade-off. For supporting two-way data binding, AngularJS defines a digest cycle, which means Angular runs watchers for identifying changes through a loop. In order to keep models in sync, however, dirty checking is used. But dirty checking is quite expensive for two reasons:
- Memory – each object has two different copies in memory in order to perform a dirty check.
- Performance – on each digest cycle, a deep object comparison is made meaning equality checks over all of the data that the view depends on and this may slow down your application. This will probably be changed though, when ES6 (harmony) specs will be adopted by vendors, and AngularJS will implement observe for its syncing mechanism.
In short, AngularJS is backed by Google (so you know it’ll be around for a while), open-sourced where developers from all over the world contribute and have a say in the future of the project, and there is a huge community willing to help you if you ever get stuck. If your goal is to simplify both development and testing, then Angular is a must and we highly recommend it.
If you’re interested in hiring a developer or learning more about the framework, please check out our AngularJS Developers page.