Angular is arguably the most popular open-source web app framework which is widely used by developers across the globe. In 2016, when Google released Angular, many developers migrated to this robust framework.
Today, developers in large number use Angular. The community of developers using Angular are always waiting for all the periodic updates that Angular comes up with.
This time Angular has came up with its latest version which is Angular 8.0 which consists of a much talked about renderer – Ivy. In this blog, we will see one by one what does Angular 8.0 brings on the table.
We will also explain why there’s so much hype about the Ivy and how will it boost the overall efficiency of Angular 8.0.
What’s new in Angular 8.0
Apart from the much talked about Ivy, there are many other features in Angular 8 that are explained in detail as below.
This will result in boosting the loading speed and time to interactive (TTI) for modern browser.
This work is conceptualized and built, and shared by Manfred Steyer and his project ngx-build-modern.
Some of its features are mentioned below
- 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 an CLI extension.
Opt-In usage sharing
To keep their efforts in alignment with the community’s needs, Angular 8.0 will add an opt-in telemetry in CLI.
With this, Angular 8.0 will start collecting anonymous data like commands used and the build speed but only if you allow them to.
This information will help them to know that how developers use Angular 8.0, so that they can make it better in future.
Improved web worker bundling
Web workers are essential for improving the parallelizability and the 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. This is done to address the common request from the developers.
Angular router backwards compatibility
With Angular 8, the upgradation of large applications will be simpler as they are adding the backwards compatibility mode.
It will make easier for the teams to move to Angular by allowing lazy loading of AngularJS app’s parts using the $route APIs.
As usual, they are updating all the dependencies on tools such as: RxJS, TypeScript, and Node to keep it synchronized with the rest of the ecosystem.
What’s IVY all about?
IVY Opt-In preview
IVY has been grabbing attention of many people since its announcement in Google I/O 2018.
It was announced and explained by Kara Erickson, who is now leading the future of Angular. Let’s understand what IVY is in simple words.
IVY has been hot favorite topic for discussion among the developers. However, many of them still don’t know what IVY is.
IVY is an initiative which is meant to build a next-generation rendering pipeline for Angular 8.0.
For this the Angular team is rewriting the codes that simply translates the Angular template to whatever is required in the browser.
It uses the incremental DOM in which every component is complied with a set of instructions that constitutes the DOM tree.
Moreover, it also updates it whenever there is a change in the data.
Once the IVY is completed, it will make the Angular applications smaller, simpler, and faster.
It will achieve all this without changing anything in the existing application. The team for Angular is currently testing the IVY changes on more than 600 applications of Google.
Two main concepts of IVY
1. Tree shakable: To remove the unused code so that the application can pay attention to only the code it’s using. Hence, it results in faster run time and smaller bundle.
2. Local: To recompile only the components that are changing which would result 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
Let’s see how IVY makes the Angular more efficient. The bundle size of “Hello, World” Angular application without IVY is 36 KB; however, with IVY it’s just 2.7 KB. The improvement is in the form of massive 93% reduction.
Similarly, Ivy scored well on the speed too. In a demo, 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 results were astonishing as Ivy took only 2.2 seconds. The current version however, takes 4 seconds. This is a massive improvement on the speed aspect by 45%.
Let’s talk about the coding now. The codes rendered by Ivy are simpler, better, easier, and has a faster debug process.
To understand the difference in a better way, let’s have a look at the below snippet which compares the codes on the current version of the Angular to that of the Ivy.
When will everything be ready?
One question which everything has in mind is that when everything will be completed.
According to the team at Angular, there isn’t a fixed schedule for its release. However, they are planning to release its latest version somewhere in the month of May.
Our Angular developers are confident that IVY will have a huge impact on its Angular 8.0 version.
They are not planning for an opt-out of Ivy in their version 9 as they are focusing on supporting existing applications and backwards compatibility.
The team is excited to roll out the full IVY in the version 9. This will be path-breaking as it will unlock many doors for the developers all around the world.
The team said that they will share their plans, features, and the APIs once they are further along in the Ivy rollout process.