Angular‘s Future with Ivy @ngPoland 2020

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Angular‘s Future with Ivy: Outlooks

   and Prophecies

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