With the final release of Angular 8.0 just around the corner, here’s a roundup of the major features included in the release. More importantly, get an overview of the much-awaited Angular IVY – the new Angular renderer which is radically different from all the available frameworks.
In this post, we will provide some insights into the major features of Angular 8
Major features of the Angular 8 Release
Angular IVY - The new compiler version of Angular 8
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.
- Tree Shakable: It means developers pay only for the code they use. It results in faster runtime and a smaller bundle.
- 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.
Opt-in preview of IVY
Switching between IVY and View Engine build is made possible with opt-in preview rendering pipeline to your project. The change will switch your applications to be built with IVY runtime instructions rather than ViewEngine runtime. Built with the IVY compiler, any dependencies used from Angular or 3rd parties would be run through the compatibility compiler. The preview will help you identify issues with Angular, besides improving compatibility.
The opt-in preview focusses on moving applications to IVY compiler and runtime instructions without the need for rewriting the applications by the developers. As part of Angular Labs and the future releases, many IVY-specific APIs will get added to the public API later.
Other major features included in Angular 8
- It brings in greater efficiency to modern browsers with ES2015 support enabling them to download smaller, smarter and faster app bundles.
- Facilitate a CLI extension by automating the process.
Angular router backwards compatibility
With the addition of backward compatibility mode in Angular 8, the upgrade of all your large projects is made simpler. By allowing lazy loading of some parts of the AngularJS apps using $route APIs, teams can easily move to Angular.
Web worker bundling enhanced
Web workers improve the speed and parallelizability of your application. They are an incredible way of writing the code off the main thread. To improve the web worker bundling – a common request from the developer community – bundling support has been added to the Angular CLI.
Opt-in usage sharing
In view of aligning the efforts with the community needs, opt-in telemetry has been added to Angular CLI. With the opt-in consent of the developers, the Angular team will collect anonymous information from the developer community about commands used and the build speed. The idea is to have more information on how the developer community uses Angular to enhance it better in the future.
The release of the new Angular 8 would have the routine dependency updates for r RxJS, TypeScript, and Node in alignment with the others in the ecosystem.
Updated on 13th August, 2019
Angular 8.0 got released in May 2019. As the Angular teams keep innovating and rewriting major parts of the framework for bringing on the best in the imminent Angular 8.0 rollout. Angular is using opt-in preview of IVY in 8.0.0 to keep up its promise on backwards compatibility and support to existing applications. However, it hopes to turn IVY for everyone as part of the next major version. With full IVY rollout in version 9, it expects to open up new avenues for both developers and their team.