More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022

Slide 1

Slide 1 text

@ManfredSteyer ManfredSteyer More Than Micro Frontends: 3 Further Use Cases for Module Federation Manfred Steyer, ANGULARarchitects.io

Slide 2

Slide 2 text

@ManfredSteyer

Slide 3

Slide 3 text

@ManfredSteyer On Youtube

Slide 4

Slide 4 text

@ManfredSteyer On Youtube

Slide 5

Slide 5 text

@ManfredSteyer Consuming an Interface Implementing an Interfacae

Slide 6

Slide 6 text

@ManfredSteyer

Slide 7

Slide 7 text

@ManfredSteyer

Slide 8

Slide 8 text

@ManfredSteyer Contents #1: Module Federation 101 #2: Plugin Systems #3: A/B Testing #4: Build Performance

Slide 9

Slide 9 text

@ManfredSteyer Manfred Steyer

Slide 10

Slide 10 text

@ManfredSteyer

Slide 11

Slide 11 text

@ManfredSteyer

Slide 12

Slide 12 text

@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work with webpack/ Angular CLI Does not work with webpack/ Angular CLI

Slide 13

Slide 13 text

@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')

Slide 14

Slide 14 text

@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntry.js

Slide 15

Slide 15 text

@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

Slide 16

Slide 16 text

@ManfredSteyer 1) npm i @angular-architects/module-federation -D 2) ng g @angular-architects/module-federation:init 3) Adjust generated configuration 4) ng serve

Slide 17

Slide 17 text

@ManfredSteyer Great Deal for Micro Frontends!

Slide 18

Slide 18 text

@ManfredSteyer

Slide 19

Slide 19 text

@ManfredSteyer

Slide 20

Slide 20 text

@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { mfe1: "http://..." } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')

Slide 21

Slide 21 text

@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')

Slide 22

Slide 22 text

@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })

Slide 23

Slide 23 text

Slide 24

Slide 24 text

@ManfredSteyer

Slide 25

Slide 25 text

@ManfredSteyer

Slide 26

Slide 26 text

@ManfredSteyer

Slide 27

Slide 27 text

@ManfredSteyer

Slide 28

Slide 28 text

@ManfredSteyer Setting Micro Frontend Shell 10 Micro Frontends á 20 Features Separately buildable 200 Features in total!

Slide 29

Slide 29 text

@ManfredSteyer https://nrwl.io/nx Smart, Fast and Extensible Build System

Slide 30

Slide 30 text

@ManfredSteyer Angular CLI npm install -g @angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve my-app ng build my-app

Slide 31

Slide 31 text

@ManfredSteyer Nx npm install -g @angular/cli npm init nx-workspace workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve my-app ng build my-app

Slide 32

Slide 32 text

@ManfredSteyer Results Cold Cache: 58.8 sec Warm Nx Cache: 0.6 sec Changed One App: 9.71 sec

Slide 33

Slide 33 text

@ManfredSteyer

Slide 34

Slide 34 text

@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx

Slide 35

Slide 35 text

@ManfredSteyer Conclusion Loading Separately Deployed Code Micro Frontends Plugin Systems A/B Testing Build Performance

Slide 36

Slide 36 text

@ManfredSteyer

Slide 37

Slide 37 text

@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io