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 Web Standards
Search
Manfred Steyer
PRO
February 15, 2024
Programming
1
470
Micro Frontends with Web Standards
Manfred Steyer
PRO
February 15, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
700
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
400
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
22
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
410
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
270
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
330
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
170
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
170
Other Decks in Programming
See All in Programming
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Honoとフロントエンドの 型安全性について
yodaka
4
250
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
AHC041解説
terryu16
0
590
Immutable ActiveRecord
megane42
0
130
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
BBQ
matthewcrist
86
9.5k
A Philosophy of Restraint
colly
203
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
How STYLIGHT went responsive
nonsquared
98
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
It's Worth the Effort
3n
184
28k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Web Standards
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Federation & Standalone & esbuild Frankenstein w/ Web Components
Deferred Loading
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,
sharing libs
@ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config
3. Start Shell and Micro Frontends
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Wrap them into Web Components Angular App (MFE) React
App (MFE)
@ManfredSteyer
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp');
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Title Content Call to Action Info More Info
@ManfredSteyer @defer on viewport { @main { <heavy-cmp /> }
@placeholder { <img src="ph.png"> } […] }
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters 4 new
Signal Store Chapters
@ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading
SSR with HTML Fragments
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io