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
September 27, 2023
Programming
0
280
Micro Frontends with Modern Angular
Manfred Steyer
PRO
September 27, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
36
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
110
Successful with Signals: 3 Effective Rules @FrankenJS
manfredsteyer
PRO
0
200
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
110
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
210
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
80
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
130
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
100
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
280
Other Decks in Programming
See All in Programming
Swift Attributes
hokuron
0
130
Community-driven RBS repository
pocke
2
390
gRPCでの効率的なAPI開発とテストの進め方
uo
2
170
Does Ruby Parser dream of highly expressive grammar?
andpad
0
110
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
180
「ソフトウェア設計」のドメイン - 「データモデリングでドメインを駆動する」を読んで
hidenorigoto
6
2k
Reactive Java REST APIs, FTW? Virtual JUG 2024
mraible
PRO
0
400
#kaigieffect LT 2024 - rexml-css_selector: A REXML extension for supporting CSS selector
makenowjust
1
180
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
12
640
Why Spring Matters to Jakarta EE - And Vice Versa
ivargrimstad
0
200
CQRS+ES解体新書 / CQRS ES Disassembly Book
nrslib
7
720
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
76k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Designing the Hi-DPI Web
ddemaree
276
33k
What's in a price? How to price your products and services
michaelherold
238
11k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Product Roadmaps are Hard
iamctodd
45
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
How GitHub (no longer) Works
holman
305
140k
Typedesign – Prime Four
hannesfritz
36
2.1k
YesSQL, Process and Tooling at Scale
rocio
165
13k
The Language of Interfaces
destraynor
151
23k
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