Inside-out: where the main application is still Angular 1 and parts of the application will be refactored for Angular 2 Outside-in: where the main application is first refactored into Angular 2

Michał Gołębiowski and Andrew Joslin discussed the details of refactoring Angular 1.3 app to ES6 powered Angular 2 app and it didn’t look impossible!

About the new router

Brian Ford gave a good introduction to the new router that is slightly based on the community work of ui-router, but developed in TypeScript with Angular 2 and the migration path from 1 to 2 in mind.

The funny thing about the new router is that it actually has some EmberJS related code in it, from project called route-recognizer.

New Syntax

When I first saw the “bracket-attribute-based template syntax” (as I call it) of Angular 2 few months ago, I was disgusted:

That didn’t look really “HTMLy”. But, as Miško Hevery pointed out in the 2015 ng-conf Friday’s keynote: those “bracket-attributes” are completely valid HTML as syntax goes. Though they certainly are not global attributes and I noticed that W3C validator (which unfortunately is less and less useful tool these days) reports “Attribute [foo] is not serializable as XML 1.0.” error even if HTML5 validation is chosen.

There will also be a “canonical syntax” without the brackets with “bind-prop” and “on-event” attributes (which I suspect can be prefixed with “data-” to make them valid HTML5, though I have nothing to back that up).

Turns out this new bracket-attribute based syntax actually makes templates even more descriptive: Instead of using ng-bind attribute which will set its value to element’s text one can simply use [text] attribute or instead of ng-hide one can simple set attribute [hidden] to true (notice how these bracket attributes map to the standard HTML attributes).

Properties, events and methods

The Angular 2 DOM API consists of properties, events and methods:

Square brackets [] signify expressions (used with properties)

Parenthesis () signify statements (used with events)

Expression vs Statement in Angular 2

Hash mark # signify a rerefence (used with methods)

In Angular 1.x it is difficult to access another element’s methods in the template. In Angular 2.x a reference declared with a hash mark allows one to do just that:

A lot less of syntax

By introducing this new syntax Angular 2 does away with a lot of (now unnecessary) directives:

Summary of the Angular 2 DOM API syntax

Tooling

Besides actually simplifying the Angular 2 DOM API for the developer, due to the new syntax, Angular 2 can for example catch typos in properties and I suspect that down the road editors/IDEs will take advantage of this new syntax as well.

Web Components & Shadow DOM

Angular 2 actually does not care if a DOM component is a native browser element, Angular component or Web Component. There is no difference and the API will be same to all components, so mixing them is not at all a problem. This is because Angular is retiring its transclusion feature used in Angular 1.x for “replacing an element” and uses instead standard Shadow DOM feature from Web Components. For browsers that do not support Shadow DOM Angular 2 will emulate/shim it.

Performance

AngularJS 1 can be pretty slow especially with long lists (at least without any optimizations). Here’s Dave Smith showcasing it in his performance related presentation:

Vanilla Angular 1

As probably many others have done already, I’ve been looking into using ReactJS as way to boost up performance in Angular 1 apps, which is exactly what Dave showed, a much faster performance with AngularJS v1 + ReactJS:

Angular 1 + ReactJS

But then right at the end of his presentation, he showed the same demo with Angular 2 and the result is more than impressive, almost instant! READ THE UPDATE BELOW!

Vanilla Angular 2

UPDATE March 8th 8:57 PM UTC:

As few people have already notified me on Medium.com notes and on Facebook that there was a mistake in the above presentation by Dave Smith. The Angular 2 demo was set to zero millisecond timeout instead of the same 500ms timeout that the Angular 1 & ReactJS demo had, so the comparison above is false. Smith and ng-conf have uploaded a new video of the presentation where on the end Angular 1 & ReactJS vs Angular 2 are compared with the same timeout. You can see it here: http://youtu.be/XQM0K6YG18s?t=17m37s The performance difference is now much smaller there and one has to note that Angular core contributors helped to optimize the Angular 2 demo, but ReactJS people haven’t had the change to optimize the Angular 1 & ReactJS demo. Turns out there is no silver bullet.

As Victor Savkin points out in his blog: “In Angular 2 there are no two-way data-bindings” (at least not at the moment). I guess that combined to the new reinvented change detection are probably the biggest reasons for these performance improvements.

Change detection graph in Angular 1.x was more like a “cycle” where for example it is sometimes unclear which nodes update in which order. In Angular 2 the change detection graph is a directed tree structure which is a lot faster to work with: