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.

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!!!