Ivy is Angular's next generation compiler and renderer that aims to make applications smaller, faster to load, and use less memory. Some key goals of Ivy include faster initial loading, reduced bundle sizes, lower memory footprint, improved memory allocation, and faster compilation times. Ivy generates template instructions directly from templates rather than generating intermediate metadata, making the compilation process more efficient. It also uses incremental DOM for rendering, which creates and updates DOM trees using in-place instructions rather than full virtual DOM comparisons on each change. Tree shaking also works more effectively with Ivy due to its generation of smaller, more atomic functions from templates.

1. Angular Ivy- An Overview
Jalpesh Vadgama
@Jalpesh
Co-Founder, FutureStack Solution

2. About Me
• More than 14 years of experience in Web Development, Cloud Solutions and
Enterprise Grade Applications.
• Co-Founder of Future Stack Solution http://www.futurestacksolution.com
• Awarded Microsoft MVP 8 times. Currently MVP in Visual Studio and Development
Technologies.
• A community guy love to network with new people!.
• An enthusiast developer trying to learn everyday something new

3. Why we need new compiler?

4. What is the costliest resource on web?
HTML? CSS?
JavaScript. Yes it is. Not
only JavaScript file size
size but it also takes time to
parse and render
Ref: https://www.youtube.com/watch?v=Ptmp6wJyuDc&t=186s

5. Why we need new compiler?
• More than 50% percent of traffic comes from Smartphone and tablets.
• We need to do something to make our
application to run faster on this device

6. What we can do cater this?

7. CDN Lazy Loading PWA

8. Angular Compiler short historyVersion2
Template
Compiler
Version4
View Engine
(Renderer2)
Version8
Ivy

9. What is Ivy?
• Ivy is Next Generation Renderer and Compiler
• Ivy is going to smaller, simpler and faster as quoted by Angular team.
• In the demo shown by Misko ngConf 2018 the Hello World application was merely 3.2Kb
• It will be by default available with Angular 9 and with Angular 8 it’s opt in

10. Goals For Ivy
• Faster initial loading
• Less Bundle Size
• Low Memory Footprint
• Improved Memory allocation
• Faster Compilation time

11. Comparison between Renderer2 and Ivy
• Renderer2 is view engine for view engine and compiler from Version4 and
quite different from IVY
• We are going to see some key difference between them

12. Renderer2 Pipe Line
• Currently in Renderer2 pipeline, the template HTML that we’ve written runs through the
Angular Compiler and Generates Highly optimized JS Code.
• At run time, this Highly optimized JS Code which contains your data structure is passed to
Angular interpreter which uses data to determine how to create DOM.
Template
HTML
Template
Data
Angular
Interpreter
DOM

13. Ivy Pipeline
• In Ivy, instead of template data and passing to interpreter that makes decision which
operation to run, Ivy generates a set of instructions template instructions directly.
• This instruction will do the work of creating DOM on their own
Template
HTML
Template
Instructions
DOM

14. No metadata.json
• Renderer2 does the static analysis of code and create a JSON file called
metadata.json that could be used to generate the compilation instructions
• This json file with data then sent to Angular interpreter in order to be translated into
something readable by the DOM.
• Ivy Compresses this step and template HTML is turns into instructions and that are
readable by DOM.

15. Renderer2 Compilation
HelloWorld.Component.ts
HelloWorld.Component.css
HelloWorld.Component.html
HelloWorld.Component.js
HelloWorld.Component.ngfactory.js

16. IVY Compilation
HelloWorld.Component.ts
HelloWorld.Component.css
HelloWorld.Component.html
HelloWorld.Component.js
HelloWorld.Component.ngfactory.js
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

17. Ivy Compilation
• For Example, Following class declaration,
Source: https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md

18. Ivy Compilation
• Will compile into following

19. Virtual DOM
• Every component creates a Virtual DOM Tree every time it gets
rendered. The framework which uses Virtual DOM compares tree
every time it get renders and applies a series of Transofrmation

20. Virtual DOM
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

21. Incremental DOM
• Incremental DOM is internally used by Google
• In Incremental DOM, Every components get compiled into series of
instructions. This creates DOM Trees and update them in-place when
data changes

22. Incremental DOM
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36

23. Tree Shaking

24. Tree Shaking
• The Tree Shaking process can be used to reduce your application size.
• Tree Shaking is a process in which unused module exports removed. It works on both
source and library modules
• In order for the Tree Shaking process work properly, Angular application requires
Ahead of Time Compilation
• Command : ng build --prod --aot=true
• Tree shaking is performed by both Renderer2 and Ivy

25. Tree Shaking on Renderer2
• In case of Renderer2, if we have imported a function and hidden by some condition
flag still it’s going to included by Rednerer2. See the below image

26. Tree Shaking on Ivy
• Ivy, on the other hand, breaks things down into smaller, more atomic functions. These
atomic 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.

27. How to Enable Ivy on Angular8
• In TSConfig.json

28. કોઈ પ્રશ્ન ?/ Q & A

29. આભાર / Thanks
• Email: jalpesh@futurestacksolution.com
• Blog: https://www.dotnetjalps.com
• YouTube: http://bit.ly/codewithjv
• GitHub: https://github.com/jalpeshvadgama
• Twitter: @Jalpesh