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.
Differential loading of modern JavaScript
From Angular 8 onwards, the CLI is going to produce separate bundles for legacy (ES5) and the modern JavaScript bundles (ES2015+), which will be the part of the overall build process.
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.
Dependency updates
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.
Support for typeScript 3.4
Angular 8 has mandated the use of Typescript 3.4 with its introduction itself. Thus, making it compulsory for you to update the TypeScript version without any fail.
This update might seem as an insignificant one; however, it will be helpful while generating readable and clean JavaScript codes.
Dart-sass for Sass files
To create the Sass file, Angular has finally discarded node-sass for dart-sass. Dart is perceived to be superfast by many experts and it’s now all set to replace Ruby – the legend for the reference implementation.
The generated Sass file would usually remain unchanged; however, there are possibilities of compiler becoming a bit strict. Moreover, with the fibers in place the speed could double too.
Dart is the default now, which is a big change in itself. However, you can still use node-sass given that you install it explicitly.
Workspace APIs and builder APIs in the CLI
With the new Builder APIs, you can tap into ng test, ng build, and ng run. This will be similar to Schematics which lets you to tap into ng generate, ng update, ng add, and ng new.
This will assist you in processes like building and deployment by using third-party tools and libraries.
Moreover, Angular is also looking to leverage cloud for APIs. For example, the latest AngularFire simplifies the process of deployment and build to Firebase by adding the deploy command.
ng add @angular/fire
ng run my-app:deploy
Earlier, to bring changes in the workspace configuration, you had to modify angular.json in Schematics manually.
However, with the new Angular 8.0, the modification and reading of a file becomes easier due to the use of the new API.
Advancements in AngularJS migration
Angular 8.0 brings good news for all the users of $location service as it now enables them some Location Upgrade Module in the AngularJS applications. In this, they can easily translate to the unified location service.
This enables it to easily shift its responsibility from the AngularJS $location to Angular Location.
This eases out for all the applications that have the hybrid operations and which depend on upgrade along with route in AngularJS and Angular part.
Bazel – the buzzword
Building a CLI application becomes easier with Angular 8.0. And the credit goes to the Bazel, which developed and used by Google. Bazel is a build tool that can work in almost all the language input.
Let’s see some of the benefits of the Bazel:
- The same tool can be used to build frontends and backends.
- By allowing tests and incremental builds, it brings gains on the rebuild times.
- There is a high possibility to gain cache and remote builds on build farm.
- With Bazel, you can easily declare tasks with a clear output or input and ensure that only the tasks which are necessary runs.
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
Results
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.
How to Update from Angular 7 to 8?
Updating from the Angular 7 to 8 is an easy task. Especially, for those who already have started using HttpClient and have upgraded it to RxJS6.
Below are the few things which one must consider while updating to Angular 8:
- There’s a possibility of Syntax errors emerging because of the presence of the TypeScript 3.4. This might cause some issues.
- You have to use the version 12 of Node.js or later for the upgradation. You can run the $ node-vcommand to check which version of Node you’re currently using.
- You would also need to update the Angular Material in the application by running the command: $ ng update @angular/material.
Conclusion
The latest updates aren’t that grand, except IVY. However, they all are pretty significant.
So, in case, you’re looking for an opinion on whether you should upgrade to Angular 8.0, then our answer is Yes without a second thought.
With Angular 8.0, you can enjoy applications of Ivy along with performance gains with differential loading.
Moreover, the update has lesser breaking changes which allow your existing applications to work smoothly without any alterations.
