Angular Ivy: A deep dive into the heart of Ivy

Angular Ivy: A deep dive into the heart of Ivy

This talk will introduce you into the core principles of the new renderer Ivy. You will learn about the component factories and injection, the locality principle, how to develop higher order components and many more. All these will be shown by examples. After the talk you will have a basic understanding of how to use the new renderer and all the new options for developing Angular applications.

E54070c941e73381a3473df8e2aab667?s=128

Martina Kraus

June 04, 2019
Tweet

Transcript

  1. Ivy Engine@ Angular Berlin A deep dive into the heart

    of Angular Martina Kraus
  2. @MartinaKraus11 • Senior Frontend Dev @inovex GmbH • Trainer @Angular.DE

    • ngGirls • Angular Heidelberg Martina Kraus
  3. Agenda • Why do we need a new Engine? •

    How does it work? • How to use? 3 @MartinaKraus11
  4. Why ? 4

  5. A short history @MartinaKraus11 Ivy View Engine Template Engine Angular

    2 Angular 4 Angular 8
  6. Costliest Ressource on a webpage? 6 HTML ? CSS ?

    JavaScript ! Not only bundle size as well parsing and execution
  7. 7 AngularMix Keynote 2018 Public - Brad Green

  8. Benefits 8 @MartinaKraus11 Faster compilation Smaller Easier to debug

  9. And how ?

  10. 10 @MartinaKraus11 Faster compilation Smaller Easier to debug

  11. ViewEngine 11 @MartinaKraus11 cat.component.ts cat.component.scss cat.component.html cat.component.js cat.component.ngfactory.js

  12. Ivy 12 @MartinaKraus11 cat.component.ts cat.component.scss cat.component.html cat.component.js

  13. 13 @MartinaKraus11 Vikram Subramanian - ngIndia 2019

  14. How to make things smaller • Don’t pay for framework

    features you don’t use 14 @MartinaKraus11 • View Engine isn’t tree-shakable tree-shaking
  15. 15 @MartinaKraus11 ViewEngine Kara Erickson - ngConf 2018

  16. 16 @MartinaKraus11 ViewEngine Array of Instructions Kara Erickson - ngConf

    2018
  17. 17 @MartinaKraus11 Template Function calls elementStart() text() export function elementStart()

    Ivy Component definition calls Framework export function text()
  18. 18 @MartinaKraus11 Faster compilation Easier to debug Smaller

  19. Faster compilation • Compiling them only requires local information •

    If Component changes, it’s dependencies doesn’t have to recompile 19 @MartinaKraus11 Locality principle
  20. View Engine 20 @MartinaKraus11 Vikram Subramanian - ngIndia 2019

  21. Ivy 21 @MartinaKraus11 Vikram Subramanian - ngIndia 2019

  22. Ivy 22 @MartinaKraus11 Vikram Subramanian - ngIndia 2019

  23. Faster compilation • Ivy provides “stable” API to ship compiled

    through NPM No global compilation needed anymore Modules are already AOT 23 @MartinaKraus11
  24. 24 @MartinaKraus11 Faster compilation Easier to debug Smaller

  25. Easier to Debug • With cleaner API: improvements an Stack

    traces • Setting breakpoints in Templates ◦ Stepping into the instructions for the creation of the template 25 @MartinaKraus11
  26. 26 I want to use it!

  27. Angular Ivy in Version 8 • Opt-in • Backwards compatible

    27 @MartinaKraus11 ng new ivy-app --enable-ivy ng build --prod
  28. Inside compiler settings (tsconfig.json) 28 @MartinaKraus11 "angularCompilerOptions": { "enableIvy": true

    } // To get Ivy during debugging: ng serve --aot
  29. Summary • Angular’s new renderer reduces bundle size significantly •

    And compiles really fast ◦ Only re-compiles what changed 29 @MartinaKraus11
  30. Want more? Come and join me and more awesome speakers

    at 30 @MartinaKraus11 Angular Conference Berlin • 30 - 31 August, 2019 @BOLLE FESTSÄLE here in Berlin
  31. 31 Thank you!!!