An Early Look at Angular 8: Get Ready for Opt-In IVY Preview

With the Angular team announcing Angular 8.0 earlier this month, we wanted to give a quick overview of the features coming with the next big version of Angular as well as provide some basic understanding of IVY.

With Angular 8.0 slated to ship sometime in Q2 of this year, let’s have a look at some major features included with the release.

IVY Opt-In Preview

IVY has been the talk of the town among Angular developers since it was announced and explained during Google I/O 2018 by Kara Erickson, who is currently leading the future of Angular.

IVY in Simple Words

Many people are talking about IVY, but there are many developers who don’t know what IVY is. This should serve as a basic overview of Angular IVY and help people understand why it is so important.

IVY is an initiative to build a next-generation rendering pipeline for Angular, and, for this, the Angular team is currently rewriting the code that translates the Angular template to whatever we rendered in the browser. It uses the incremental DOM.

Incremental DOM means every component is compiled with a series of instructions that creates the DOM tree and updates them when data changes.

Source: ngConf-2018 keynote

Google uses incremental DOM nicely, and, if you are interested to know more, have a look here and here.

Once IVY is fully ready, it should make Angular applications smaller, faster and simpler, all without any change in your existing application. The Angular team is currently testing the IVY changes with Google’s 600+ Angular applications.

There Are Mainly Two Key Concepts for IVY

• Tree Shakable: Remove unused code so the application only pays attention to the code it’s using, hence a smaller bundle and faster run time
• Local: Only recompile the components that we are changing, resulting in faster compilation

The Advantages of Angular IVY (Per the Angular team)

• Generated code that is easier to read and debug at run time
• Smaller builds
• Shipment of pre-compiled code
• Faster re-build time
• Improved payload size
• Improved template type checking
• Great backwards compatibility
• Rise of meta programming in Angular (new changes with no breaking changes)
• No need of metadata.json

Quick Results

The "Hello, World" Angular application bundle size without IVY is 36 KB, and with IVY is 2.7 KB. That is a huge improvement—a 93% reduction (hence, smaller).

"Hello, World" load time without IVY is 4 seconds, and with IVY is 2.2 seconds. That's yet another huge reduction—a 45% reduction overall (hence, faster).

Now we know why IVY is such an important project for the Angular team and the good news is that we will be able to preview IVY with Angular 8 and provide feedback so the end result will be very nice.

Opt-In Preview

With Angular 8, we will be able to switch between IVY and the regular View engine build. Currently, we do not have straightforward ways to do so, but shortly there will be more details given by the Angular team for this. I would request you all give IVY a try and, if you encounter any issues, please reach out to the Angular team so that they can improve the final version of IVY.

Backwards Compatibility

With Angular 8, the upgrade for large applications will be simpler. It will be easier to move to Angular by allowing lazy loading of parts of AngularJS apps using $route APIs.

Differential Serving for Modern JavaScript

From Angular 8 onward, there will be separate bundles for legacy bundles (ES5) and modern JavaScript bundles (ES2015+), which will result in faster load time and Time To Interactive (TTI) for modern browsers.

This project originally belonged to ngx-build-modern. 

Some of the features are:

• Creating optimized bundles for modern browsers
• Creating legacy bundles for older browsers
• Making the browser load the right set of bundles
• Automating this all by providing an CLI extension

Opt-In Usage Sharing

From Angular 8.0 onward, there will be an opt-in telemetry in CLI and Angular will begin collecting anonymous information about things like the commands used and the build speed (if you allow them to do so). The Angular team will then use this data to create some more awesome features.

Apart from this, there are other features like:

• Dependency update on the tools, like Typescript, RxJs, Node, etc.
• Improved web worker building, which will increase the speed and parallelism ability of your application.

Angular 8.0 will be released somewhere in April/May 2019 and full IVY will be released with Angular 9.0.

For More on Building Apps with Angular

Check out our All Things Angular page, which has a wide range of info and pointers to Angular information—everything from hot topics and up-to-date info to how to get started and creating a compelling UI.