What is AngularJS 2.0 Going to Look Like?

At last week's ng-conference in Paris the AngularJS team gave us an early impression of how AngularJS 2.0 is going to look like.

Maybe you remember me writing in an earlier article that AngularDart is a preview on AngularJS 2.0. It wasn't my own claim. I found it at the AngularDart web site. When I was jotting it down I couldn't help but wonder how this might be done. AngularDart benefits largely from classes, annotations and an optional type system. This can't be ported to Javascript, I thought?

Well, quite. Advanced features such as classes, annotations and type can be mapped to pure AngularJS if you stop thinking of Javascript as a first class language. Consider it an assembler language, and many things become possible. The difference is you don't have to take care about legibility.

AtScript

So that's what they did. The AngularJS team are developing a new language, AtScript, strongly resembling Dart and TypeScript. The difference to Dart is they see to it Javascript is compatible to AtScript (both ECMAScript 5 and 6, to be precise). In other words: you are already a fluent AtScript programmer, you just don't know it yet. It's perfectly possible to program an AngularJS 2.0 application using pure ECMAScript 5 (which basically is the Javascript of today). The AtScript Primer doesn't stop at explaining how AtScript is going to look like. It also explains how to compile (pardon: "transpile") AtScript to Javascript. The resulting code looks a bit weird, but it doesn't look that ugly, so it's reasonable to say it's possible to program an AngularJS 2.0 application using pure Javascript (even ECMAScript 5).

Why a new language? Why don't you use Dart?

By the way, the AtScript primer also mentions Dart as target platform. The disadvantage of Dart is it can't easily communicate with Javascript. It's difficult to exchange data or call methods from Dart to Javascript and vice versa. It's not entirely impossible, but since Dart runs on it's own virtual machine, it's difficult to solve problems like memory management (you'd need a common garbage collector). Last time I looked every JS compatibility API was disabled, deprecated or discouraged.

The AngularJS team decided to implement a language that's more friendly to Javascript in order to avoid those problems.

First reactions of the developer community

AtScript sounds like great news. But is it great enough to ensure the success of AngularJS 2.0? I for one love the syntax and the semantics of AtScript. It's almost like Dart, I think I could make the transition pretty fast. Have a look at this source code - I bet you can read it without explanation (provided you are an experienced Java or Dart programmer, and probably even if you're a Javascript programmer who's familiar with the concept of annotations):

class Inject {} class Component { selector:string; constructor({selector:string}) { this.selector = selector; } } class Server {} @Component({selector: 'foo'}) class MyComponent { @Inject() constructor(server:Server) {} }

quoted from the AtScript primer

Judging from the early reactions on reddit (also look here), other programmers are quite not so enthusiastic. Yet another compiler? Yet another tool in our toolchain? That adding complexity to development, and complexity is precisely what developers strive to avoid. Complexity comes by itself, we don't have to invite it to our office.

Be that as it may, the introduction of AtScript to the formula supports my former claim that AngularJS 2.0 has courageous plans. Time will tell whether the bet is going to work out. I'm optimistic: Having programmed in Dart and AngularDart for a while, I'm pretty much convinced it's a risk worth taking.

Getting rid of antiquated traditions

The surprises don't end there. Martin Gonto calls AngularJS 2.0 a serial killer. It gets rid of jqLite, making jQuery an optional module you may add or not. DOM is supported sufficiently well in modern browsers, so it sounds reasonable you can replace jqLite by standard DOM function calls. That's one of the reasons why AngularJS 2.0 dropped IE8 support.

AngularJS 2.0 also gets rid of the controllers, the Directive Definition Object, angular.module and even the $scope. Getting rid of the controllers has been discussed in the AngularDart community for quite a while now, but the other drops come as a surprise. As for now, I haven't found out how AngularJS will look like without these core concepts. One thing is for sure: AngularJS 2.0 will look substantially different from AngularJS 1.x. Consequentially there's no migration path planned. We'll have to rewrite our AngularJS applications.

Overhauled data binding

The AngularJS design docs give you a sneak preview on AngularJS 2.0. I took the following bit from one of the design documents. AngularJS 2.0 is going to overhaul databinding:

These are two alternative syntax proposals. The square brackets indicate a property, while the round brackets are bound to a function call. (Did you know HTML syntax is flexible enough to allow for such a syntax? I first thought of a typo, but it seems to be correct).

Wrapping it up

AngularJS 2.0 is still in its infancy, so things may change over time. Right now it seems to be a fairly radical approach to improving AngularJS that doesn't care too much about compatibility. Except for one crucial point: Today's Javascript may not be the preferred language of AngularJS 2.0, but the team see to it that it's possible to program an AngularJS application in good old ECMAScript 5.