Angular 9 — faster and smaller
Written by Dibran Xhymshiti, Software Developer at ABC Software Development that is part of ABC TECH Group
Angular 9.0.0 is finally here!
The Angular team came up with a major update that includes the entire framework, and the CLI. This release, in which they have been working on for more than two years, switches applications to the IVY compiler and runtime by default. Thanks to that, now Angular applications are around 40% faster and smaller.
What are those features that make this update so prominent? Well, let us go through the most important ones together.
What’s new in Angular 9?
Version 9 moves all applications to use the Ivy compiler and runtime by default. This new rendering engine offers numerous advantages:
- Smaller bundle sizes
- Faster testing
- Better debugging
- Improved CSS class and style binding
- Improved type checking
- Improved build errors
- Improved build times, enabling AOT on by default
- Improved Internationalization
So, what is this IVY thing?
IVY it’s the new internal view rendering-engine, which means it’s the logic that brings your Angular app to life. It’s the thing that uses your components, your templates and which in the end turns all of them into instructions that run in the browser when you ship your finished Angular application. These are the instructions that change the DOM, update the DOM, render stuff to the page and so on. Therefore the fact that we have a new rendering engine means that it’s under the hood change. The API, the syntax you work with, the way that you create angular applications, the components, modules haven’t changed at all, they’re still the same as before. Everything you have learned about Angular still is valid and relevant.
So the amazing thing about this IVY compiler runtime (rendering engine) is that it offers smaller bundle sizes, especially for larger applications. With smaller bundle size our apps startup faster, once they did startup they are also extremely fast, all thanks to IVY.
The way that IVY reduces the app bundle size is by removing the parts of Angular that aren’t being used, which is done by Tree Shaking as well as by generating less code for each Angular component.
With these improvements, small apps and large apps can see the most dramatic size savings.
Improved template type-checking
In version 8 we had two modes of type checking, basic mode, and full mode. We can select different modes in angularCompilerOptions in tsconfig file by setting the flag fullTemplateTypeCheck to true for full mode and false for basic mode.
- fullTemplateTypeCheck — Activating this flag tells the compiler to check everything within your template (ngIf, ngFor, ng-template, etc)
Angular 9 introduces the new mode of type-checking the ‘strict mode’. Strict mode is a superset of full mode and is accessed by setting the strictTemplates flag to true.
- strictTemplates — Activating this flag will apply the strictest Type System rules for type checking.
To learn more about template type-checking options, see the Template type checking guide in the documentation.
Improved build errors
The other good thing that comes with version 9, is that they made the error messages more understandable and readable.
In version 8 or View Engine, a typical compiler error would look like the following:
In version 9 with Ivy, the same error looks like:
Angular 8vs9 bundle size and speed test
Let’s compare now the Angular version 8 with the latest release version 9. For this, I have generated a new project with Angular CLI.
ng new angular8vs9
Comparing the chunk size:
Angular 8: ng serve
Angular 9: ng serve
Comparing the load speed in the browser:
Angular 8:
Angular 9:
As you can see there is a significant difference between Angular 8 View-Engine and Angular 9 IVY, around 40% smaller and faster. This was just a starter project, the larger projects benefit most from this.
Update Angular to version 9
It is recommended first to update to the final release of Angular 8 to have the best update experience. For more details and guidance visit update.angular.io
Update to the latest version of Angular 8:
ng update @angular/cli@8 @angular/core@8
Update to Angular 9:
ng update @angular/cli @angular/core
Notes
- To review all changes with this update, including deprecated APIs, see Updating to Angular version 9 in the Angular documentation.
- AOT (Ahead-of-Time) compiler is enabled by default in version 9.
- Support for typescript 3.4, 3.5 deprecated. Now supports typescript 3.6
- If you are using AngularJS, you can directly upgrade to Angular 9. There is no need or knowledge requirement from older versions.
Final thoughts
It looks like we have a lot to look forward to with Angular v9. With IVY compiler now it opens the way for further improvements and even smaller bundle sizes and faster build times. I’m really excited about the future of Angular, what good things will come. Maybe in the future, they will get rid of ngModules, or they will make functional components (dummy components) just for the view. Meanwhile, let’s enjoy working with this version 9 and hope for the best in the future.
Dibran Xhymshiti, Software Developer at ABC TECH Group
https://www.linkedin.com/in/dibranxhymshiti/
Follow ABC TECH Group:
Website: www.abc-techgroup.com
LinkedIn: www.linkedin.com/company/abc-techgroup
Facebook: www.facebook.com/ABCtech2017
Twitter: https://twitter.com/ABCTECH_Group
