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
   

   View Slide

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

   View Slide

3. Agenda
   ● Why do we need a new Engine?
   ● How does it work?
   ● How to use?
   3
   @MartinaKraus11
   

   View Slide

4. Why ?
   4
   

   View Slide

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

   View Slide

6. Costliest Ressource on a webpage?
   6
   HTML ?
   CSS ?
   JavaScript !
   Not only bundle size as well parsing
   and execution
   

   View Slide

7. 7
   AngularMix Keynote 2018 Public - Brad Green
   

   View Slide

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

   View Slide

9. And how ?
   

   View Slide

10. 10
    @MartinaKraus11
    Faster compilation
    Smaller
    Easier to debug
    

    View Slide

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

    View Slide

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

    View Slide

13. 13
    @MartinaKraus11
    Vikram Subramanian - ngIndia 2019
    

    View Slide

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
    

    View Slide

15. 15
    @MartinaKraus11
    ViewEngine
    Kara Erickson - ngConf 2018
    

    View Slide

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

    View Slide

17. 17
    @MartinaKraus11
    Template
    Function calls
    elementStart()
    text()
    export function elementStart()
    Ivy
    Component definition calls Framework
    export function text()
    

    View Slide

18. 18
    @MartinaKraus11
    Faster compilation
    Easier to debug
    Smaller
    

    View Slide

19. Faster compilation
    ● Compiling them only requires local information
    ● If Component changes, it’s dependencies doesn’t
    have to recompile
    19
    @MartinaKraus11
    Locality principle
    

    View Slide

20. View Engine
    20
    @MartinaKraus11
    Vikram Subramanian - ngIndia 2019
    

    View Slide

21. Ivy
    21
    @MartinaKraus11
    Vikram Subramanian - ngIndia 2019
    

    View Slide

22. Ivy
    22
    @MartinaKraus11
    Vikram Subramanian - ngIndia 2019
    

    View Slide

23. Faster compilation
    ● Ivy provides “stable” API to ship compiled through
    NPM
    No global compilation needed anymore
    Modules are already AOT
    23
    @MartinaKraus11
    

    View Slide

24. 24
    @MartinaKraus11
    Faster compilation
    Easier to debug
    Smaller
    

    View Slide

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
    

    View Slide

26. 26
    I want to
    use it!
    

    View Slide

27. Angular Ivy in Version 8
    ● Opt-in
    ● Backwards compatible
    27
    @MartinaKraus11
    ng new ivy-app --enable-ivy
    ng build --prod
    

    View Slide

28. Inside compiler settings (tsconfig.json)
    28
    @MartinaKraus11
    "angularCompilerOptions": {
    "enableIvy": true
    }
    // To get Ivy during debugging:
    ng serve --aot
    

    View Slide

29. Summary
    ● Angular’s new renderer reduces bundle size
    significantly
    ● And compiles really fast
    ○ Only re-compiles what changed
    29
    @MartinaKraus11
    

    View Slide

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
    

    View Slide

31. 31
    Thank you!!!
    

    View Slide