Angular's Future with Ivy

Angular's Future with Ivy

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

October 23, 2019
Tweet

Transcript

  1. Manfred Steyer SOFTWAREarchitekt.at Angular's Future with Ivy ManfredSteyer

  2. Contents 1) Ivy Today 2) Ivy Tomorrow?

  3. About me… • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and

    Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 3 Manfred Steyer Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops
  4. Ivy Today

  5. Angular Compiler HTML Template JavaScript Template Compiler

  6. Ivy Compiler leads to smaller Bundles Up to 40% less

    bundle size!
  7. [Brad Green, ngconf 2019 Keynote]

  8. DEMO

  9. Default with Angular 9

  10. Roadmap •Focus: Backwards compatibility Angular 9 (Fall 2019) •New features

    based upon ivy? Angular 10+ (Spring 2019)
  11. Only Smaller Bundles?

  12. Lazy Components

  13. Lazy Components

  14. Lazy Components

  15. Lazy Components

  16. Lazy Components

  17. DEMO

  18. Debugging

  19. Debugging

  20. DEMO

  21. Ivy's architecture has lots of potential for future Angular versions!

  22. Ivy Tomorrow?

  23. Warning: Private APIs ahead! Don't use them in production! No

    guarantees those features will ever land in Angular!
  24. Bootstrapping

  25. Bootstrapping today

  26. Bootstrapping with Ivy

  27. Web Components

  28. Ivy-based Web Component

  29. Ivy-based Web Component

  30. Angular Elements? • Wraps Angular Components as Web Components •

    Does currently not use private "Thrill Seeker"-APIs • Alternative: Hand-wrap "Thrill Seeker"-APIs (renderComponent) • Open Source for "Thrill Seeker"-APIs: ngx-elements
  31. Dynamic Components and Higher Order Components (HOC)

  32. Dynamic and Higher Order Components

  33. Dynamic and Higher Order Components

  34. Dynamic and Higher Order Components

  35. Dynamic and Higher Order Components

  36. DEMO

  37. Optional NgModules

  38. Optional NgModules

  39. Optional NgModules

  40. Public-APIs instead of NgModules

  41. Public-APIs instead of NgModules

  42. Public-APIs instead of NgModules

  43. Proposal

  44. DEMO

  45. Zone-less Change Detection

  46. What is Zone.js? • Key to automatic change detection in

    Angular • Monkey-patches all browser objects • Finds out when event handlers ran • Tells Angular to update data bindings
  47. Downsides • 100+ KB (uncompressed) • Web Components? • Magic

    • Zone.js cannot monkey patch native async/ await (ES 2017)
  48. Zone-less Change Detection

  49. DEMO

  50. Selected Ideas for Automatic Change Detection

  51. Push Pipe Using observables and a push pipe

  52. @ngrx/component (currently prototype)

  53. @ngrx/component (currently prototype)

  54. None
  55. Conclusion Short term: Smaller bundles Long term: Huge potential Lazy

    components HOC Optional NgModules Zone-less change detection
  56. "Your future hasn't been written yet!" Emmet Brown, PhD

  57. Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d

    Slides & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops