Why you should move to Ivy, A powerful Angular engine!

As front end developers, it has always been a great concern for us to load our website as fast we can. Different slow internet connections unfortunately make this challenge even harder.
I personally used several possible solutions available in previous versions of Angular till Angular 7 to reduce the bundle size of web app. But thanks to new amazing Angular Ivy that comes with a lot of new features in Angular 8.
What is Ivy ?
Angular Ivy is:
A next-generation compilation and rendering pipeline, which reduces the bundle size, loads faster in slower networks and is simple to use.
I will try to make things as simple as possible for you to understand Ivy without getting into cranky details 😃
Rendering Engine of Ivy
Pipeline:
Without using Ivy, Renderer2 engine is used for creating pipeline, in which the template HTML runs through the Angular compiler and generates highly optimized JS code that represents the structure of your template. At run time, this data structure is passed to the Angular interpreter, which uses the data to determine how to create the DOM.

However, using Ivy, Instead of generating template data and passing it into an interpreter that then makes decisions on which operations to run ,we generate a set of template instructions directly. These instructions will do the work of creating the correct DOM on their own. So we no longer need an interpreter that will check whether every operation is needed.

Tree Shaking:
Tree shaking can be understand as:
It is a step in a build process that removes unused code from a code base. You can visualize the physical shaking of a tree and the remaining dead leaves falling off of the tree.
Tree Shaking is performed by both Renderer2 and Ivy. But in some cases suppose, we have imported a function and is hidden by some false conditional, but that function will still get included in the bundle, even though it’s never called for Renderer2.

Ivy, on the other hand, breaks things down into smaller functions. These functions make the renderer code much more friendly to tree-shaking, because they generate only the code you need from the template you’ve written.
Why Angular Ivy ?
Ivy is a complete rewrite of the compiler (and run time) in order to:
- 🚀reach better build times (with a more incremental compilation)
- 🔥reach better build sizes (with a generated code more compatible with tree-shaking)
- 🔓unlock new potential features (meta programming or higher order components, lazy loading of component instead of modules…)

Enough talk, Let’s do some real stuff. Excited ? 🙌
Adding Ivy to your project
Adding Ivy to your Angular project is a piece of cake 🍰
Steps: (for creating new project)
- Use
@angular/core@nextversion of Angular (8.1.x), rather than@angular/core@latest(8.0.x), as it contains all the latest bug fixes and improvements. - Open terminal and create new project.
ng new ivy-app --enable-ivyThe new project is automatically configured for Ivy. Specifically, the enableIvy option is set to true in the project's tsconfig.app.json file.
Steps: (for existing project)
- Update angular-cli and nodeJs with respective compatible version supporting Angular 6 packages
- set the
enableIvyoption in theangularCompilerOptionsin your project'stsconfig.app.json.
{
“compilerOptions”: { … },
“angularCompilerOptions”: {
“enableIvy”: true
}
}3. AOT compilation with Ivy is faster and should be used by default. In the angular.json work space configuration file, set the default build options for your project to always use AOT compilation.
{
“projects”: {
“my-existing-project”: {
“architect”: {
“build”: {
“options”: {
…
“aot”: true,
}
}
}
}
}
}Summary
What we have just learned:
- Ivy, the 3rd generation of Angular compiler is awesome!
It is backward compatible and by using it we can get smaller bundles, easier to debug API, faster compilation and dynamic loading of modules and components. - How Ivy took advantage of Incremental DOM of Angular for tree shaking.
- The future of Angular with Ivy looks exciting with cool and exciting features like HOC (which we will cover soon)
- Give it a TRY! It’s just as simple as setting the
enableIvyflag totrue!
Thanks for reading!
If you liked this, click the 👏 icon so other people will see this here on Medium.
Your appreciation will motivate me to publish more articles that are on my pipeline. 😊