Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Microfrontend Revolution: Module Federation...
Search
Manfred Steyer
PRO
April 14, 2021
Programming
1
480
The Microfrontend Revolution: Module Federation with Angular @μCon 2021
Manfred Steyer
PRO
April 14, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
67
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
310
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
250
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
250
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
200
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
350
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120
Other Decks in Programming
See All in Programming
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
200
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
120
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
580
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
320
2024 컴포즈 정원사
jisungbin
0
150
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.5k
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
110
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
790
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
160
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
Featured
See All Featured
What the flash - Photography Introduction
edds
67
11k
Unsuck your backbone
ammeep
667
57k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
RailsConf 2023
tenderlove
28
800
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Music & Morning Musume
bryan
46
6k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Done Done
chrislema
180
16k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Ruby is Unlike a Banana
tanoku
96
11k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution Webpack 5 Module Federation Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Microfrontends
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Live-Coding
#4: Possible Roadmap
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@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!
@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')
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntry.js <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@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
@ManfredSteyer Free eBook Now: 3rd Edition ANGULARarchitects.io/book Updated for Module
Federation and Alternatives (~100 pages)
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io