Angular latest version - Angular 8 & new ivy compiler

Angular is the most popular web application framework used worldwide. The latest versions of angular are the best topic for discussion at my workplace. Developers will be eyeing all the periodic updates angular team came up with. The latest release is Angular 8 with ivy compiler is gaining attention around. Angular 8 aims for reducing time and speed during compiling of angular project.

What is ivy?

Ivy is a renderer. Also knows as new template compiler for Angular. It is a new compiler which has better speed and more flexibility. Ivy is not fully implemented in Angular8 but runs better than previous versions. With ivy, angular translates the code in the format which our browser will understand and relate to.
Demo example
The bundle size of an angular application without ivy was 36 KB whereas using ivy it is 2-3 KB. The improvement in the size of the application is remarkable. Speed also comes with this new compiler as with ivy it took 2 seconds instead of 4 seconds. The code which is generated by ivy is much more simple, easy to understand, readable and has a better debugging process.

Advantages of using ivy

  • The smaller size of builds.
  • Quick rebuild time with local concept mentioned below.
  • Improved backward compatibility.
  • Pre-compile code shipment.
  • No requirement for metadata.json.
  • Payload size is enhanced.
  • Better flexibility application.
  • Once the ivy is completed, our application becomes more robust to use and modify.
  • Simpler and fast application.
  • Less compile time.
  • Debugging is easy with the new compiler. To show an error during compile time rather than run time.

Concepts of ivy compiler

  • Local - According to this concept, if we make changes in two components say x and y of our angular project A which has total ten components. Then it will recompile only the changed components that is x and y in our case. It will not recompile the whole project code once again. It leads to a faster compilation of code. In the previous version, the compiler compiles all the components if we make a single change to our code. It was a time-consuming process. Moreover, now the compiler is allowed to use the information defined by the component decorator and its class. The new ivy engine will not produce extra files like metadata.json and component.factory.js. 
  • Tree Shakable - To remove the unused part of the code is another concept introduced with the new version. Our application will remove all the unused variables, components, services written in our code. Now our application can run with a small bundle and better run time. 

What's new

Differential loading of modern javascript
In simple words, it means sending newer javascript code to newer browsers and stable legacy code to older browsers. The angular CLI is going to produce different bundles for legacy(ES5) and modern JS(ES- 2015+). The code got translates into two parts - modern syntax and polyfills. In new browsers, we need only modern syntax with limited polyfills. But in legacy old browsers we will need both transpiled code as well as the polyfills to make things happen. 

Script tag for different browsers
For a modern browser, we will give type module. The modern browser will know only fancyModernBundle. So this module type will not be recognized by the legacy browser and it will not load this bundle.
<script src="fancyModernBundle.js" type="module"></script>

For a legacy browser, it will not interpret the meaning of nomodule attribute. So it will load this script. In a modern browser, it will recognize this nomodule attribute. Hence this script will not load in the latest version of browsers.
<script src="legacyBundle.js" nomodule></script>

With differential loading, we save 8-20% bundles in modern browsers. That's great with Angular 8.