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
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
45
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
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
430
Micro Frontends with Web Standards
manfredsteyer
PRO
1
320
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
230
Other Decks in Programming
See All in Programming
Sheets API使ってみた
toshi0383
2
170
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4k
業務ツールとして使うPostman
msys75
0
110
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
Going beyond Apache Parquet's default settings
xhochy
0
140
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.8k
VS Code をプロダクトにどう取り込むか
onomax
1
770
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.6k
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.6k
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
920
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
For a Future-Friendly Web
brad_frost
172
9k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Become a Pro
speakerdeck
PRO
13
4.6k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Making Projects Easy
brettharned
109
5.5k
Writing Fast Ruby
sferik
622
60k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Embracing the Ebb and Flow
colly
80
4.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