Whats new in Angular 8

Angular 8 was released in May 2019 and  the key features of angular 8 are as follows in brief,

• Differential loading
• Dynamic imports for lazy loading
• Ivy Rendering
• Bazel

Differential Loading:

Differential loading is a technique which will automatically make your angular apps more performant now. 

How does this work ?

Well it turns out with version 8 when you build an application for production two bundles are created. One bundle for the modern browsers that support es6 and above and another separate bundle for older browsers that only support es5.

When your app is opened in the browser the correct bundle is automatically loaded which means for the newer browsers which do support es6 plus they now will be loading lesser code and lesser number of polyfills which will be a great performance improvement from what has been gathered so far.

The bundle size reduced by seven to twenty percent depending on the amount of modern JavaScript features that were being made use of again. This is a feature which doesn't involve you to add any code simply running ng build dash dash prod will take care of everything so differential loading for performance improvement.

Dynamic imports for lazy loading:

Let me quickly give you an overview of lazy loading routes in angular.

When you create a decent-sized application you're going to have lot of routes with lots of feature modules. Loading the bundle for your entire application when the user is visiting your site might take a toll on the performance instead what would be better is if we initially load the code that is necessary only for the initial route and then load the code for the other routes only when the user navigates to those routes for the first time doing so will again improve the performance.

With version 8 there is nothing new in the concept of lazy loading itself but the syntax has changed.

Previously the syntax was involving a custom string so a lazy loaded Road config would look something like this now in version 8 though lazy loaded routes will use the standard dynamic import syntax so the syntax which was custom to angular has now been migrated into the industry standard what this allows is for editors and linters to complain if there is a mistake.

If you are not quite familiar with lazy loading don't worry about it if you are currently using lazy routes the ng upgrade command should take care of the change in syntax for you

Ivy Rendering:

Ivy is the rendering engine that the angular team is currently working on. It basically handles translating the templates and components into regular HTML and JavaScript that the browser's can understand.

Ivy is the latest rendering engine and will enable cool features in the future but for now even with the release of version 8 it is still not stable. 

Currently the focus is to ensure nothing breaks in the existing applications. Probably with version 9 it might be the default engine but angular 8 does offer a switch to opt in to Ivy when generating a new application using the CLI. 

You can add the enable Ivy flag so ng new demo which is the project name followed by the option enable ivy.

Ivy has the potential to generate considerably smaller bundles make incremental compilation easier and is also going to be the basis for future innovations in angular. It will soon be stable. 

Bazel:

Finally a quick note on Bazel which is basically a build tool which again like Ivy is still only experimental in version aid so I am NOT going to go into the details of Bazel but I recommend you to give it a 5 minute read just to get an understanding of what it actually is so Ivy and basil both something to keep an eye out for in the next release.