Tweet
Tweet

Slide 1

Slide 1 text

RainerHahnekamp ng-India | Rainer Hahnekamp | 12. April 2025

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 Source Code: https://github.com/rainerhahnekamp/eternal ● Shell Branch ○ https://github.com/rainerhahnekamp/eternal/tree/talk/2025-04-12_ng-india/host ● Remote Branch ○ https://github.com/rainerhahnekamp/eternal/tree/talk/2025-04-12_ng-india/remote

Slide 4

Slide 4 text

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

Slide 5

Slide 5 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/Native Federation

Slide 6

Slide 6 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/Native Federation

Slide 7

Slide 7 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/Native Federation

Slide 8

Slide 8 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/Native Federation

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native Federation Application Code Feature (Lazy Loaded) MF 1 3rd Party Libs 3rd Party Libs 3rd Party Libs Application Code Shell (Host) 3rd Party Libs 3rd Party Libs 3rd Party Libs

Slide 11

Slide 11 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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 12

Slide 12 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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 13

Slide 13 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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 14

Slide 14 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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 15

Slide 15 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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 16

Slide 16 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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 17

Slide 17 text

RainerHahnekamp Application Code Feature (Lazy Loaded) MF 2 3rd Party Libs 3rd Party Libs 3rd Party Libs Module/Native 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 18

Slide 18 text

RainerHahnekamp And they lived happily ever after…

Slide 19

Slide 19 text

RainerHahnekamp 🤔 What if I use different versions of the same lib?

Slide 20

Slide 20 text

RainerHahnekamp https://tinyurl.com/ng-india-25-matthieu-riegler

Slide 21

Slide 21 text

RainerHahnekamp Challenges ● Same Version ● Share Everything ○ Singletons ○ Bundle Size ● No Tree-Shaking ● Platform "Special Task Force" Team

Slide 22

Slide 22 text

RainerHahnekamp Mono Repo as Solution???

Slide 23

Slide 23 text

RainerHahnekamp Alternative Implementations iFrames Web Components

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

RainerHahnekamp The Problem: Too Many People Build Time Separate Deployment

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

RainerHahnekamp Native Federation Module Federation but without Runtime Bundler coupling

Slide 28

Slide 28 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 29

Slide 29 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 30

Slide 30 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 31

Slide 31 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 32

Slide 32 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 33

Slide 33 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 34

Slide 34 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 35

Slide 35 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 36

Slide 36 text

RainerHahnekamp More Content My YouTube Channel ● https://youtube.com/@rainerhahnekamp Ng-News ● https://youtube.com/@ng-news Workshops ● https://www.angulararchitects.io/en/training/professional-ngrx-advanced-state-management-best-practices/ ● https://www.angulararchitects.io/en/training/professional-angular-testing-playwright-edition/

Slide 37

Slide 37 text

RainerHahnekamp धन्यवाद