Angular's Future with Ivy

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

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