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

The Microfrontend Revolution: Module Federation...

Avatar for Manfred Steyer Manfred Steyer PRO
April 14, 2021
Programming
1
480

The Microfrontend Revolution: Module Federation with Angular @μCon 2021

Avatar for Manfred Steyer

Manfred Steyer PRO

April 14, 2021
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Your Architecture as a Crime Scene? Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
1
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
92
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
59
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
62
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
94
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
80
Reactivity, Reimagined: Angular Signals at Every Layer
Avatar for Manfred Steyer manfredsteyer
PRO
0
87

Other Decks in Programming

See All in Programming
Private APIの呼び出し方
Avatar for Kishikawa Katsumi kishikawakatsumi
3
900
CSC509 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
160
JEP 496 と JEP 497 から学ぶ耐量子計算機暗号入門 / Learning Post-Quantum Crypto Basics from JEP 496 & 497
Avatar for mackey0225 mackey0225
2
460
Honoを技術選定したAI要件定義プラットフォームAcsimでの意思決定
Avatar for Tadashi Shigeoka codenote
0
250
AWS CDKの推しポイントN選
Avatar for アキキー akihisaikeda
1
130
Eloquentを使ってどこまでコードの治安を保てるのか？を新人が考察してみた
Avatar for ito_kohhh itokoh0405
0
3.2k
「AWS CDK入門」の前日譚/Prequelto-Introduction-To-AWSCDK
Avatar for tyumugiko tyumugi1113
0
100
All(?) About Point Sets
Avatar for hole hole
0
210
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
250
仕様がそのままテストになる！Javaで始める振る舞い駆動開発
Avatar for uutan1108 ohmori_yusuke
8
4.6k
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
Avatar for Tomohisa Takaoka tomohisa
2
8k

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
11
940
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
980
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6.1k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k

Transcript

  1. @ManfredSteyer ManfredSteyer The Microfrontend Revolution Webpack 5 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 Microfrontends

  4. @ManfredSteyer Micro Frontends

  5. @ManfredSteyer

  6. @ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Live-Coding

    #4: Possible Roadmap

  7. @ManfredSteyer Manfred Steyer

  8. @ManfredSteyer

  9. @ManfredSteyer

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

  11. @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')

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

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

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

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

  14. @ManfredSteyer

  15. @ManfredSteyer ?

  16. @ManfredSteyer Custom Builder

  17. @ManfredSteyer

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

    ng serve

  19. @ManfredSteyer

  20. @ManfredSteyer

  21. @ManfredSteyer When can we have it? Webpack 5 and Module

    Federation: final Angular CLI 11 + webpack 5: experimental Angular CLI 12 (May 2021): webpack 5 integrated

  22. @ManfredSteyer Free eBook Now: 3rd Edition ANGULARarchitects.io/book Updated for Module

    Federation and Alternatives (~100 pages)

  23. @ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends

    Federated Angular

  24. @ManfredSteyer

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

    http://angulararchitects.io