IVY: an overview
- 1. t IVY: AN OVERVIEW The state of the next-gen Angular compiler
- 3. IVY FACTS Next-gen compiling and rendering pipeline Complete rewrite of the current engine In Angular 8 only an opt-in Will be the default in Angular 9 93% complete
- 4. COMPILING AND RENDERING PIPELINE?? Translates our HTML templates into browser-feedable JS Currently adopting a Virtual DOM approach FROM THIS TO THAT
- 5. GOAL Application performance on mobile devices Faster initial loading TREE SHAKING Bundle size Low memory footprint INCREMENTAL DOM Improved memory allocation
- 6. TREE-SHAKING Build optimization technique Unused / unreferenced code not included into the final bundle Static analysis used during build to spot and remove unused code NOT USING A FEATURE? YOU DON’T PAY FOR THAT
- 7. New virtual tree every time a component gets rerendered Components compiled down to instructions VIRTUAL DOM INCREMENTAL DOM Image source: https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ Needs an interpreter Change only what is needed No need for interpreters
- 8. LOCALITY PRINCIPLE Components are compiled independently Each component includes only its own local information Partial changes are compiled instead of the whole project No need for metadata.json Allows shipment of precompiled code (npm anyone?)
- 9. CORE FEATURES Smaller apps Faster builds Easier build and template debugging
- 10. EASIER DEBUG - build output VIEW ENGINE IVY
- 11. EASIER DEBUG - template errors VIEW ENGINE IVY
- 12. WHAT NOW (1) Opt-in aims to help migrate to Ivy more than to showcase its features Focus has been until now on backward compatibility and stability Improved build size reductions for mid-to-large projects in the future
- 13. WHAT NOW (2) Image source: https://juristr.com/blog/2019/05/Angular-8-and-the-Future-NGConf-2019-Roundup/#ivy-features
- 14. OPTING IN New projects: ng new whatever-name --enable-ivy Existing projects tsconfig.json: angularCompilerOptions: { enableIvy: true } angular.json: architect.build.options: { aot: true } use @angular/core@next
- 15. TEST DRIVE (1) VIEW ENGINE IVY ng serve ng serve (after edits) ng build --prod build size ng test
- 16. TEST DRIVE (2) ng serve VIEW ENGINE IVY (6% faster)
- 17. TEST DRIVE (3) ng serve (after edits) ng test VIEW ENGINE IVY (216% slower!) VIEW ENGINE IVY (19% faster)
- 18. TEST DRIVE (4) ng build --prod VIEW ENGINE IVY (42% faster) build size (7% smaller)
- 19. Flaminia Montemurro UI Designer / Front-end Developer Martina Carta UI Designer / Front-end Developer Raul Valentini Full-stack Developer CREDITS
- 20. Q & A
- 21. THANK YOU