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

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

  2. https://lacolaco.hatenablog.com/entry/2018/03/11/134431

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

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

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

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

@pankajparkar

Made with Slides.com