Microfrontends: Necessities - Implementations - Challenges

Slide 1

Slide 1 text

RainerHahnekamp Micro Frontends Necessities Implementations Necessities Implementations Challenges Microfrontends Ng-Glühwein Rainer Hahnekamp 16. December 2024

Slide 2

Slide 2 text

About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) ● Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality

Slide 3

Slide 3 text

RainerHahnekamp Microfrontends: The art of transforming an organizational problem into a technical one.

Slide 4

Slide 4 text

RainerHahnekamp The Problem: Too Many People Build Time Separate Deployment

Slide 5

Slide 5 text

RainerHahnekamp Microfrontends !== Microservices No Technical Scalability Requirements No Full Isolation No Framework Support out of the Box

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

RainerHahnekamp Application Shell MF (MicroFrontend) Main Building Blocks

Slide 8

Slide 8 text

RainerHahnekamp Common Implementations iFrames Web Components Native & Module Federation

Slide 9

Slide 9 text

RainerHahnekamp Web Components

Slide 10

Slide 10 text

RainerHahnekamp Web Components ● Supported by Angular Elements ● Custom Elements + HTML Templates + Shadow DOM ● Squeeze a whole app into a tag

Slide 11

Slide 11 text

RainerHahnekamp Web Components Shell

Slide 12

Slide 12 text

RainerHahnekamp Web Components ● Bundle Size ● Multiple Angular Instances ● Issues with Router ● Multiple Zones ○ Go zoneless! ● Perfect ﬁt for UI Components ● High Isolation / Little Inter-Communication ● Tricks to share dependencies ○ One zone.js ○ WebPack Externals

Slide 13

Slide 13 text

RainerHahnekamp Module Federation

Slide 14

Slide 14 text

RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation

Slide 15

Slide 15 text

RainerHahnekamp Application Code Feature (Lazy Loaded) Application 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) Application 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 1 (Remote 1) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) MF 2 (Remote 2) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs JS JS JS JS

Slide 22

Slide 22 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs JS JS JS JS

Slide 23

Slide 23 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS https://host2 https://host3 https://host1

Slide 24

Slide 24 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime JS JS JS JS

Slide 25

Slide 25 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS

Slide 26

Slide 26 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS

Slide 27

Slide 27 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS

Slide 28

Slide 28 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS ? ?

Slide 29

Slide 29 text

RainerHahnekamp Shared Libraries & Constraints ● Libraries can & should be shared ○ Multiple Libraries (different or same version) as Edge Case ● "Compiled Angular" doesn't follow semantic versioning ○ Divering (even on Patch-Level) is risky ○ Runtime protection built-in

Slide 30

Slide 30 text

RainerHahnekamp

Slide 31

Slide 31 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS

Slide 32

Slide 32 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS

Slide 33

Slide 33 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS

Slide 34

Slide 34 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS

Slide 35

Slide 35 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS JS JS JS Build Time Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) Runtime JS JS JS JS JS JS JS JS JS Module Federation Logic

Slide 36

Slide 36 text

RainerHahnekamp RainerHahnekamp

Slide 37

Slide 37 text

RainerHahnekamp Module Federation ✅ No Issues because of multiple Angular applications ● Same Zone.js, Router, Store, HttpClient, UserService... ✅ Small Bundle Size ● No Treeshaking for shared libraries ⛔ Compromise ● Full Autonomy except Versioning ● Return of the Monorepo? ⛔ Bound to Bundler ● WebPack, Rspack

Slide 38

Slide 38 text

RainerHahnekamp Native Federation

Slide 39

Slide 39 text

RainerHahnekamp Native Federation Module Federation but without Runtime Bundler coupling

Slide 40

Slide 40 text

RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime Module & Native Federation Module Federation

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

RainerHahnekamp Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Feature (Lazy Loaded) 3rd Party Libs 3rd Party Libs 3rd Party Libs Build Time JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Runtime JS JS JS JS Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs Module & Native Federation Module Federation Native Federation

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

RainerHahnekamp Native Federation vs. Module Federation ✅ Decoupled from Bundler during Runtime ● Multiple & Different Bundlers during Build Time (Adapter is necessary) ● CDN as Supplier ● Web Standards ✅ Module Federation embeddable ⛔ Requires ESM

Slide 48

Slide 48 text

RainerHahnekamp ● Hyperlink ● SingleSPA ● Custom Solutions ○ e.g. Google Cloud ● Hybrids ○ Module Federation & Native Federation & Web Components ● Web Fragments Alternative Implementations

Slide 49

Slide 49 text

RainerHahnekamp Thanks