Angular 2: An Overview

Angular 2 is the upcoming all-new Single-Page Web Application (SPA) framework from Google. It’s the successor to the well-known AngularJS, which was first published in 2009.

Do you remember? In 2009, Windows 7 was released, which included Internet Explorer 8 as the default browser. The work on HTML5 just started. And the iPad wasn’t even on the market. Since then, the world and the web have changed a lot: Mobile internet usage surpassed desktop usage. Fully-fledged business applications are built using HTML5. And web technologies are on par with their native counterparts in terms of functionality and performance. Angular 2 wants to address these changes by being:

• easier to learn
• flexible
• fast
• ready for mobile

And here’s how:

Learning Curve

AngularJS has an infamous learning curve. Many different concepts led to confusion, including but not limited to controllers, providers, factories, constants, directives, services, scopes, filters, modules and more.

The API also isn’t that intuitive. If you want to bring a simple <greeting> element to life with some data binding in it, this is what you need to do in AngularJS:

function GreetingController($scope) {
    this.message = 'Hi!';
}

app.module.directive('greeting', function () {
    return {
        controller: GreetingController,
        controllerAs: 'greeting',
        bindToController: true,
        restrict: 'E',
        template: '{{greeting.message}}'
    };
});

Controller, scope and directive: Three concepts at one swoop. In addition, the word “greeting” seems to be all over the place. And there’s this magic string “E.”

In Angular 2, there are two major concepts: Services and directives. Services are non-UI-bound reusable pieces of software, whereas directives are UI-bound. There are three different types of directives:

• Components: Directives with a template (i.e. a “new” HTML element)
• Attribute directives: Change the behavior or appearance of a DOM element
• Structural directives: Add or remove DOM elements

Here’s how you can achieve the same effect from above using Angular 2 using one single concept, the component:

import {Component} from 'angular2/core';

@Component({
    selector: 'greeting',
    template: '{{message}}'
})
export class GreetingComponent {
    public message = 'Hi!';
}

Way cleaner, isn’t it? Well, that’s also because we use a different language here. Which brings us to the next point.

Flexibility

As you might have noticed, AngularJS was renamed Angular, dropping the JS suffix. This is due to the multi-language support of Angular 2. While the framework itself is mostly written in TypeScript, you can use one of the following languages to write apps built on Angular 2:

• TypeScript
• JavaScript
• Dart

For JavaScript, you can choose between ECMAScript 5 and ECMAScript 6 (also known as ES 2015). And of course, you can use other languages that transpile to JavaScript, such as CoffeeScript.

TypeScript is a superset of JavaScript which adds support for some language features Java and .NET developers were missing, such as static typing or access modifiers. Because of this, TypeScript has to be transpiled to JavaScript first before it can be executed by a browser.

You might ask: Wait, TypeScript? That’s this language from Microsoft, isn’t it? And Google is writing Angular 2 using TypeScript? Yes, that’s true. Microsoft even extended TypeScript especially for Angular 2 by adding annotation support to the language (e.g. @Component). This marks a completely new level of cooperation and demonstrates what open-source software is capable of.

Performance

As noted above, AngularJS includes many different concepts and has a steep learning curve. Done wrong, your app can become quite slow: The communication between components and the detection of changes (in order to update data bindings) are crucial here.

In Angular 2, change detection is based on data and not on changes in the DOM. The components of Angular 2 form a tree where changes are populated from the root to the leaves, i.e. top-down, depth-first and thus only in one direction. This results in an application behavior that is not only more predictable, but also more performant.

But don’t worry: This doesn’t mean that there’s no two-way data binding in Angular 2. You will be able to achieve the same effect.

Ready for mobile

Angular 2 offers support for server-side rendering, comparable to PHP or ASP.NET MVC. The difference to the aforementioned technologies is that Angular allows us to use the exact same code to pre-render whole views or parts of it (e.g. above-the-fold) on a server. This is also referred to as Universal JavaScript. Both Node.js and ASP.NET Core 1.0 can be used in combination with Angular Universal. Depending on your use case, this can lead to a significant performance boost.

Furthermore, you can configure Angular to be bootstrapped in a Web Worker. Web Workers bring parallelization to the JavaScript world, which only knows a single UI thread. Some of the work which is usually done by the UI thread can now be offloaded to a web worker, which leads to higher framerates and thus a fast and fluid user experience, even on entry-level smartphones.

Angular 2 or AngularJS?

Angular 2 is built for the web of the future. While it’s currently in Beta, it’s expected to be released somewhere in 2016. While the core concepts are solid, some APIs still are subject to change. If you are starting a new software development project today, you should choose Angular 2 over its predecessor. The new concepts and features both improve development speed and ensure that your app is ready for the web of the future.

Now it’s your turn: What will you build with Angular 2?

Thanks to my colleague Thomas Hilzendegen for proofreading this article. The logos of AngularJS and Angular 2 are licensed under the CC BY-SA 3.0 Unported License. The Angular 2 artwork is licensed under the CC BY 4.0 Unported License.