Angular's Future with Ivy: Outlook and Prophecies @bastacon in Frankfurt, Feb 2020

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

Transcript

1. @ManfredSteyer ManfredSteyer
2. @ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io Angular Trainings and Consultancy Frankfurt, Munich, Vienna In-House: everywhere https://ANGULARarchitects.at/workshops Google Developer Expert for Angular Trusted Collaborator in the Angular Team Manfred Steyer
3. @ManfredSteyer Contents 1) Ivy Today 2) Ivy Tomorrow?
4. @ManfredSteyer Ivy Today
5. @ManfredSteyer Angular Compiler HTML Template JavaScript Template Compiler
6. @ManfredSteyer Ivy Compiler Leads to Smaller Bundles Up to 40% less bundle size!
7. @ManfredSteyer [Brad Green, ngconf 2019 Keynote]
8. @ManfredSteyer DEMO
9. @ManfredSteyer Default with Angular 9
10. @ManfredSteyer Roadmap •Focus: Backwards compatibility Angular 9 •New features based upon ivy? Angular 10+
11. @ManfredSteyer Only Smaller Bundles?
12. @ManfredSteyer Lazy Components
13. @ManfredSteyer Lazy Components
14. @ManfredSteyer Lazy Components
15. @ManfredSteyer Lazy Components
16. @ManfredSteyer Lazy Components
17. @ManfredSteyer DEMO
18. @ManfredSteyer Ivy's architecture has lots of potential for future Angular versions!
19. @ManfredSteyer Ivy Tomorrow?
20. @ManfredSteyer Warning: Private APIs ahead! Don't use them in production! No guarantees these features will ever land in Angular!
21. @ManfredSteyer Bootstrapping
22. @ManfredSteyer Bootstrapping today
23. @ManfredSteyer Bootstrapping with Ivy
24. @ManfredSteyer Web Components
25. @ManfredSteyer Ivy-based Web Component
26. @ManfredSteyer Ivy-based Web Component
27. @ManfredSteyer 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
28. @ManfredSteyer Dynamic Components and Higher Order Components (HOC)
29. @ManfredSteyer Dynamic and Higher Order Components
30. @ManfredSteyer Dynamic and Higher Order Components
31. @ManfredSteyer Dynamic and Higher Order Components
32. @ManfredSteyer Dynamic and Higher Order Components
33. @ManfredSteyer DEMO
34. @ManfredSteyer Optional NgModules
35. @ManfredSteyer Optional NgModules
36. @ManfredSteyer Optional NgModules
37. @ManfredSteyer Public-APIs instead of NgModules
38. @ManfredSteyer Public-APIs instead of NgModules
39. @ManfredSteyer Public-APIs instead of NgModules
40. @ManfredSteyer Proposal
41. @ManfredSteyer DEMO
42. @ManfredSteyer Zone-less Change Detection
43. @ManfredSteyer 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
44. @ManfredSteyer Downsides • 100+ KB (uncompressed) • Web Components? • Magic • Zone.js cannot monkey patch native async/ await (ES 2017)
45. @ManfredSteyer Zone-less Change Detection
46. @ManfredSteyer DEMO
47. @ManfredSteyer Selected Ideas for Automatic Change Detection
48. @ManfredSteyer Push Pipe Using observables and a push pipe
49. @ManfredSteyer @ngrx/component (currently prototype)
50. @ManfredSteyer @ngrx/component (currently prototype)
51. @ManfredSteyer
52. @ManfredSteyer Conclusion Short term: Smaller bundles Long term: Huge potential Lazy components HOC Optional NgModules Zone-less change detection
53. @ManfredSteyer "Your future hasn't been written yet!" Emmet Brown, PhD
54. @ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops