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
Micro Frontends with Module Federation @MicroFrontend Summit 2023
Search
Manfred Steyer
PRO
January 11, 2023
Programming
0
1.1k
Micro Frontends with Module Federation @MicroFrontend Summit 2023
Manfred Steyer
PRO
January 11, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
27
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
28
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
83
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
80
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
VS Code をプロダクトにどう取り込むか
onomax
1
360
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
Git Rebase
bkuhlmann
11
1.6k
Rethinking UI building strategies @ SFI 2024
letelete
0
270
ONE WEDGE_company_guide
1wedge_one
0
480
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
330
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
370
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
Apache Hive 4 on Treasure Data
ryukobayashi
0
310
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Unsuck your backbone
ammeep
663
57k
Optimizing for Happiness
mojombo
370
69k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
RailsConf 2023
tenderlove
4
540
Debugging Ruby Performance
tmm1
70
11k
Docker and Python
trallard
34
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Module Federation Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer #1a Module Federation #1b Sharing Libs and Data #3
Dealing with Version Mismatches #4 Multiple Frameworks/ Versions
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Shell (Host) Microfrontend (Remote) // Maps Urls in //
webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { './Cmp': './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { './Cmp': './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' }) Helper Function using the Webpack API
@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer 1) Adjust your webpack.config.js 2) Start your application
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Selecting the highest compatible version 10.0 10.1
@ManfredSteyer Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer shared: { "my-lib": { singleton: true } } 11.0
10.1
@ManfredSteyer in general, however, …
@ManfredSteyer • Framework with two libs a and b •
a is using internal APIs of b • a could be an compiled app too (Don't use ^ or ~ in your package.json)
@ManfredSteyer shared: { "my-lib": { singleton: true, strictVersion: true //
Error instead of warning! } } 11.0 10.1
@ManfredSteyer shared: { "my-lib": { requiredVersion: ">=1.0.1 <11.1.1" } }
@ManfredSteyer •Several options baked-in •However, best option: avoid conflicts upfront
• Option 1: Monorepo • Option 2: Loading several SPAs + sharing nothing!
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer await import('other-app/web-cmp');
@ManfredSteyer const main = await import('other-app/web-cmp'); const elm = document.createElement('my-web-cmp')
document.body.appendChild(elm);
@ManfredSteyer await import('other-app/web-cmp'); const elm = document.createElement('my-web-cmp') document.body.appendChild(elm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book
@ManfredSteyer Conclusion Loading separately compiled code & sharing libs Baked-in
Strategies for Version Mismatches Webpack Runtime API: Dynamic Federation Frankenstein: Bootstrapping Several SPAs
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io