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
   

   View Slide

2. Thomas Gassmann
   Senior Consultant,
   Trainer, Speaker
   thomasgassmann.ch
   @gassmannT
   26.06.2018 Angular Elements
   3
   

   View Slide

3. Agenda
   26.06.2018 Angular Elements
   4
   ▪ Intro Angular Elements
   ▪ Web Components
   ▪ Getting started with Angular Elements
   ▪ Outlook v7
   

   View Slide

4. Angular Elements
   26.06.2018 Angular Elements
   5
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. 26.06.2018 Angular Elements 10
   

   View Slide

10. 26.06.2018 Angular Elements
    11
    Web Components
    

    View Slide

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
    

    View Slide

12. 26.06.2018 Angular Elements
    13
    
    

    View Slide

13. Custom Elements
    26.06.2018 Angular Elements
    14
    Custom elements share the same API surface as native
    DOM objects:
    ▪ Attributes
    ▪ Properties
    ▪ Methods
    ▪ Events
    

    View Slide

14. Create and Define a Custom Element
    26.06.2018 Angular Elements
    15
    class myElement extends HTMLElement {
    …
    }
    customElements.define('my-element', myElement);
    

    View Slide

15. Reactions
    26.06.2018 Angular Elements
    16
    class myElement extends HTMLElement {
    connectedCallback() {
    ...
    }
    disconnectedCallback() {
    ...
    }
    }
    

    View Slide

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

    View Slide

17. 26.06.2018 Angular Elements
    18
    
    

    View Slide

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

    View Slide

19. 26.06.2018 Angular Elements
    20
    let matches = document.querySelector('app-matches-by-country’);
    matches.country = 'ger';
    

    View Slide

20. Custom Events
    26.06.2018 Angular Elements
    21
    class myElement extends HTMLElement {
    emitCountryChange() {
    this.dispatchEvent(
    new CustomEvent('country-change', {
    detail: this.country
    }));
    }
    }
    

    View Slide

21. 26.06.2018 Angular Elements
    22
    let matches = document.querySelector('app-matches-by-country’);
    matches.addEventListener('country-change', event => { ... });
    

    View Slide

22. Custom Elements in Angular
    26.06.2018 Angular Elements
    23
    [country]="sui"
    (countryChanged)="foobar($event)"
    >
    
    => Angular has been designed for this
    

    View Slide

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
    

    View Slide

24. A lot of framework exists
    26.06.2018 Angular Elements
    25
    

    View Slide

25. Getting started
    26.06.2018 Angular Elements
    26
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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;
    constructor(private matchService: MatchService) {}
    ngOnInit() {
    this.matches$ = this.matchService.getTodayMatches();
    }
    }
    

    View Slide

29. Module
    26.06.2018 Angular Elements
    30
    @NgModule({
    imports: [BrowserModule, HttpClientModule],
    declarations: [AppComponent, MatchesTodayComponent],
    entryComponents: [MatchesTodayComponent],
    providers: []
    })
    export class AppModule {
    …
    }
    

    View Slide

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

    View Slide

31. 26.06.2018 Angular Elements
    32
    
    

    View Slide

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');
    

    View Slide

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

    View Slide

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;
    }
    

    View Slide

35. Dependency Injection
    26.06.2018 Angular Elements
    36
    Plattform Injector
    (Renderer)
    Module Injector
    (Services)
    Component Injector
    (ElementRef)
    

    View Slide

36. Dependency Injection in Angular Elements
    26.06.2018 Angular Elements
    37
    Plattform Injector
    (Renderer)
    Module Injector
    (Services)
    Element Injector
    (ElementRef)
    Element Injector
    (ElementRef)
    

    View Slide

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

    View Slide

38. 26.06.2018 Angular Elements
    39
    Dependency Injection works!
    

    View Slide

39. Demo
    26.06.2018 Angular Elements
    40
    

    View Slide

40. Content Projection
    26.06.2018 Angular Elements
    41
    
    Hallo DWX
    
    @Component({
    selector: 'app-test’,
    template: `
    
    `
    })
    export class TestComponent {
    }
    

    View Slide

41. Shadow DOM
    26.06.2018 Angular Elements
    42
    @Component({
    …
    encapsulation: ViewEncapsulation.Native
    })
    export class MatchesTodayComponent implements OnInit {
    …
    }
    

    View Slide

42. Demo
    26.06.2018 Angular Elements
    43
    

    View Slide

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.
    

    View Slide

44. Outlook V7
    26.06.2018 Angular Elements
    45
    @Component({
    selector: 'app-test',
    template: '...',
    customElement: true
    })
    export class TestComponent {
    ...
    }
    

    View Slide

45. 26.06.2018 Angular Elements
    46
    How to use it today in non Angular Projects?
    

    View Slide

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
    

    View Slide

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!');
    })();
    

    View Slide

48. Demo
    26.06.2018 Angular Elements
    49
    

    View Slide

49. 26.06.2018 Angular Elements
    50
    It is just the beginning. Stay tuned
    with Angular 7
    

    View Slide

50. Ressources
    26.06.2018 Angular Elements
    51
    ▪ github.com/gassmannT/WorldCupComponent
    ▪ thomasgassmann.net
    ▪ swissangular.com
    ▪ m.trivadis.com/angular
    ▪ angular-academy.ch
    

    View Slide

51. Thank you
    Thomas Gassmann
    @gassmannT
    thomasgassmann.net
    thomas.gassmann@trivadis.com
    26.06.2018 Angular Elements
    52
    

    View Slide

52. View Slide