Software Engineer, Brett Billington talks about Angular Js

The Future of Angular Js

Brett Billington -  15 Nov, 2016

 

What is AngularJS?

 There's been a buzz over AngularJS the last couple of years. It has modest origins, being developed in 2009 by Misko Hevery and Adam Abrons. Through the years it saw rapid progress, having grown from a team of two people to being maintained by Google.

AngularJS is an open source JavaScript framework with the ability to extend HTML functionality. Not only does its smart data binding and dependency injection cut down on the amount of unnecessary code that the user would have to write, but it is simple enough to learn for anyone with minimum JavaScript/HTML knowledge. 

Our most modern iteration of our online business travel platform, Travel Cloud 4 (TC4) was built from the ground-up using AngularJS, and it's given us the opportunity to see just how much the framework has evolved and continues to evolve even now. Being a relatively new piece of technology, it lacks some of the formal standards older technologies possess, but this isn't necessarily a bad thing: it's given us the opportunity to experiment into what works best for TC4 through researching into the techniques other developers use and picking out the better ideas. We've also had the opportunity to implement other technologies written in AngularJS, such as:

  • UI Bootstrap – A set of AngularJS directives based on Bootstrap's markup and CSS. It offers dropdowns, buttons, collapsable elements and more. This one is used everywhere!
  • angular-translate – A module to handle pluralisation of our translation strings.
  • Angular Google Maps – AngularJS directives that we've used for integrating Google Maps into Property Directory and hotel searching.
  • df-tab-menu – an Angular JS directive used for our responsive tabs seen in many places across TC4.

Perhaps the most talked about topic when it comes to AngularJS, however, is the approach of Angular 2.0. This isn't just a major release, but could be considered a rewrite to many familiar terms to the users of Angular 1.X. In fact, it was different enough that its initial announcement was met with some controversy over the decision to introduce so many breaking changes.

 

Angular 1.X and 2.0 – The Differences

The key benefits being highlighted for Angular JS 2.0 tend to be:

  • It's faster
  • It's simpler
  • It's mobile-focused

 

That said, many updated technologies tend to list speed at the forefront of their advantages, so for a better look at the differences, it's easier to just compare what's changed from 1.X. Note that this assumes some basic familiarity with AngularJS – there are many quick guides available to explain the basics!

Components

Controllers and $scope are gone from Angular 2.0! Instead, directives with templates are used, referring to as a component.

An example of a component:

import {Component} from 'angular2/angular2'; @Component({   

selector: 'hello-world'}) @View({   

templateUrl: './helloworld.html'}) export class HelloWorld { }

 

 This component is called within HTML, using the <hello-world> tag. In this case, it would add the 'helloworld.html' template to the HTML where it was included. 

If this was done as an Angular 1.X directive, it would instead look something like this: 

angular.module('hello-world')

    .controller('HelloWorld', function () {}

);

 

Not only is the structure different, but the syntax too!

Following on from this, $scope is gone as well, since properties are now bound to components instead.

 Angular 2.0 example:

import {Component} from 'angular2/angular2';

 @Component({

    selector: 'hello-world'

})

 @View({

    templateUrl: './helloworld.html'

})

 export class HelloWorld {

    constructor() {

        this.title = 'Hello World!';

    }

}

 

Angular 1.X example:

angular.module('hello-world')

    .controller('HelloWorld', function ($scope) {

        $scope.title = 'Hello World!';

    }

);

 

Performance

Two-way bindings are gone from Angular 2.0. This was a popular feature of Angular 1.X, though with all the convenience it brought, it also came with the potential for performance issues in larger applications when many two-way bindings (and the resulting watchers) were present everywhere. Angular 1.3 made some steps to solve this via the introduction of one-time bindings, which cease watching data as soon as it's initialised.

In its place, Angular 2.0 boasts immutable data structures and ultra fast change detection While some have criticised the lack of two-way bindings, it can be done a different way in Angular 2.0, so it isn't completely out of the question.

Events

The syntax for events has changed as much as everything else, though they hold similarity to Angular 1.X in that they call user-defined methods, though this time in the component rather than the controller. 

This is an Angular 2.0 example of a button click:

 

<button (click)=”confirm()”>Confirm</button>

 

While this is an Angular 1.X example:

 

<button data-ng-click=”confirm()”>Confirm</button>

 

The Future

 

With the beta of Angular 2.0 already out and the release getting closer, there has been some discussion over the feasibility of upgrading the version of Angular that TC4 uses to 2.0 as well. The increased performance, simpler syntax, lazy loading (and more) are all tempting benefits to keeping with the latest version of Angular. 

Most interestingly on this topic, Angular 2.0 has been designed so that it will run at the same time as Angular 1.X, allowing an incremental upgrade rather than the whole thing having to be changed in one go.

To their credit, the Google Angular team has been open  about their methods for minimizing the work of porting between the two versions, and we at Click Travel will be watching closely how Angular 2.0 is received at its release and how we can stay up-to-date with this modern framework.

Subscribe to this blog

Use of this website and/or subscribing to this blog constitutes acceptance of the travel.cloud Privacy Policy.

Comments