AngularAngular CLIAngular JS TutorialsTechnical NewsWeb Development

Angular 8 Features and Performance tests.

In this article, we will be discussing about all characterstics of Angular 8 developed by Google. Recently in Google I/O Angular Developers annouces some long awaited features. Here we will be discussing about these features or characterstics of Angular 8.

There are not any major upgrade that requires your old version Angular application to rewrite code. Major changes are only on performance and backend process in builds creation. Let’s discuss some limelight points before starting characterstics of Angular 8.

Angular Team at Google has confirmed that Angular 8 is 45 % faster in performance as compare to old versions. It comes with completly new render engine to improve performance of your application.

Key Characterstics of Angular 8 Framework

Here are some of the key characterstics of Angular 8

Distinctive Loading in Angular 8

Currently Angular builds, we use single file for all modern browsers as well as old browsers. All Scripts are in same file for all types of loading based on browser. But in Angular 8, builds will have seperate files based on modern and old browsers.

Whenever user loads the application it will load specific files based browser. In that way, no more load on browsers to load and execute heavy scripts file.

In that way, we are distinctively loading angular application based on modern and old browsers.

Dynamic Imports of Lazy Load Routes

Now you can dynamically import modules for lazy routes with just simple syntax change in your routing files. If you are going to upgrade your old application then no need to change in code syntax. Angular devkit will automatically update syntax to latest that means all route files.

Here is the new syntax of Lazy Load Route that is changed.

Old Syntax look like

{ 
   path: 'login', 
   loadChildren: './login/login.module#LoginModule' 
}

New Syntax look like

{ 
   path: `login`, 
   loadChildren: () => import(`./login/login.module`).then(m => m.LoginModule) 
}

According new syntax –

Module imported dynamically and then execution starts which will directly improve performance. In previous version all execution and imports work parallely because of which it delay some time to load module.

CLI

Angular commands are improved a lot. You can see more smooth and faster execution time.

IVY

Angular Developer’s at Google, has been working for 2 year to rewrite new render engine that is IVY. This is one of the biggest Angular 8 characterstics that is to provide more fast and smooth experience.

Angular 8

Tree Shaking (Pay what you use)

If you have created an function abc() but you have not use it any where in Angular application. Then IVY automatically detects that function and remove it from bundle. Not only functions but imports as well.

Benefits

No more unnecessary routes and functions in builds which directly results in small bundles.

Code Splitting (Pay as you go)

In previous versions of angular, we are splitting code based on routes but now in Angular 8 code is splitting based on each component. It does not either it is a sub component or parent component. Each and every component will load in smaller chunks. Because of smaller of chunks your application will load more fast and smooth.

Benefits

Don’t need wait for all components to renders first for single screen.
Rendering less js will improve loading time

Progressive Hydration (Tree Shaking and Code splitting )

In progressive hydration, we can see the actual results of tree shaking and code splitting. You can see every component is loading in chunks. Even if you click any button that runs some functionality that will also loads in chunks.

Tags

Anil Mehra

I am Anil Mehra, a passionate, workaholic and a Full Stack Tech Savvy Programmer with true north towards growth. I have worked on 256 live projects in MNC. I am expertise in the field of Programming, Server Management, SEO, Blogging and SMO...

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button