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 Federatio...
Search
Manfred Steyer
PRO
March 25, 2021
Programming
2
420
The Microfrontend Revolution: Module Federation with Angular
Manfred Steyer
PRO
March 25, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
320
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
260
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
160
Successful with Signals: 3 Rules for Your Architecture @.NET UserGroup Bern
manfredsteyer
PRO
0
47
Improving Your Architecture with Forensic Analysis
manfredsteyer
PRO
0
110
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
340
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
31
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
400
Other Decks in Programming
See All in Programming
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
430
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
現場で役立つモデリング 超入門
masuda220
PRO
13
2.9k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
550
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.6k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Macとオーディオ再生 2024/11/02
yusukeito
0
200
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Testing 201, or: Great Expectations
jmmastey
38
7k
Typedesign – Prime Four
hannesfritz
39
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Producing Creativity
orderedlist
PRO
341
39k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Music & Morning Musume
bryan
46
6.1k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Transcript
@ManfredSteyer ManfredSteyer The Microfrontend Revolution: Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Version Mismatches #3: Federated
Angular #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: Experimental Opt-in for webpack 5 Angular CLI 12: Official webpack 5 integration
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Federated Angular
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io