Deep Dive into New Angular Compiler at ng-conf 2016

The second day of ng-conf 2016 started out with a highly technical keynote session. Members of the Angular team came on stage to provide deep insight into Angular 2.

Rob Wormwold and Misko Hevery talked more about the new offline compiler step. Wormwold showed off the two compilation modes: dynamic and static. Dynamic mode is what Angular developers are used to. The framework is sent to the browser and all the compilation takes place there. In this mode, the Angular payload is about 116K.

With the offline, static compiler, there are a few steps taken to reduce the size of the payload to 49K (should be 45K by final).

Hevery laid out some of the benefits of their new compiler:

Because we've rewritten the parser in JavaScript, we can make it case sensitive. That's why, in Angular 2, you don't have to say ng-if, you simply say ngIf. We also can give you line numbers. We know where the particular token or director comes from. If there's an exception, we can give you a line and column number.

This new compilation system only uses pure JavaScript, without any DOM dependencies, so it can run anywhere,x be it the browser, server, or any other place that runs JavaScript. Hevery says that because the code the new compiler generates is "monomorphic", the browser VM can inline the function call sites which "gives us a huge speed boost."

The new compilation pipelines consists of four stages:

• Compile
• Inline
• Tree-Shake
• Minify

Compile and minify are typical steps in such a process, but the inline and tree-shaking steps are new. Inlining takes all of the various modules that are exported and imported and combines them into a single file. It goes beyond simple concatenation. "We're talking about taking the individual symbols and putting them next to each other", says Hevery.

The tree-shaking step currently uses a tool called RollUp to go through the single file and throw out code that is never used. This dramatically reduces the amount of code in the package because, among other reasons, the Angular compiler itself gets is removed. Hevery says:

The tree shaker follows [the code], and only keeps the symbols that are actually referenced. Because we used the [offline compiler], we don't get a reference to the ng compiler and that falls out automatically. We can actually fall out other things. If you didn't use ngFor or ngIf in your application, we don't include that either. We only include what is actually needed for this application.

The complete rewrite of Angular from version 1 to 2 caused a lot of pain in the community and the team hopes to never experience that again. Alex Eagle came on stage and told about the refactoring tools Google uses internally to keep their apps upgraded as Angular itself changes. They want to give the community something similar. Eagle says:

Is it possible that we can Angular itself evergreen? Can we avoid the "Angular 3" conversation [from] ever happening by keeping the framework up-to-date and keeping all of you along with us?

The tools use the TypeScript Language Services, the new compiler and parser to create "proposed source edits" to the TypeScript and HTML/CSS files of an app. "Those edits are sufficient to correct whatever breakage we just caused in the framework", says Eagle. To that end, the Angular team announced their "intent to build" a set of public tools and with every breaking change in the framework, "a set of upgrades to take you from whatever version you're on now to whatever version the latest."

The full video of the 2016 ng-conf Day 2 Keynote is available on YouTube.