In 2016, Google released Angular, the most widely used open-source web app framework by developers all over. However, Angular has brought in its latest version, Angular 8.0, and its acclaimed renderer – Ivy.

What’s new in Angular 8.0

Differential loading of modern JavaScript

Manfred Steyer, in his project ngx-build-modern, has designed, built and shared a build process from Angular 8 onwards. This will consist of the CLI producing separate bundles for legacy (ES₅) and the modern JavaScript bundles (ES₂₀₁₅₊). Its major features will be a boosts in loading speed and time to interactive (TTI) for modern browser.

Most Noticeable Features:

• To create optimized bundles for modern browsers.
• To create legacy bundles for older browsers.
• To ensure that the browser loads the right set of bundles.
• To automate the process by facilitating CLI extension.

Opt-In usage sharing

The addition of an opt-in telemetry in CLI will aid Angular 8.0 to start collecting anonymous data like commands used and the build speed. This in turn will help to know how developers use Angular 8.0, so that it can be made better in future.

A more refined web worker bundling

Web workers are necessary for an enhanced correspondence and speed of your application. They do it by writing code off the main thread. Angular 8.0 is thus adding building support to CLI for web workers.

Angular router backwards compatibility

Angular 8 adds the backwards compatibility mode, which simplifies the advancement of large applications.

Dependency updates

As usual, there is an update of all the dependencies on tools such as: RxJS, TypeScript, and Node to keep them synchronized with the rest of the ecosystem.

Things You Need to Know About Ivy:

IVY Opt-In Sneak Peek

Kara Erickson announced and explained IVY in Google I/O 2018 and since then it has been a preferred topic for discussion among the developers. In simple words, IVY is an effort to build a next-generation rendering pipeline for Angular 8.0.

Team Angular is putting efforts in rewriting the codes useful to decode the Angular template according to browser requirements. It uses the incremental DOM in which every component is complied with a set of instructions that constitutes the DOM tree.

Two main concepts of IVY

• Tree shakable:To remove the unused code so that the application can pay attention to only the code it is using to result in faster run time and smaller bundle.
• Local:To recompile only the components that are changing resulting in a faster compilation.

Advantages of Angular 8.0 IVY

• Enhanced payload size
• Smaller builds
• Shipment of pre-compiled code
• Improved backwards compatibility
• Quick re-build time
• No requirement of metadata.json
• Advent of meta programming in Angular

Results

Here is an example of how IVY enhances Angular’s efficiency. The bundle size of “Hello, World” Angular application reduces to 2.7 KB from 36 KB with IVY. Thus, there is an upgrade with 93% reduction.

Correspondingly, when a Hello world app was put to test via a webpagetest.org to simulate the slow connection of a 3G network in a device, the Ivy took only 2.2 seconds, while the current version takes 4 seconds.

In addition to this, the codes rendered by Ivy are simpler and have a faster debug process.

Social Execution

The team Angular is planning an expected launch by May and it is confident about the huge impact of Ivy on the Angular 8.0 version. It will be an achievement of a milestone, as per the team, for the global developers.