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
320
Micro Frontends with Web Standards
Manfred Steyer
PRO
February 15, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
33
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
120
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
65
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
100
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
90
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
250
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
230
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
敵対的ポイフル
futabato
0
140
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.5k
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
100
Implementing Design Systems in Swift
seyfoyun
2
480
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
440
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
180
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
550
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
VS Code をプロダクトにどう取り込むか
onomax
1
770
Fragment Composition of GraphQL
quramy
13
1.5k
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
Unsuck your backbone
ammeep
664
57k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.4k
Design by the Numbers
sachag
274
18k
Facilitating Awesome Meetings
lara
43
5.6k
We Have a Design System, Now What?
morganepeng
43
6.8k
How to name files
jennybc
65
93k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
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