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
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
33
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
91
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
60
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
250
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
370
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
590
Realtime API 入門
riofujimon
0
150
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
230
受け取る人から提供する人になるということ
little_rubyist
0
250
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
cmp.Or に感動した
otakakot
3
200
初めてDefinitelyTypedにPRを出した話
syumai
0
420
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Jakarta EE meets AI
ivargrimstad
0
660
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
630
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
140
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
The Invisible Side of Design
smashingmag
298
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Optimizing for Happiness
mojombo
376
70k
GraphQLとの向き合い方2022年版
quramy
43
13k
Speed Design
sergeychernyshev
25
620
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Become a Pro
speakerdeck
PRO
25
5k
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