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

A Deep Look at Angular Elements

A Deep Look at Angular Elements

Manfred Steyer

May 01, 2019
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz

    ✓ 64 KB RAM ✓ Disks with 170 KB
  2. @ManfredSteyer Contents • Web Components and Angular Elements • Polyfills

    • Dynamically adding Web Components • Loading external Web Components • Zone-less Change Detection • Content Projection and Slot API • Bonus: Using existing Web Components with Angular
  3. @ManfredSteyer Labs • Regular labs: You just need a browser

    (Stackblitz) • Bonus labs for later: You need a local environment
  4. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular

    Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Angular Collaborator Page ▪ 10 Manfred Steyer Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at
  5. @ManfredSteyer Standards behind Web Components Templates Shadow DOM Custom Elements

    Omnipresent in Angular Baked-in: @Component(encapsulation: …) Angular Elements
  6. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MyComponent], entryComponents: [MyComponent]

    }) export class MyModule { constructor(private injector: Injector) { const MyElement = createCustomElement( MyComponent, { injector: this.injector }); customElements.define('my-element', MyElement); } }
  7. @ManfredSteyer 3 Steps 1. browserlist file: Add ES 5 browsers

    → e. g. IE9-11 2. tsconfig.json: Set target to ES2015 → "target":"ES2015" 3. Create a production build → ng build --prod
  8. @ManfredSteyer Angular & Shadow DOM • Baked-in • Default: Emulation

    • @Component({ encapsulation: ViewEncapsulation.Emulated }) • Shadow DOM (v0) • @Component({ encapsulation: ViewEncapsulation.Native }) • Shadow DOM (v1) • @Component({ encapsulation: ViewEncapsulation.ShadowDom }) • Can be turned off: • @Component({ encapsulation: ViewEncapsulation.None })
  9. @ManfredSteyer Simplest Script Loader on Earth const script = document.createElement('script');

    script.src = 'assets/external-dashboard-tile.bundle.js‘; document.body.appendChild(script);
  10. @ManfredSteyer How to deal with bundle size • Compiling UI-Code

    down with Ivy • Ivy integration for Elements is not part of Angular 8.0 • Sharing dependencies with ngx-build-plus • More: • See my yesterday’s talk (should be on youtube soon) • Bonus Labs (Director’s Cut)
  11. @ManfredSteyer Why zone.js? • Used by Angular's changed detection •

    Patches each browser event • Notifies Angular after each event handler
  12. @ManfredSteyer Why not zone.js? • >100 KB (>10 KB gzipped)

    • Awkward to force consumers of our web components to load zone.js • Issues with native async/await (>=ES 2017)
  13. @ManfredSteyer Calling a Tab <my-tab title="Page 1"> Lorem <b>ipsum</b>, dolor

    <i>sit</i> amet … <div slot="footer">Some <b>extra</b> info</div> </my-tab>
  14. @ManfredSteyer Convention for Two-Way-Databinding <custom-checkbox [checked]="expertMode" (checkedChange)="expertMode = $event"> </custom-checkbox>

    <custom-checkbox [checked]="expertMode" (changed)="expertMode = $event.detail"> </custom-checkbox> Bridge the gap with directives!
  15. @ManfredSteyer Summary Polyfills & Custom_Element_Schema Shadow DOM Dynamically Adding Dynamic

    Loading Zone-less Change Detection Content Projection with Slots
  16. @ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    d Blog about this stuff Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at