Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends with Module Federation @HubsWeb...

Avatar for Manfred Steyer Manfred Steyer PRO
March 30, 2022
Programming
0
280

Micro Frontends with Module Federation @HubsWebConf 2022

Avatar for Manfred Steyer

Manfred Steyer PRO

March 30, 2022
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
37
Reactivity, Reimagined: Angular Signals at Every Layer
Avatar for Manfred Steyer manfredsteyer
PRO
0
54
Angular Architecture Workshop @AngularDays in Berlin 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
46
Migration to Signals, Resource API, and NgRx Signal Store
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene Forensic Analysis @BASTA! 2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
80

Other Decks in Programming

See All in Programming
AIと人間の共創開発！OSSで試行錯誤した開発スタイル
Avatar for mae616 mae616
2
820
TransformerからMCPまで（現代AIを理解するための羅針盤）
Avatar for MIKIO KUBO mickey_kubo
7
5.5k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
Avatar for もっち mottyzzz
12
7.2k
コードとあなたと私の距離 / The Distance Between Code, You, and I
Avatar for YAMAOKA Hiroyuki hiro_y
0
200
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
520
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
520
TFLintカスタムプラグインで始める Terraformコード品質管理
Avatar for bells17 bells17
2
460
SwiftDataを使って10万件のデータを読み書きする
Avatar for akidon0000 akidon0000
0
240
Pythonに漸進的に型をつける
Avatar for Nealle nealle
1
130
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
Avatar for aose aoseyuu
2
750
技術的負債の正体を知って向き合う
Avatar for irof irof
0
270
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
Avatar for MURAKAMI Masahiko fossamagna
2
100

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
354
21k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
369
20k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
15k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k

Transcript

  1. @ManfredSteyer ManfredSteyer The Micro Frontend Revolution: Angular and Module Federation

    Manfred Steyer, ANGULARarchitects.io

  2. @ManfredSteyer

  3. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding

    App Boarding App Luggage App Luggage App Micro Frontends

  4. @ManfredSteyer

  5. @ManfredSteyer Micro Frontends

  6. @ManfredSteyer

  7. @ManfredSteyer Contents #1: Module Federation #2 Version Mismatch #3: Federated

    Angular

  8. @ManfredSteyer Manfred Steyer

  9. @ManfredSteyer

  10. @ManfredSteyer

  11. @ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work

    with webpack/ Angular CLI Even lazy parts must be known at compile time!

  12. @ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //

    Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')

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

    (Remote) RemoteEntry.js <script src="…"></script>

  14. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:

    [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

  15. @ManfredSteyer

  16. @ManfredSteyer ?

  17. @ManfredSteyer Custom Builder

  18. @ManfredSteyer

  19. @ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)

    ng serve

  20. @ManfredSteyer

  21. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives

  22. @ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Version Mismatches

    Federated Angular

  23. @ManfredSteyer

  24. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io