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

The Future of Angular And Your Architectures w/ Ivy @ijs Online 2020

The Future of Angular And Your Architectures w/ Ivy @ijs Online 2020

Manfred Steyer

April 20, 2020
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer Hello World: Your Code @Component({ selector: 'app-root', […] })

    export class AppComponent { title = 'hello-world'; }
  2. @ManfredSteyer Compiled Version (ES2015) AppComponent.ɵcmp = ɵɵdefineComponent({ type: AppComponent, selectors:

    [["app-root"]], decls: 2, vars: 1, template: function AppComponent_Template(rf, ctx) { […] }, encapsulation: 2 });
  3. @ManfredSteyer Template function AppComponent_Template(rf, ctx) { if (rf & 1)

    { // 1 == Create ɵɵelementStart(0, "h1"); ɵɵtext(1); ɵɵelementEnd(); } […] }
  4. @ManfredSteyer Template function AppComponent_Template(rf, ctx) { if (rf & 1)

    { ɵɵelementStart(0, "h1"); ɵɵtext(1); ɵɵelementEnd(); } if (rf & 2) { // 2 == Update ɵɵadvance(1); ɵɵtextInterpolate(ctx.title); } }
  5. @ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io Angular Trainings and Consultancy

    Frankfurt, Munich, Vienna, Remote In-House: everywhere https://ANGULARarchitects.at/workshops Google Developer Expert for Angular Trusted Collaborator in the Angular Team Manfred Steyer
  6. @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)
  7. @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(…)
  8. @ManfredSteyer Why Does This Work with Ivy? With Ivy, the

    component is self-describing Remember: Component.ɵcmp Principle: Locality Before Ivy: Metadata within NgModules
  9. @ManfredSteyer Warning: Private APIs ahead! Don't use them in production!

    No guarantees these features will ever land in Angular!
  10. @ManfredSteyer Dynamic Component export function create() { class DynamicComponent implements

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

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

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

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

    '@angular/core'; […] ɵmarkDirty(this /* <-- Component */);
  15. @ManfredSteyer Conclusion Fine grained lazy loading --> Partial hydration Dynamic

    and higher order components --> Framework extensions Standalone components --> Structure with barrels and libs Also: Big deal for web components
  16. @ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides

    & Examples Public: Frankfurt, Munich, Vienna In-House: everywhere