Angular's Future with Ivy

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
PRO
October 23, 2019
Programming
1
930

Angular's Future with Ivy

Example: https://github.com/manfredsteyer/ivy-potential

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

October 23, 2019
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
190
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
140
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
250
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
74
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
83
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
190
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
110
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230

Other Decks in Programming

See All in Programming
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho525
0
130
6a87c9bfc71c805c3f5f248b359365d3?s=48 mu2in
0
130
4782d92d3deeb4ab527ba6f867bf07c3?s=48 mizdra
7
4.7k
51ae114c2809ff0d2945c751efa7cffc?s=48 canon1ky
3
340
C90bac78c0fb61105cfd8239767f903d?s=48 o0h
1
1.4k
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
9
4.5k
51105482dc2e3d01b3ba64c9751d75c6?s=48 showwin
0
110
99d4c0ed3c8027ea1c37b53d6441d042?s=48 sullis
0
110
E37b4344ef4bfd0fc4826c04971e54fb?s=48 nrslib
20
13k
D2f212ce418f3daa29c23914c9b6892b?s=48 kenmaz
1
100
285cc95c4c9fe056b03afca581533266?s=48 fkubota
1
390
04df7340898eac3a0536d3b47c55501c?s=48 hirotokirimaru
1
390

Featured

See All Featured
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
114
7.1k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
26
1.3k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.3k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
609
54k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
120k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
260
11k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
1.4k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
297
39k
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
287
110k
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
15k

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