The Future of Angular: Outlooks and Prophecies

The Future of Angular: Outlooks and Prophecies

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

September 23, 2020
Tweet

Transcript

  1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io The Future of Angular: 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 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