How We Use It: AngularJS and Testomato

We like to share the technology we use at Testomato and introduce you to tools with which you might not be familiar. In today’s post, we’d like to give you a quick overview of AngularJS and explain how we use it here at Testomato.

AngularJS is an open-source JavaScript MVC framework by Google similar to Backbone.js and Ember.js, which helps to simplify web development by helping structure and applications (i.e. making the code more maintainable).

But we’re getting ahead of ourselves.

First, a few words on MVC…

MVC (Model-View-Controller) frameworks are designed to help developers deal with the “spaghetti code”, which often results from trying to build an application from scratch. These modern frameworks all follow some form of MVC pattern and encourage developers to write more organized code.

MVC is composed of 3 components:

Models refer to the data objects of your application. For example, in a to-do list application, a model would be the attributes for each item such as description and status.
Views are what are presented to the users of an application and how they interact with it (i.e. the user-interface). Using the same example from above, this means the items from a to-do list are nicely presented to users. Views are created using HTML, CSS, JavaScript, and often templates. They are able to observe the models, but not communicate with them.
Controllers are what control the communication between models and views. They handle user actions (e.g. clicks). So, when a model is changed, a controller will update the view. If a user marks a to-do item as finished, the controller will modify the model to mark the item as completed and change the view to reflect it.

JS MVC frameworks are usually used for building single-page applications that are heavy on viewing or manipulation of data in the browser.

So, what is AngularJS?

To quote their website, AngularJS was created to help compensate for the limitations of HTML.

“AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.”

Unlike other JavaScript libraries like jQuery, which primarily focus on DOM manipulation and update data based on that – AngularJS works completely opposite. You update the data, and the DOM is automatically updated for you.

It’s especially well-suited to building one-page apps, but can be used for other types of applications.

AngularJS doesn’t follow MVC in a traditional sense, but is instead, closer to MVVM (Model-View-ViewModel). This means your models can talk to ViewModel object using something called a $scope object, which is native to the Angular application and is designed to detect and broadcast changes to its state.

But as its team likes to stress, Angular is about flexibility and easy maintenance, not long discussions about trying to define its architectural pattern. As Igor Minar, so nicely put it:

” Having said, I’d rather see developers build kick-ass apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework – Model-View-Whatever. Where Whatever stands for “whatever works for you”.

Another point in its favor is that AngularJS was developed by Googlers, Miško Hevery and Adam Abrons (who has since left the project), in 2009. We feel it’s important to bear in mind that this framework was built and is maintained by Google.

This means that those using Angular have access to a large and open community, but also have access to extremely talented and skilled individuals. Additionally, it helps to get an idea the quality of the project and the long-term reliability of the framework.

For more information about AngularJS, we suggest visiting their h omepage or taking a look at their conceptual overview.

Why the Testomato Team likes AngularJS

We had several reasons for choosing AngularJS, besides the fact that it was a promising framework at the time (which has proved true over time).

Our main requirement was to make sure that we chose a framework that would be easy to integrate with our current codebase. We needed to be able to rewrite Testomato’s most dynamic pages without having to do it all at once, and we needed to do it without breaking anything that was running correctly.

We chose Angular because it’s a small library with zero dependencies and works with plain JavaScript objects. Simply put, anywhere JavaScript can run – Angular can too. As a result, integrating with Testomato’s deployment process was an essentially painless experience.

Another big plus is that any code written in AngularJS is easily testable (unlike our previous code). It was created with testability in mind, so all the code written in Angular is testable from end-to-end. So now, our team is able to test Testomato automatically in the browser for every commit/release.

However, probably the coolest, and equally as important, feature for us was Angular’s two-way data binding. This refers to the ability to use directives to bind changes to an object’s properties to changes in the UI, and vice versa. To learn more about how to use two-way binding, check out this short tutorial.

How we use AngularJS for Testomato

Testomato uses AngularJS on the client side of our project pages:

Project results
Project settings

These are all built completely on AngularJS. In the future, we plan to use it when we add more features, such as a more dynamic history log. We are also planning to animate transitions on the page, a new feature in the new AngularJS 1.2 Version.