Why Angular: The UpTop website redesign

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.

why angular - angularjs google search trend

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.

PROS

  • Faster and smoother user experience. AngularJS is a Single Page (SPA) meta-framework, which means that the outer shell of the app, CSS and JavaScript only load with the initial page load. For example, our top navigation and footer doesn’t  re-load from page to page, nor does the user have to re-download any CSS or JavaScript files from page to page. Angular just replaces the body content as you navigate through the app. This results in a faster and smoother user experience.
  • 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.
  • Cleaner (and less) code make it easier to maintain. An AngularJS application will require fewer lines of code to complete a task than a pure JavaScript solution such as jQuery would. When compared to other frameworks, you will still find yourself writing less boilerplate, and cleaner code, as it moves your logic into reusable components and out of your view. This means less code for the client to download, faster page load times (something particularly great for mobile users), and better maintainability for the life of your project.
  • It’s simple to migrate to and from AngularJS. AngularJS applications can be styled using CSS and HTML independent of their business logical and functionality. That is, it is completely possible to change the entire layout and design of an application without touching a single line of JavaScript. This is great if you are switching to Angular or the decision is made to abandon Angular and try an alternative.
  • 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.

CONS

  • 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.
  • SEO compatibility concerns cause you to take extra steps for optimization. If you are not creating an internal application like a BI dashboard or intranet site, but using AngularJS for the World Wide Web (like our UpTop website), SEO may be a concern. This is because Search Engine (or even social media) robots do not execute JavaScript when trying to crawl your page. As Angular is JavaScript, this is bad because dynamic content generated by Angular won’t show up to a robot and your website won’t be properly indexed by Google. Therefore, you won’t show up in search results. Luckily, it is fairly easy to make AngularJS SEO-friendly by pre-rendering your HTML with PhantomJS and redirecting robots to your HTML snapshots.
  • 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.