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 Modern Angular
Search
Manfred Steyer
PRO
October 25, 2023
Programming
0
240
Micro Frontends with Modern Angular
Manfred Steyer
PRO
October 25, 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
96
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
60
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
92
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
89
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
310
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
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
510
Let's learn code review
riofujimon
2
570
AppRouter Panel Talk
yosuke_furukawa
PRO
1
460
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
420
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
550
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
360
Ruby Pattern Matching
bkuhlmann
0
930
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
870
Try creating your own orderedmap
kazamori
1
190
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.5k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Featured
See All Featured
Fireside Chat
paigeccino
22
2.6k
The Invisible Side of Design
smashingmag
294
49k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Optimizing for Happiness
mojombo
370
69k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
Scaling GitHub
holman
457
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Docker and Python
trallard
35
2.7k
Music & Morning Musume
bryan
41
5.6k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Transcript
@ManfredSteyer Micro Frontends with Modern Angular ManfredSteyer
@ManfredSteyer Angular is changing …
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Federation & Standalone & esbuild Frankenstein w/ Angular Elements
Deferred Loading SSR & Hydration w/ @angular/ssr
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@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
@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 → npm install @angular/elements
@ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:
[], });
@ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:
[], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, });
@ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:
[], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp);
@ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:
[], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp); // Usage: <mfe2-root></mfe2-root>
@ManfredSteyer // federation.config.js module.exports = withNativeFederation({ […] exposes: { './web-comp':
'./projects/mfe2/src/bootstrap.ts', }, […] });
@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
@ManfredSteyer 1. Server: Render index.html → FMP, SEO 2. Client:
Make app interactive (Hydration)
@ManfredSteyer ng add @angular/ssr - or - ng new --ssr
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Host Remote Remote HTML HTML
@ManfredSteyer 1. Server: Load HTML Fragments from MF 2. Client:
Load MF via Federation (Hydration)
@ManfredSteyer Easy No Version Conflicts Lot of Experience
@ManfredSteyer
@ManfredSteyer ng add @angular/ssr ng add @angular-architects/native-federation …
@ManfredSteyer ng g @angular-architects/native-federation:remove … ng add @angular/ssr ng add
@angular-architects/native-federation …
@ManfredSteyer
@ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF
Frankenstein Biz Apps B2C Team Autonomy →
@ManfredSteyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@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