Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Future of Angular: Outlooks and Prophecies

The Future of Angular: Outlooks and Prophecies

Manfred Steyer

September 23, 2020
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @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)
  2. @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(…)
  3. @ManfredSteyer Why Does This Work with Ivy? With Ivy, the

    component is self-describing Remember: Component.ɵcmp Principle: Locality Before Ivy: Metadata within NgModules
  4. @ManfredSteyer Dynamic Component export function create() { class DynamicComponent implements

    OnInit { […] } […] DynamicComponent.ɵcmp = […]; […] }
  5. @ManfredSteyer Dynamic Component export function create() { class DynamicComponent implements

    OnInit { […] } […] DynamicComponent.ɵcmp = […]; return DynamicComponent; }
  6. @ManfredSteyer Higher-Order Component export function create(otherComponent: Type<any>) { class DynamicComponent

    implements OnInit { […] } […] DynamicComponent.ɵcmp = […]; return DynamicComponent; }
  7. @ManfredSteyer Higher-Order Component export function create(otherComponent: Type<any>) { class DynamicComponent

    implements OnInit { […] } […] DynamicComponent.ɵcmp = […]; return DynamicComponent; } Call otherComponent in template function
  8. @ManfredSteyer Mark Components as Dirty import { ɵmarkDirty } from

    '@angular/core'; […] ɵmarkDirty(this /* <-- Component */);
  9. @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