Web Components with Angular: Beyond the basics

Transcript

1. @ManfredSteyer Web Components with Angular: Beyond the basics Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer About me … • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Angular Trusted Collaborator Page ▪ 2 Manfred Steyer Public: Vienna, Munich, Frankfurt In-House: Everywhere in Europe http://www.softwarearchitekt.at/workshops
3. @ManfredSteyer Contents • Motivation & Angular Elements 101 • Polyfills • Dynamic & Lazy elements • External elements • Dealing with dependencies • Excluding Zone.js
4. @ManfredSteyer Motivation
5. @ManfredSteyer Web Components: Framework independent components
6. @ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM
7. @ManfredSteyer Some Possibilities … Widget Libraries CMS Integration Enriching existing Apps Migrating Legacy Apps
8. @ManfredSteyer Angular Elements
9. @ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements
10. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { }
11. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { }
12. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { } }
13. @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); } }
14. @ManfredSteyer CUSTOM_ELEMENTS_SCHEMA @NgModule({ […], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class MyModule {}
15. @ManfredSteyer DEMO
16. @ManfredSteyer Polyfills
17. @ManfredSteyer Distribution
18. @ManfredSteyer Polyfill
19. @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 a we downlevel to ES5
20. @ManfredSteyer DEMO
21. @ManfredSteyer Dynamic and Lazy Elements
22. @ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile');
23. @ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile‘); tile['prop'] = 123; tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2') tile.addEventListener([…])
24. @ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile‘); tile['prop'] = 123; tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2') tile.addEventListener([…]) content.appendChild(tile);
25. @ManfredSteyer Lazy Loading Register module in angular.json Load with with NgModuleFactoryLoader
26. @ManfredSteyer Register in angular.json "lazyModules": [ "[…]/lazy-dashboard-tile.module.ts" ],
27. @ManfredSteyer Register in angular.json @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { }
28. @ManfredSteyer Register in angular.json @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }
29. @ManfredSteyer Register in angular.json @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { return this.loader.load(path).then(moduleFactory => { }); } }
30. @ManfredSteyer Register in angular.json @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { return this.loader.load(path).then(moduleFactory => { moduleFactory.create(this.injector); […] }); } }
31. @ManfredSteyer DEMO
32. @ManfredSteyer External Elements
33. @ManfredSteyer Project A Custom Element Custom Element Bundle Project B
34. @ManfredSteyer Register Custom Element when bootstrapping Compile application to self contained bundle Load bundle into consumer 3 Steps
35. @ManfredSteyer Register when bootstrapping @NgModule({ […] bootstrap: [] }) export class AppModule { }
36. @ManfredSteyer Register when bootstrapping @NgModule({ […] bootstrap: [] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }
37. @ManfredSteyer Register when bootstrapping @NgModule({ […] bootstrap: [], }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const externalTileCE = createCustomElement( ExternalDashboardTileComponent, { injector: this.injector }); customElements.define('external-dashboard-tile', externalTileCE); } }
38. @ManfredSteyer Compile to self-contained bundle
39. @ManfredSteyer ngx-build-plus: --single-bundle
40. @ManfredSteyer Load into consumer const script = document.createElement('script'); script.src = 'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);
41. @ManfredSteyer DEMO
42. @ManfredSteyer Dealing with Dependencies
43. @ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …
44. @ManfredSteyer Tree Shaking + Ivy (Angular 8.x) Custom Element 1 Custom Element 2 Custom Element 3
45. @ManfredSteyer
46. @ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core, @angular/common  Libs like @angular/forms or @angular/router
47. @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … UMD Drawbacks: Complexity, no isolation
48. @ManfredSteyer DEMO
49. @ManfredSteyer Excluding Zone.js
50. @ManfredSteyer How to exclude it? platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'})
51. @ManfredSteyer Consequences • Manual Change Detection • Change Detection via Observables
52. @ManfredSteyer DEMO
53. @ManfredSteyer Summary Polyfills Adding dynamically Lazy loading Compiling and loading external elements Dependencies Zone.js
54. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Slides & Examples Public and In-House http://www.softwarearchitekt.at/workshops