A Deep Look at Angular Elements

@ManfredSteyer A Deep Look at Angular Elements Manfred Steyer SOFTWAREarchitekt.at
ManfredSteyer

@ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz
✓ 64 KB RAM ✓ Disks with 170 KB

@ManfredSteyer Version with two cores ;-) Challenge: Resources!

@ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10
+/- yrs

@ManfredSteyer There are milk products lasting longer than some JavaScript
frameworks

@ManfredSteyer Web Components

@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

@ManfredSteyer Didactics • Presentations • Live-Coding • Labs

@ManfredSteyer Labs • Regular labs: You just need a browser
(Stackblitz) • Bonus labs for later: You need a local environment

@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

@ManfredSteyer Web Components and Angular Elements

@ManfredSteyer Web Components: Framework independent components

@ManfredSteyer Umbrella term for several standards

@ManfredSteyer Standards behind Web Components Templates Shadow DOM Custom Elements
Omnipresent in Angular Baked-in: @Component(encapsulation: …) Angular Elements

@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MyComponent], entryComponents: [MyComponent]
}) export class AppModule { }

}) export class MyModule { }

}) export class MyModule { constructor(private injector: Injector) { } }

}) export class MyModule { constructor(private injector: Injector) { const MyElement = createCustomElement( MyComponent, { injector: this.injector }); customElements.define('my-element', MyElement); } }

@ManfredSteyer Using an Angular Element <my-element></my-element>

@ManfredSteyer DEMO

@ManfredSteyer Use the CUSTOM_ELEMENTS_SCHEMA @NgModule({ […], schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
}) export class AppModule { }

@ManfredSteyer All this can be polyfilled down to IE11 (more
or less)

@ManfredSteyer Distribution

@ManfredSteyer Polyfill

@ManfredSteyer Selected Polyfills loader •Templates •Custom Elements •Shadow DOM es5-adapter
•For browsers that DO support custom elements

@ManfredSteyer DEMO

@ManfredSteyer LAB https://tinyurl.com/elements-labs

@ManfredSteyer Alternative to es5-adapter: Differential Loading CLI >= 8 ES
2015+ ES 5

@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

@ManfredSteyer

@ManfredSteyer How can browser decide? <script src="main-es5.js" nomodule></script> <script src="main-es2015.js"
type="module"></script>

@ManfredSteyer Shadow DOM

@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 })

@ManfredSteyer DEMO

@ManfredSteyer Dynamically adding custom elements

@ManfredSteyer Adding Custom Elements const elm = document.createElement('my-element'); elm.setAttribute(…); elm['propertyName']
= …; elm.addEventListener(…); otherElement.appendChild(elm);

@ManfredSteyer DEMO

@ManfredSteyer Loading External Elements

@ManfredSteyer Simplest Script Loader on Earth const script = document.createElement('script');
script.src = 'assets/external-dashboard-tile.bundle.js‘; document.body.appendChild(script);

@ManfredSteyer DEMO

@ManfredSteyer Skrinking your Bundles

@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)

@ManfredSteyer Zone-less Change Detection

@ManfredSteyer Why zone.js? • Used by Angular's changed detection •
Patches each browser event • Notifies Angular after each event handler

@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)

@ManfredSteyer How to exclude it? platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'})

@ManfredSteyer Consequences • Manual Change Detection • Change Detection via
Observables

@ManfredSteyer DEMO

@ManfredSteyer Content Projection & Slot API (Shadow DOM)

@ManfredSteyer Panel

@ManfredSteyer Implementation <div id="tab"> <h2>{{title}}</h2> <div id="content"> <slot></slot> </div> </div>

@ManfredSteyer Implementation <div id="tab"> <h2>{{title}}</h2> <div id="content"> <slot></slot> <div class="small">
<slot name="footer"></slot> </div> </div> </div>

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

@ManfredSteyer Slot API • ShadowDOM v1 • ViewEncapsulation.ShadowDom

@ManfredSteyer DEMO

@ManfredSteyer Bonus: Using Existing Custom Elements

@ManfredSteyer You can databind to any Custom Element <custom-checkbox [checked]="expertMode"
(changed)="expertMode = $event.detail"> </custom-checkbox>

@ManfredSteyer Two-Way-Databinding is more complicated <custom-checkbox [(checked)]="expertMode"> </custom-checkbox>

@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!

@ManfredSteyer DEMO

@ManfredSteyer Summary Polyfills & Custom_Element_Schema Shadow DOM Dynamically Adding Dynamic
Loading Zone-less Change Detection Content Projection with Slots

@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

A Deep Look at Angular Elements

A Deep Look at Angular Elements

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript