Web Components with Angular Elements: Beyond the Basics @ngconf 2019

Transcript

1. 1.

   @ManfredSteyer Web Components with Angular Elements: Beyond the Basics Manfred

   Steyer SOFTWAREarchitekt.at ManfredSteyer
2. 2.

   @ManfredSteyer

3. 3.

   @ManfredSteyer [Igor Minar, Angular Connect 2018 Keynote]

4. 4.

   @ManfredSteyer

5. 5.

   @ManfredSteyer Angular Elements

6. 6.

   @ManfredSteyer Custom Elements: Framework independent components

7. 7.

   @ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS Integration Dynamic

   Loading
8. 8.

   @ManfredSteyer Contents • Basics (just one slide) • Dynamically adding

   elements • Lazy loading elements • External elements • Bundle Size
9. 9.

   @ManfredSteyer About me … • Manfred Steyer SOFTWAREarchitekt.at • Angular

   Trainings and Consultancy • Google Developer Expert (GDE) • Angular Trusted Collaborator Page ▪ 9 Manfred Steyer Public: Vienna, Munich, Frankfurt In-House: Everywhere in Europe http://www.softwarearchitekt.at/workshops
10. 10.

    @ManfredSteyer 1) Basics

11. 11.

    @ManfredSteyer Angular Elements Wrap Angular Components: createCustomElement(…) Register it with

    browser: customElements.define(…)
12. 12.

    @ManfredSteyer 2) Dynamic Elements

13. 13.

    @ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile');

14. 14.

    @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([…])
15. 15.

    @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([…]) otherElement.appendChild(tile); Angular uses Domino to simulate document for SSR!
16. 16.

    @ManfredSteyer DEMO

17. 17.

    @ManfredSteyer 3) Lazy Loading

18. 18.

    @ManfredSteyer 2 Steps for Lazy Elements Register module in angular.json

    Load with with NgModuleFactoryLoader
19. 19.

    @ManfredSteyer Register in angular.json "lazyModules": [ "[…]/lazy-dashboard-tile.module" ],

20. 20.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { }
21. 21.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }
22. 22.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module‘; […] } }
23. 23.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module'; return this.loader.load(path).then(moduleFactory => { }); } }
24. 24.

    @ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class

    LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module'; return this.loader.load(path).then(moduleFactory => { moduleFactory.create(this.injector); }); } }
25. 25.

    @ManfredSteyer DEMO

26. 26.

    @ManfredSteyer 4) External Elements

27. 27.

    @ManfredSteyer Project A Custom Element Custom Element Bundle Project B

28. 28.

    @ManfredSteyer Create application for Custom Elements Compile application to self

    contained bundle Load bundle into consumer 3 Steps
29. 29.

    @ManfredSteyer Compile to self-contained bundle

30. 30.

    @ManfredSteyer ng add ngx-build-plus

31. 31.

    @ManfredSteyer One of the simplest bundle loaders … const script

    = document.createElement('script'); script.src = 'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);
32. 32.

    @ManfredSteyer DEMO

33. 33.

    @ManfredSteyer 5) Bundle Size

34. 34.

    @ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element

    3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …
35. 35.

    @ManfredSteyer Angular Elements + Ivy Custom Element 1 Custom Element

    2 Custom Element 3
36. 36.

    @ManfredSteyer Where Ivy can help ✓ UI-based Widgets ✓ Libraries

37. 37.

    @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom

    Element 3 Libraries: Angular, RxJS, … Drawbacks: Complexity, non-default build, …
38. 38.

    @ManfredSteyer Summary Reuse with other technologies Dynamically Adding Lazy Loading

    External Elements Ivy for UI-based Code Sharing Dependencies
39. 39.

    @ManfredSteyer Sometimes, all we want is a greasy pizza!

40. 40.

    @ManfredSteyer Blog > SOFTWAREarchitekt.at • Angular Elements, Part I: A

    Dynamic Dashboard In Four Steps With Web Components […] • Angular Elements, Part V: Your Options For Building Angular Elements With The CLI
41. 41.

    @ManfredSteyer Workshop: Tomorrow A Deep Look at Angular Elements With

    live coding and exercises for you on StackBlitz Thu, May 2:30 pm - 4:30 pm
42. 42.

    @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    d http://softwarearchitekt.at/workshops Slides & Examples