Angular Ivy Renderer

Pankaj Parkar

Technical Lead

Synerzip Softech India PVT LTD

• Microsoft MVP

• Opensource Contributor

• Stackoverflow Topuser for Angular and AngularJS

• 100k+ reps on Stackoverflow

• .Net and Angular Developer

• Currently working on React, GraphQL & Nodejs

@pankajparkar

Ivy

Smaller

Faster

Simpler

@pankajparkar

Ivy Impact

Source: https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c

@pankajparkar

Renderer

• Responsible for code of highly optimised code

@pankajparkar

Renderer 2 Code Generation

ng-conf 2018 keynote

Runtime JIT compilation

@pankajparkar

Template Generation

@pankajparkar

Ivy Rendering Pipeline

Build AOT

Runtime AOT

Runtime JIT

@pankajparkar

@pankajparkar

Ivy Code Generation

@pankajparkar

Angular next generation Renderer

• Locality
• Providers are tree shakable
• No breaking changes,  for Render 3 migration

@pankajparkar

Locality

• Just compile one file
• NPM can ship AOT code with ivy
• No metadata.json needed
• Faster compilation
• Leading toward meta-programming paradigm

@pankajparkar

Tree Shakable Providers

@pankajparkar

Tree Shakable Providers

@pankajparkar

Demo Time

• Hello World Application using Ivy
• Todo Application Ivy

@pankajparkar

Q & A

References

1. https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c

2. https://blog.angularindepth.com/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection-876751edd9fd

3. https://herringtondarkholme.github.io/2018/02/19/angular-ivy/

4. https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md

5. https://www.youtube.com/watch?v=dIxknqPOWms&feature=youtu.be