ngComponent als wiederverwendbare Komponente für beliebige JavaScript Apps

Slides from my presentation about Angular Elements at Developer Week (DWX) 2018 in Nürnberg, Germany.
Demo can be found at https://github.com/gassmannT/WorldCupComponent

Transcript

1. ngComponent als wiederverwendbare Komponente für beliebige JavaScript Apps DWX Nürnberg 2018 Thomas Gassmann @gassmannT
2. Thomas Gassmann Senior Consultant, Trainer, Speaker thomasgassmann.ch @gassmannT 26.06.2018 Angular Elements 3
3. Agenda 26.06.2018 Angular Elements 4 ▪ Intro Angular Elements ▪ Web Components ▪ Getting started with Angular Elements ▪ Outlook v7
4. Angular Elements 26.06.2018 Angular Elements 5
5. 26.06.2018 Angular Elements 6 «Angular is ideal for building complete applications, and our tooling, documentation and infrastructure are primarily aimed at this case.» Rob Wormald, Angular Team
6. Platform 26.06.2018 Angular Elements 7 Dependency Injection Decorators Zones Compile Binding Render Material Mobile Universal CLI Language Service Augury ngUpdate Router Animation i18n
7. 26.06.2018 Angular Elements 8 «[…] but it’s quite challenging to use in scenarios that don’t fit that specific Singe Page Application model.» Rob Wormald, Angular Team
8. Use case 26.06.2018 Angular Elements 9 ▪ Enhancing existing HTML Pages ▪ Content Management Systems ▪ Use components in other environments or frameworks ▪ Microfrontends ▪ Reuse components across teams
9. 26.06.2018 Angular Elements 10
10. 26.06.2018 Angular Elements 11 Web Components
11. Web Components 26.06.2018 Angular Elements 12 Web Components are a set of features added by the W3C ▪ HTML Template: Template of the HTML ▪ Shadow DOM: DOM and style encapsulation ▪ HTML Imports: Imports in HTML ▪ Custom Elements: Ability to add to the HTML vocabulary
12. 26.06.2018 Angular Elements 13 <app-matches-today></app-matches-today>
13. Custom Elements 26.06.2018 Angular Elements 14 Custom elements share the same API surface as native DOM objects: ▪ Attributes ▪ Properties ▪ Methods ▪ Events
14. Create and Define a Custom Element 26.06.2018 Angular Elements 15 class myElement extends HTMLElement { … } customElements.define('my-element', myElement);
15. Reactions 26.06.2018 Angular Elements 16 class myElement extends HTMLElement { connectedCallback() { ... } disconnectedCallback() { ... } }
16. Attributes 26.06.2018 Angular Elements 17 class myElement extends HTMLElement { static get observedAttributes() { return ['country']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'country') { // do something with newValue } } }
17. 26.06.2018 Angular Elements 18 <app-matches-by-country country="sui"></app-matches-by-country>
18. Properties 26.06.2018 Angular Elements 19 class myElement extends HTMLElement { get country() { return this.getAttribute('country'); } set country(val) { this.setAttribute('country', val); } }
19. 26.06.2018 Angular Elements 20 let matches = document.querySelector('app-matches-by-country’); matches.country = 'ger';
20. Custom Events 26.06.2018 Angular Elements 21 class myElement extends HTMLElement { emitCountryChange() { this.dispatchEvent( new CustomEvent('country-change', { detail: this.country })); } }
21. 26.06.2018 Angular Elements 22 let matches = document.querySelector('app-matches-by-country’); matches.addEventListener('country-change', event => { ... });
22. Custom Elements in Angular 26.06.2018 Angular Elements 23 <app-matches-by-country [country]="sui" (countryChanged)="foobar($event)" > </app-matches-by-country> => Angular has been designed for this
23. Enter Angular Elements 26.06.2018 Angular Elements 24 Provides a bridge from angular concepts to web components. ▪ @HostBinding() => Attributes ▪ @Input() => Properties ▪ @Output() => CustomEvents ▪ Lifecycle Hooks => Reactions
24. A lot of framework exists 26.06.2018 Angular Elements 25
25. Getting started 26.06.2018 Angular Elements 26
26. Platform 26.06.2018 Angular Elements 27 Dependency Injection Decorators Zones Compile Binding Render Material Mobile Universal CLI Language Service Augury ngUpdate Router Animation i18n
27. First Steps 26.06.2018 Angular Elements 28 Update Angular CLI Update Angular CLI to > 6 ng new angularElements Create a new Angular CLI project ng add @angular/elements Add support for angular elements ng g c matchToday -v Native Generate new component
28. Component 26.06.2018 Angular Elements 29 @Component({ selector: 'app-matches-today', templateUrl: 'matches-today.component.html’, styleUrls: ['matches-today.component.css’], encapsulation: ViewEncapsulation.Native }) export class MatchesTodayComponent implements OnInit { public matches$: Observable<Match[]>; constructor(private matchService: MatchService) {} ngOnInit() { this.matches$ = this.matchService.getTodayMatches(); } }
29. Module 26.06.2018 Angular Elements 30 @NgModule({ imports: [BrowserModule, HttpClientModule], declarations: [AppComponent, MatchesTodayComponent], entryComponents: [MatchesTodayComponent], providers: [] }) export class AppModule { … }
30. Module 26.06.2018 Angular Elements 31 export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { const el1 = createCustomElement( MatchesTodayComponent, { injector: this.injector }); customElements.define('app-matches-today', el1); } }
31. 26.06.2018 Angular Elements 32 <app-matches-today></app-matches-today>
32. Use with Javascript 26.06.2018 Angular Elements 33 const matchesToday = document.createElement('app- matches-today'); document.body.appendChild(matchesToday); matchesToday.country = 'SUI'; matchesToday.setAttribute('country', 'GER');
33. Use with Custom Element API 26.06.2018 Angular Elements 34 const MatchToday = document.get('app-matches-today’); const matchToday = new MatchToday(); // or const matchToday = new MatchToday(differencInjector);
34. Angular Elements are the Host Element 26.06.2018 Angular Elements 35 export class TestComponent implements OnInit { constructor(el: ElementRef) { el.nativeElement // <- Angular Element } @HostListener('click’) onHostClick($event) { ... } @HostBinding('attr.selected') isActive: boolean; }
35. Dependency Injection 26.06.2018 Angular Elements 36 Plattform Injector (Renderer) Module Injector (Services) Component Injector (ElementRef)
36. Dependency Injection in Angular Elements 26.06.2018 Angular Elements 37 Plattform Injector (Renderer) Module Injector (Services) Element Injector (ElementRef) Element Injector (ElementRef)
37. Module 26.06.2018 Angular Elements 38 export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { const el1 = createCustomElement( MatchesTodayComponent, { injector: this.injector }); customElements.define('app-matches-today', el1); } }
38. 26.06.2018 Angular Elements 39 Dependency Injection works!
39. Demo 26.06.2018 Angular Elements 40
40. Content Projection 26.06.2018 Angular Elements 41 <app-test> <span>Hallo DWX</span> </app-test> @Component({ selector: 'app-test’, template: ` <ng-content></ng-content> ` }) export class TestComponent { }
41. Shadow DOM 26.06.2018 Angular Elements 42 @Component({ … encapsulation: ViewEncapsulation.Native }) export class MatchesTodayComponent implements OnInit { … }
42. Demo 26.06.2018 Angular Elements 43
43. Angular Elements in V6 26.06.2018 Angular Elements 44 ▪ It is just the beginning ▪ Size is too big for shipping in non Angular projects ▪ Will be much better with Ivy (V7) ▪ Will be much easier with V7 ▪ Browser Support.
44. Outlook V7 26.06.2018 Angular Elements 45 @Component({ selector: 'app-test', template: '...', customElement: true }) export class TestComponent { ... }
45. 26.06.2018 Angular Elements 46 How to use it today in non Angular Projects?
46. Combine bundle in a single file 26.06.2018 Angular Elements 47 npm install concat --save-dev Install package concat npm install fs-extra --save-dev Install package fs-extra "build:elements": "ng build --prod --output- hashing none && node build-elements.js" Add script command
47. build-elements.js 26.06.2018 Angular Elements 48 const fs = require('fs-extra'); const concat = require('concat'); (async function build() { const files = [ './dist/dwxComponent/runtime.js’, './dist/dwxComponent/scripts.js’, './dist/dwxComponent/polyfills.js’, './dist/dwxComponent/main.js’ ]; await fs.ensureDir('elements’); await concat(files, 'elements/world-cup.js'); console.info('Wold Cup Element created successfully!'); })();
48. Demo 26.06.2018 Angular Elements 49
49. 26.06.2018 Angular Elements 50 It is just the beginning. Stay tuned with Angular 7
50. Ressources 26.06.2018 Angular Elements 51 ▪ github.com/gassmannT/WorldCupComponent ▪ thomasgassmann.net ▪ swissangular.com ▪ m.trivadis.com/angular ▪ angular-academy.ch
51. Thank you Thomas Gassmann @gassmannT thomasgassmann.net thomas.gassmann@trivadis.com 26.06.2018 Angular Elements 52