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
November 09, 2023
Programming
1
490
Micro Frontends with Modern Angular
Manfred Steyer
PRO
November 09, 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
40
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
31
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
84
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
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
雑に思考を整理する技術と効能
konifar
60
29k
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Site Reliability Engineering for GMO
pyama86
8
1k
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
380
PHPはいつから死んでいるかの調査
chiroruxx
1
400
新宿ダンジョンを可視化してみた
satoshi7190
2
260
ゆるい個人開発のススメ
kuroppe1819
10
990
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
500
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Snowflakeで眠ったデータを起こそう!
estie
0
120
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
RailsConf 2023
tenderlove
4
540
A Tale of Four Properties
chriscoyier
151
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Designing the Hi-DPI Web
ddemaree
276
33k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
For a Future-Friendly Web
brad_frost
172
9k
Navigating Team Friction
lara
178
13k
Building Applications with DynamoDB
mza
88
5.6k
KATA
mclloyd
15
12k
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
@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 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