Tweet
Tweet

Slide 1

Slide 1 text

@ManfredSteyer Web Components with Angular Elements: Beyond the Basics Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

Slide 2

Slide 2 text

@ManfredSteyer

Slide 3

Slide 3 text

@ManfredSteyer [Igor Minar, Angular Connect 2018 Keynote]

Slide 4

Slide 4 text

@ManfredSteyer

Slide 5

Slide 5 text

@ManfredSteyer Angular Elements

Slide 6

Slide 6 text

@ManfredSteyer Custom Elements: Framework independent components

Slide 7

Slide 7 text

@ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS Integration Dynamic Loading

Slide 8

Slide 8 text

@ManfredSteyer Contents • Basics (just one slide) • Dynamically adding elements • Lazy loading elements • External elements • Bundle Size

Slide 9

Slide 9 text

@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

Slide 10

Slide 10 text

@ManfredSteyer 1) Basics

Slide 11

Slide 11 text

@ManfredSteyer Angular Elements Wrap Angular Components: createCustomElement(…) Register it with browser: customElements.define(…)

Slide 12

Slide 12 text

@ManfredSteyer 2) Dynamic Elements

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@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!

Slide 16

Slide 16 text

@ManfredSteyer DEMO

Slide 17

Slide 17 text

@ManfredSteyer 3) Lazy Loading

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }

Slide 22

Slide 22 text

@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise { const path = '[…]/lazy-dashboard-tile.module‘; […] } }

Slide 23

Slide 23 text

@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise { const path = '[…]/lazy-dashboard-tile.module'; return this.loader.load(path).then(moduleFactory => { }); } }

Slide 24

Slide 24 text

@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise { const path = '[…]/lazy-dashboard-tile.module'; return this.loader.load(path).then(moduleFactory => { moduleFactory.create(this.injector); }); } }

Slide 25

Slide 25 text

@ManfredSteyer DEMO

Slide 26

Slide 26 text

@ManfredSteyer 4) External Elements

Slide 27

Slide 27 text

@ManfredSteyer Project A Custom Element Custom Element Bundle Project B

Slide 28

Slide 28 text

@ManfredSteyer Create application for Custom Elements Compile application to self contained bundle Load bundle into consumer 3 Steps

Slide 29

Slide 29 text

@ManfredSteyer Compile to self-contained bundle

Slide 30

Slide 30 text

@ManfredSteyer ng add ngx-build-plus

Slide 31

Slide 31 text

@ManfredSteyer One of the simplest bundle loaders … const script = document.createElement('script'); script.src = 'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);

Slide 32

Slide 32 text

@ManfredSteyer DEMO

Slide 33

Slide 33 text

@ManfredSteyer 5) Bundle Size

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

@ManfredSteyer Angular Elements + Ivy Custom Element 1 Custom Element 2 Custom Element 3

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

@ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … Drawbacks: Complexity, non-default build, …

Slide 38

Slide 38 text

@ManfredSteyer Summary Reuse with other technologies Dynamically Adding Lazy Loading External Elements Ivy for UI-based Code Sharing Dependencies

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

@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

Slide 42

Slide 42 text

@ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d http://softwarearchitekt.at/workshops Slides & Examples