In the first quarter of 2019, Google launched Angular 8 which was much awaited by the community, the expectations were really high for Angular 8 as it was initially said that Angular 10 will be the final version of the framework. The skyrocketed hype demands huge performance improvements in Angular 8 which was quite matched with mainly focusing on the toolchain and also making Angular easier for users to create different types of application along with other performance improvements.
What’s new in Angular 8?
With backward compatibility and support, this release confirms that the new Angular 8 version is much lighter, faster and easier. Now, Angular 8 supports the TypeScript version 3.4. So, with the help of the new TypeScript version, it is quite easy to code with faster subsequent build with the incremental flag, type checking for global this, and generic type arguments.
Read: "Why Angular is Better For Web Application Development?"
- Bazel Support
In Angular 8, Google introduced another build tool called Bazel that they have been using for a while and now this tool is released as an open-source utility. Bazel came as an opt-in option with Angular 8 so it is pretty evident that it is not ready for angular 8 yet and is expected to be included in the Angular CLI in version 9. Anticipated benefits of using this tool,
- Faster build time, although It normally takes time for the first build but will take less time for the concurrent builds.
- We are now able to build the application as an incremental build and deploy the war files.
- TypeScript 3.4.x Support
Angular 8 supports the TypeScript 3.4 or above version although the updates will be pushed to applications if automatic updates aren’t restricted. So, if you want to use Angular 8 for application development, then you need to first upgrade the TypeScript to 3.4 or above. Google has tested Angular 8 on more than 600 in-house projects to ensure there is backward compatibility so that the projects already running doesn’t require patch-ups.
Read: "JavaScript vs TypeScript"
- Ivy Rendering Engine
Ivy is the new Angular Compiler and tool that acts as a new rendering pipeline. The benefit of Ivy is that it generates considerably small bundles and can perform incremental compilation easily but how it does that.
Two main concepts on which IVY works
1. Tree shakeable: To remove the unused code so that the application can focus on the code it’s using, to use this effectively developers have to write the code in such a manner that they avoid conditional statements. In case the engine is confused that whether this code will be used or not then it will not be removed the code at all. So, the Smaller filtered code results in faster run time and smaller bundles.
2. Local: To recompile only the components that are changing will result in a faster compilation rate.
Advantages of Angular 8.0 with IVY
- Enhanced payload size
- Smaller builds in size
- Shipping of pre-compiled code
- High backwards compatibility
- Quick re-building time
- No need of metadata.json
In Angular 8, Google introduced only a preview version of Ivy. The main objective of this version is to receive early feedback from the Angular Developer community for Ivy.
- Differential Loading for Performance Optimization
The older browsers support ES5 and modern browsers support ES6. The Angular CLI 8 produces both legacy (ES5) and modern (ES2015 ) JavaScript bundles as a part of the build process that is differentially loaded on client-side to improve the loading speed and time to interactive (TTI) for modern browsers. This work is built collaboratively with Manfred Steyer and his project ngx-build-modern.
Now developers can specify which browser they will target and the CLI will build the application with related necessary JS bundles and necessary polyfills. The default target browser is listed in the tsconfig.json file is now es2015. It means when CLI 8 builds the application, it will build for the modern browser which supports ES6 features. But if the users need to run the application in an older browser like IE9, then angular developers need to specify it in the browser list file. This file exists in the root folder of the CLI project and previously, it was used for the CSS part only. Now, it can be used for JS generation as well.
- Changes in Lazy Loading in Route
Backwards compatibility mode that simplifies the upgrade path for large projects is added. It will make easier for teams to move to the latest version of Angular by allowing lazy loading of parts of AngularJS apps using $route APIs.The way of writing lazy module has been changed a bit in Angular 8 due to the support of ECMAScript and Ivy will henceforth this.
Read: "Angular vs Vue: Which is Better For Web App Development?"
- Web Worker Support
Web workers are essential for improving the speed of applications with the core concept of object-oriented programming. Web workers write code off the main thread. As JavaScript is always executed in a single-threaded manner so it is important to perform huge data call or consecutive Rest API calls in an asynchronous manner. Since in real-world scenario, this concept doesn’t help us that’s why today all the web browser support the web worker process. The Web worker process is the scripts executed by the browser in a separate thread. Communication with web worker thread in the browser tab is done by sending messages. So, the main agenda was to provide one single bundle for every web worker to communicate easily which is now supported by CLI 8 in Angular 8.
- Support for New Builders/Architect API
The new version of the Angular CLI 8 allows us to use the new version of the Builders with which we can create our custom builders as well. The Builders aka Architect API are functions that implement the logic and behaviour for a task that can replace a command which you pass to the createBuilder() method from @angular-devkit/architect package. Angular used Builders API for performing the operations like server, build, test, e2e and lint.
Read: "What is an API and How it works?"
- Opt-In Usage Sharing for improving Angular
Now in Angular 8, Angular CLI can collect usage data so that Angular team can prioritize the features and improvements. So, when we update the CLI projects then it will opt-in with ng analytics on options. Angular 8 wants to gather build timings developer preferences by collecting some data like command used, the flag used, Operating System, Node Version, CPU Count, RAM Size, execution time and error with crash data for improvement purpose in the future releases.
Read: "The process of web application development"
- Upgrading Angular Material
If your app makes use of Angular Material, you can follow with this command to update components:
$ ng update @angular/material
- Upgrading from Angular 7 to Angular 8
As it has been the case for the previous few releases, upgrading an app from Angular 7 over to Angular 8 is super easy. That becomes even better if you’ve already migrated over to using the new HttpClient and to RxJS 6.
You can upgrade the web apps through one command to run to upgrade over to Angular 8:
$ ng update @angular/cli @angular/core
With this, even your lazy loaded route imports will be migrated to the new import syntax automatically.
Conclusion
The new compact syntax with ViewChild, ContentChild, Differential loading, Ivy rendering Engine has significantly reduced the build sizes. Simultaneously Bazel, web worker, TypeScript 3.4 and above support have made angular code to run blazingly fast. If improvement in code readability, reduced the size of apps and enhancement in speed by leveraging faster tools, components and services can’t convince you to use Angular 8 then I don’t think even God can convince you for anything.
