Angular Ivy Renderer
Advance Content
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
About Me
Ivy
Smaller
Faster
Simpler
@pankajparkar
Ivy Impact
Source: https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c
@pankajparkar
Renderer
Renderer
Renderer 2
Renderer 3
(Ivy)
Angular 2
Angular 4 & 6
Angular 7
- Responsible for code of highly optimised code
@pankajparkar
Renderer 2 Code Generation
Build time AOT compiled
Runtime AOT
Runtime JIT compilation
@pankajparkar
ng-conf 2018 keynote
Template Generation
@pankajparkar
ng-conf 2018 keynote
Ivy Rendering Pipeline
Build AOT
Runtime AOT
Runtime JIT
@pankajparkar
ng-conf 2018 keynote
@pankajparkar
@Directive => defineDirective()
@Directive => defineAbstractDirective()
@Pipe => definePipe()
@Injectable => defineInjectable()
@NgModule => defineInjector()
Ivy Code Generation
@pankajparkar
Angular next generation Renderer
- Locality
- Providers are tree shakable
- Improved Debugging experience
- 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
@pankajparkar
@pankajparkar
References
-
https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c
-
https://lacolaco.hatenablog.com/entry/2018/03/11/134431
-
https://blog.angularindepth.com/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection-876751edd9fd
-
https://herringtondarkholme.github.io/2018/02/19/angular-ivy/
-
https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md
-
https://www.youtube.com/watch?v=dIxknqPOWms&feature=youtu.be
@pankajparkar