Last year the Angular-team announced the next major version of Angular. With a much discussed keynote at ngEurope they scared everybody into thinking that the end had come. Over the past year not only the communication efforts, but also the new framework, have evolved and turned into something very promising. In this blogpost I'll share my excitment about Angular 2.0 and why I think it's worth my (and your) time.

So what's all the fuzz about?

Angular2 is a complete rewrite of our well-known framework. The team and lots of other contributors have simplified the awesome stuff we love, taken out unnessecary clutter, streamlined the approach and added some new primitives and features, that I'm convinced we will all come to love. Of course it will take some getting used to, and upgrading won't be as easy as with an incremental update. 

The focus of the rewrite has been on performance and about using new primitives that are coming to JavaSript. Even though Angular2 is already comparable to React in terms of speed, these changes mean that over time the framework will be lighter to download and faster to execute as these new primitives are supported instead of polyfilled. This also means we can use functional reactive programming (RxJS-style) with observables. 

Like in React the "rendering" (which is really template parsing, right?) is in its own module. This means you can swap this module out and render to native UI-components if you are building a mobile app. There is already a demo of moving all the hard work of Angular into a webworker so the rendering thread of the browser can focus on the rendering, giving even more performance to lower end multi-core devices (like phones).

Angular2 is built on typescript, which means that all you Visual Studio people out there can have real intellisense on the entire framework - just like you would expect from your backend code. You can also write your own components this way and use types, interfaces and even Classes. All of this is only for dev-time, and is compiled down to JavaScript that will run in (wait for it...) IE9+.

Currently, in Angular 1, we are forced to manually handle async actions and run $scope.$apply() when any non-angular library runs asynchronously. In Angular2 this is no longer necessary, which will make dealing with the framework a lot easier and more understandable for outsiders and the occasional fiddler.

Another great feature from the current Angular that has evolved to be amazing in Angular2 is Dependency Injection. No longer do we have to deal with naming conventions to make sure we don't overwrite other people's services and directives. In Angular2 every node has its own injector where we explicitly define what we want. This is really powerful, especially when using third party libraries, and of course for unit testing. 

What will it be like?

Since this blogpost is a 30.000 foot view of Angular2 it won't be a tutorial per se, but it helps visualize the new framework, when you can see examples of the kind of code you're going to be writing. 

It's worth noting that even though you CAN write your code in typescript with Classes and other not yet supported features, you DON'T HAVE TO. But since this post is about the new and shiny stuff, I will. If you want to see what it would look like in plain old javascript, reach out to me on twitter (@filipbech) and I'll provide an example.

An Angular2 app is really a tree of components (think of it like a DOM-tree of E-directives) where data flows down towards the leafs, and events flow back up. Any node in this tree can also have directives to add functionality (almost like A-directives, but with any* css-selector and never with a template). 

Nobody knows how (when, or even if) the Umbraco backoffice will embrace Angular2. But since the audience of this blogpost is familiar with Umbraco, let's do an example of what it probably would be like in Angular2.

In the current Angular you might be used to instantiaing a controller on a DOM-node with ng-controller - like <div ng-controller="PersonEditController"> ... </div>. In Angular2 this would be a component and have its own elementName like <person-edit> ... </person-edit>. Instead of assigning values and methods to the $scope so the template can interact with them, we now assign them to the instance of the controller (almost like the controllerAs syntax that was added in Angular 1.2). 

Class PersonEdit {
    myValue;
    myMethod(inVal) {
        // magic here...
        return outVal;
    }
    // constructor goes here...
}

In order for Angular2 to know that this Class is a component and to configure options like what template to use, we decorate the Class by putting something like this just before the Class-definition.

@Component({
    selector: 'person-edit',
    templateUrl: 'myTemplate.html'
})

The templating language is similar to the current in Angular1, but has some slight changes that makes it more powerful and expressive. Let's make a form input bound to myValue, a div that shows this value and has a conditional class and a button that invokes myMethod when clicked.

In Angular1 this would look like:

<input type="text" ng-model="myValue"/>
<div ng-class="{valid:myValue.length > 0}">{{myValue}}</div>
<button ng-click="myMethod()">Click</button>

In Angular2 it will be like this:

<input type="text" [(ng-model)]="myValue"/>
<div [class.valid]="myValue.length > 0">{{myValue}}</div>
<button (click)="myMethod()">Click</button>

There are very good reasons behind the changes to the syntax, but that's a longer story (again, reach out to me if you're interested).

Of course there are many other things to note about Angular2 - head over to angular.io and read more or try the tutorial. If you have problems getting set up, I'm happy to help.

When??

Of course the big question on everybody's lips now is "when?"... and while I can't say for sure, the number of issues that needs fixing before the beta-release is closing in. My personal guess is January. 

But you can play with the alphas today and get your head around the concepts. Google has already rolled out its first public facing website running Angular2, so I think the framework is ready and stable enough for us too...

Upgrading to Angular2 is getting easier and more well-documented every day. If you are interested in that you should take a look at ng-forward, and if you aren't already you should follow the best practices of current angular (avoid $scope, use controllerAs, etc.).

I hope this has piqued your interested and convinced you that the upgrade is not so bad and definitely worth it.

Let's continue building great stuff!