The Future of Angular with Ivy

Examples: https://github.com/manfredsteyer/basta_2019_ivy_elements

Article Series (2 articles so far): https://www.softwarearchitekt.at/aktuelles/architecture-with-ivy-a-possible-future-without-angular-modules/

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io The Future of Angular with Ivy
2. @ManfredSteyer Ivy Compiler Leads to Smaller Bundles Up to 40% less bundle size!
3. @ManfredSteyer
4. @ManfredSteyer DEMO
5. @ManfredSteyer
6. @ManfredSteyer Contents Lazy Components Dynamic Components Higher Order Components Standalone Components Zone-less Angular
7. @ManfredSteyer Manfred Steyer
8. @ManfredSteyer
9. @ManfredSteyer Lazy Load an Ivy Component import('../dashboard-tile/dashboard-tile.component').then(m => { […] }
10. @ManfredSteyer Lazy Load an Ivy Component import('../dashboard-tile/dashboard-tile.component').then(m => { const comp = m.DashboardTileComponent; […] }
11. @ManfredSteyer Lazy Load an Ivy Component import('../dashboard-tile/dashboard-tile.component').then(m => { const comp = m.DashboardTileComponent; const factory = this.cfr.resolveComponentFactory(comp); […] } ComponentFactoryResolver (Injected)
12. @ManfredSteyer Lazy Load an Ivy Component import('../dashboard-tile/dashboard-tile.component').then(m => { const comp = m.DashboardTileComponent; const factory = this.cfr.resolveComponentFactory(comp); const compRef = this.viewContainer.createComponent( factory, null, this.injector); } Get via @ViewChild(…)
13. @ManfredSteyer DEMO
14. @ManfredSteyer
15. @ManfredSteyer Why Does This Work with Ivy? With Ivy, the component is self-describing Remember: Component.ɵcmp Principle: Locality Before Ivy: Metadata within NgModules
16. @ManfredSteyer Potential Lazy Loading ;-) Partial Hydration
17. @ManfredSteyer Don't use them in production! No guarantees these features will ever land in Angular!
18. @ManfredSteyer
19. @ManfredSteyer Dynamic Component export function create() { […] }
20. @ManfredSteyer Dynamic Component export function create() { class DynamicComponent implements OnInit { […] } […] }
21. @ManfredSteyer Dynamic Component export function create() { class DynamicComponent implements OnInit { […] } […] DynamicComponent.ɵcmp = […]; […] }
22. @ManfredSteyer Dynamic Component export function create() { class DynamicComponent implements OnInit { […] } […] DynamicComponent.ɵcmp = […]; return DynamicComponent; }
23. @ManfredSteyer Higher-Order Component export function create(otherComponent: Type<any>) { class DynamicComponent implements OnInit { […] } […] DynamicComponent.ɵcmp = […]; return DynamicComponent; }
24. @ManfredSteyer Higher-Order Component export function create(otherComponent: Type<any>) { class DynamicComponent implements OnInit { […] } […] DynamicComponent.ɵcmp = […]; return DynamicComponent; } Call otherComponent in template function
25. @ManfredSteyer DEMO
26. @ManfredSteyer Potential More dynamic Framework extensions
27. @ManfredSteyer
28. @ManfredSteyer Composing Components DashboardTileComponent 3x BarComponent
29. @ManfredSteyer Defining a Component's "Neighborhood" DashboardTileComponent.ɵcmp
30. @ManfredSteyer Defining a Component's "Neighborhood" DashboardTileComponent.ɵcmp.directiveDefs = [ […] ];
31. @ManfredSteyer Defining a Component's "Neighborhood" DashboardTileComponent.ɵcmp.directiveDefs = [ BarComponent.ɵcmp ]; Type Assertions ("type casts") not shown here …
32. @ManfredSteyer Grouping Components import { BarComponent } from "./bar.component"; export const BAR_COMPONENTS = [ BarComponent, […] ]; index.ts
33. @ManfredSteyer @Component({ […], deps: [ ...BAR_COMPONENTS ] }) export class DashboardTileComponent { […] } Proposal
34. @ManfredSteyer DEMO
35. @ManfredSteyer
36. @ManfredSteyer Bootstrapping platformBrowserDynamic().bootstrapModule(AppModule);
37. @ManfredSteyer Bootstrapping ɵrenderComponent(MyAngularComponent);
38. @ManfredSteyer Potential Project Structure: Libs and/or Barrels (index.ts) Standalone Components -> Web Components
39. @ManfredSteyer
40. @ManfredSteyer What is Zone.js? Key to automatic change detection Monkey-patches all browser objects
41. @ManfredSteyer Downsides 100+ KB (uncompressed): Web Components? Money Patching: Magic Cannot monkey patch native async/ await (ES 2017)
42. @ManfredSteyer Mark Components as Dirty import { ɵmarkDirty } from '@angular/core'; […] ɵmarkDirty(this /* <-- Component */);
43. @ManfredSteyer DEMO
44. @ManfredSteyer
45. @ManfredSteyer
46. @ManfredSteyer
47. @ManfredSteyer
48. @ManfredSteyer
49. @ManfredSteyer
50. @ManfredSteyer Conclusion Fine grained lazy loading --> Partial hydration Dynamic and higher order components --> Framework extensions Standalone components --> Structure with barrels and libs Zone-less Change Detection --> Future proof General: More lightweight
51. @ManfredSteyer "Your future hasn't been written yet!" Emmet Brown, PhD
52. @ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere