Web Components with Angular: Workshop @MobileTechCon Munich 2019

@ManfredSteyer Angular Elements Workshop 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 About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular
Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator for Angular Page ▪ 6 Manfred Steyer Public: München, Frankfurt, Wien In-House: everywhere http://www.softwarearchitekt.at

@ManfredSteyer Contents • Web Components • Using Web Components in
Angular • Web Components with Angular Elements • Lazy and External Web Components • Building Web Components • Zone-less Change Detection • Content Projection

@ManfredSteyer Web Components

@ManfredSteyer Framework independent Components

@ManfredSteyer Umbrella Term for several Standards

@ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM

@ManfredSteyer Templates Markup that is rendered but not displayed Can
be displayed when needed, e. g. within components <template><span class="number"></span> Records found</template>

@ManfredSteyer Custom Elements Custom HTML-Element, e. g. <date-picker> Behaves like
build-in ones Write once; consume with any framework

@ManfredSteyer Examples <slider min="0" max="100"> … <customer-selector selected="selected()"> … <my-micro-app
state="sharedState" message="handle(…)">…

@ManfredSteyer Shadow DOM Isolate CSS Parent cannot influence Component's layout
Component cannot influence Parent or Siblings

@ManfredSteyer Possibilities Widget Libraries Enriching existing Apps Migrating Legacy Apps
CMS Integration UI Integration/ Composition Micro Apps

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

@ManfredSteyer Polyfill

@ManfredSteyer Selected Polyfills • webcomponents-loader.js • Loads Polyfills on demand
• Custom Elements • Shadom DOM • Templates • native-shim.js • Needed for browsers that DO support polyfills … • … as long as we downlevel to ES5

@ManfredSteyer API class HelloElement extends HTMLElement { […] }

@ManfredSteyer API class HelloElement extends HTMLElement { constructor() { super();
this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>Hello World</div>'; } […] }

@ManfredSteyer API class HelloElement extends HTMLElement { constructor() { super();
this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>Hello World</div>'; } […] } customElements.define('hello-world', HelloElement);

@ManfredSteyer Calling a Web Component <hello-world></hello-world>

@ManfredSteyer Using Properties class HelloElement extends HTMLElement { get name()
{ […] } set name(value: string) { … } constructor() { […] } […] }

@ManfredSteyer Using Properties  <hello-world
[name]="firstName"></hello-world> <hello-world [name]="'Max'"></hello-world>  var elm = document.getElementById(…) elm['name'] = max;

@ManfredSteyer Using Attributes <hello-world name="Max"></hello-world> Not a property!!

@ManfredSteyer Component Callbacks & Co. • attributeChangedCallback(name, oldValue, newValue) •
static get observedAttributes • connectedCallback • disconnectedCallback • adoptedCallback

@ManfredSteyer DEMO

@ManfredSteyer Angular Elements

@ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements

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

@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class AppModule { constructor(private injector: Injector) { } }

@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], bootstrap: [],
entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }

@ManfredSteyer Angular (Elements) & 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 Differential Serving

@ManfredSteyer All your users pay for IE 11! • Polyfills:
~ 150 KB • Even custom elements polyfills for browsers that DO support custom elements b/c of ES5 • ES5: Bigger, less optimized

@ManfredSteyer Differential Serving • Provide modern ES2015+ bundels w/o polyfills
• Provide legacy ES5 bundles w/ polyfills • Let browser decide which to load

@ManfredSteyer How can browser decide? <script src="legacy.js" nomodule></script> <script src="modern.js"
type="module"></script>

@ManfredSteyer Automation • Vue: --modern • Angular: ngx-build-modern • Soon:
Angular CLI 8

@ManfredSteyer DEMO

@ManfredSteyer Sharing Dependencies

@ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element
3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …

@ManfredSteyer Tree Shaking + ngIvy (Angular 8.x?) Custom Element 1
Custom Element 2 Custom Element 3

@ManfredSteyer

@ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core,
@angular/common  Libs like @angular/forms or @angular/router

@ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom
Element 3 Libraries: Angular, RxJS, … UMD ngx-build-plus Drawbacks: Complexity, no isolation

@ManfredSteyer DEMO

@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? • 127 KB (12 gzipped) •
Awkward to force consumers of our web components to load zone.js

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

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

@ManfredSteyer DEMO

@ManfredSteyer Content Projection

@ManfredSteyer Panel

@ManfredSteyer Calling a Tab <my-tab title="Page 1"> Lorem ipsum, dolor
sit amet … <div slot="footer">Some extra info</div> </my-tab>

@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 Slot API • ShadowDOM v1 • ViewEncapsulation.ShadowDom

@ManfredSteyer DEMO

@ManfredSteyer Summary Polyfills and CUSTOM ELEMENTS_SCHEMA Directives for Two-Way-Binding Lazy
& External Web Components Build Strategies: Differential Serving Sharing Code Zone-less Slot API

@ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d Blog about this stuff

Web Components with Angular: Workshop @MobileTe...

Web Components with Angular: Workshop @MobileTechCon Munich 2019

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript