What’s new in Angular 8

Angular 8 being the next big version of Angular, Ivy holds a lot of prominence. Ivy is Angular 8 template renderer. Similar to earlier versions of Angular compilers, it takes the templates and components written in Angular and compiles them into plain HTML and JavaScript making it readable by Chrome and other browsers.

More details about project IVY

Ever since it was announced during Google I/O 2018 by Kara Erickson, who is responsible for the future of Angular, much has been talked about IVY. But surprisingly, many do not know what project IVY is?

IVY is Angular 8 template renderer. It is a new way of rendering Angular templates different from any of the available frameworks. The Angular team at Google is rewriting the codes that can easily translate Angular template into actual DOM nodes. Based on incremental DOM where every component is compiled into a series of instructions, IVY is responsible for creating DOM trees. It also updates the DOM trees whenever a change in data occurs. When once the IVY is completed, it would enable Angular applications to be smaller, smarter and faster.

It would basically mean you can achieve smaller, smarter and faster applications without doing any changes to the existing applications; because, IVY is backwards compatible. Currently, the Angular team is testing the changes on more than 600 applications.

The IVY rollout needs to be optimized for three focus areas

• Reduction in bundle sizes.
• To improve loading speed and time to interactive (TTI) for modern browsers.
• Faster debugging and easier interface

The new render pipeline promises a faster interface with smooth development while based on the following concepts.

1. Tree Shakable: It means developers pay only for the code they use. It results in faster runtime and a smaller bundle.
2. Low memory footprint: They would need to recompile only those components being modified for a project. It results in the faster compilation.

Here are some of the advantages to expect from IVY rollout.

• The generated code is simpler, faster and easier to read enabling debug at runtime.
• Smaller builds
• Delivery of pre-compiled code
• Significantly faster rebuild times
• Great backwards compatibility
• Enhanced template checking to detect errors at build time preventing them during runtime.
• Decreased payload size leading to lesser time for browsers to download
• Compilation without the requirement of metadata.json

IVY performance – results of analytics

IVY is designed to enable apps to become faster, smarter and simpler. Based on the internal research and analytics by Google, IVY performs reasonably well on three metrics. Here are some of the insights into the results of analytics showcased during Google I/O 2018.

In comparison to the current version of Angular which makes a 36KB bundle of the standard Hello World app, IVY reduced the package by 93% to 2.7 KBs in size.

On speed metrics, in a demo, a Hello World app was tested via webpagetest.org to simulate a mobile device with a slow 3G connection with the baseline set to 1.5 seconds. The IVY results were amazing as it turned up in 2.2 seconds. The results depicted a remarkable improvement of 45%.

The core purpose of designing IVY was making code rendering easier and readable for faster, simpler and efficient debug process. The code snippet gives precise information as below.