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
Structure for Enterprise-Scale Angular Applicat...
Search
Manfred Steyer
PRO
March 21, 2023
Programming
0
660
Structure for Enterprise-Scale Angular Applications: Nx Monorepos, Micro Frontends, and Module Federation
Manfred Steyer
PRO
March 21, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
6
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
25
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
21
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
32
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
62
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
140
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
200
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
120
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
210
Other Decks in Programming
See All in Programming
ComposeでのPicture in Picture
takathemax
0
130
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.5k
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.3k
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
250
SwiftDataのカスタムデータストアを試してみた
1mash0
0
150
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
110
はじめてのPDFKit.pdf
shomakato
0
100
Ruby on Railroad: The Power of Visualizing CFG
ydah
0
310
API for docs
soutaro
4
1.7k
MySQL初心者が311個のカラムにNot NULL制約を追加していってALTER TABLEについて学んだ話
hatsu38
2
120
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
80
21k
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
600
Featured
See All Featured
Building Applications with DynamoDB
mza
94
6.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
How to Ace a Technical Interview
jacobian
276
23k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
600
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Side Projects
sachag
453
42k
Designing Experiences People Love
moore
142
24k
Statistics for Hackers
jakevdp
799
220k
What's in a price? How to price your products and services
michaelherold
245
12k
Transcript
@BASTAcon & @ManfredSteyer
@ManfredSteyer Contents • (npm-)Packages • Nx Monorepos • Strategic Design
and DDD • Microfrontends
@ManfredSteyer Manfred Steyer
@ManfredSteyer Monorepos
@ManfredSteyer Monorepo Structure
@ManfredSteyer Advantages Everyone uses the latest versions No version conflicts
No burden with distributing libs
@ManfredSteyer Tooling & Generator https://nrwl.io/nx
@ManfredSteyer Visualize Module Structure
@ManfredSteyer Creating a Workspace npm install -g @angular/cli ng new
workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
@ManfredSteyer Creating a Workspace npm install -g @angular/cli npm init
nx-workspace workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
@ManfredSteyer DEMO
@ManfredSteyer DDD in a nutshell
@ManfredSteyer Methodology for bridging the gap b/w requirements and architecture/
design
@ManfredSteyer
@ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a
System Design Patterns & Practices
@ManfredSteyer Domain Driven Design Strategic Design Tactical Design Decomposing a
System Design Patterns & Practices
@ManfredSteyer
@ManfredSteyer Example Flight System
@ManfredSteyer Booking Check-in Boarding Luggage Example Sub-Domains
@ManfredSteyer Finding Sub-Domains Book Flight Check-in Passenger Check-in Luggage Board
Plane Pickup Luggage Passenger Travel Agency Check-in Agent Boarding Agent
@ManfredSteyer Booking Boarding Bounded Context Ubiquitous Language Flight Price Seats
Passenger Tickets Flight Ticket
@ManfredSteyer Booking Luggage Boarding Check-in Context Map
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature UI
UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.
@ManfredSteyer DEMO
@ManfredSteyer
@ManfredSteyer Finegrained Libraries • Unit of recompilation* • Unit of
retesting • Access restrictions • Information Hiding • Easy: Just ng g lib … • Replacement for NgModules?
@ManfredSteyer Micro Frontends? Short outlook
@ManfredSteyer Booking App Check-in App Boarding App Luggage App Microfrontends
@ManfredSteyer
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … @ManfredSteyer Flight App Deployment Monolith
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App Microfrontends
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App Option 1: One App per Domain Monorepo
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App Option 2: One Monorepo per Domain Publish shared libs seperately via npm Repository n Repository 2 Repository 1
@ManfredSteyer Benefits Autonomous Teams Separate Development Separate Deployment Own architecture
decisions Own technology descisions
@ManfredSteyer Integration via Hyperlinks
@ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp
SPA
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Integration via Shell
@ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp
Shell
@ManfredSteyer
@ManfredSteyer Idea const Component = import('http://other-app/xyz') Does not work with
webpack/ Angular CLI Even lazy parts must be known at compile time!
@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //
Maps Urls in // webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntrypoint.js <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer Default Behavior Selecting the highest compatible version ^10.0 ^10.1
@ManfredSteyer Default Behavior Conflict: No highest compatible version ^11.0 ^10.1
@ManfredSteyer Example • Shell: my-lib: ^10.0 • MFE1: my-lib: ^10.1
• MFE2: my-lib: ^9.0 • MFE3: my-lib: ^9.1 Result: • Shell and MFE1 share ^10.1 • MFE2 and MFE3 share ^9.1
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true }
} 11.0 10.1
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion:
true // Error instead of warning! } } 11.0 10.1
@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }
@ManfredSteyer
@ManfredSteyer ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer 1) npm i @angular-architects/module-federation -D 2) ng g @angular-architects/module-federation:init
3) Adjust generated configuration 4) ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Wrap them into Web Components Angular App (MFE) React
App (MFE)
@ManfredSteyer
@ManfredSteyer await import('other-app/web-cmp');
@ManfredSteyer await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm);
@ManfredSteyer await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer Challanges • Bundle Size • Multiple Routers • Bootstrapping
Several Angular Instances • Share Platform-Object when same version is reused • Share ngZone
@ManfredSteyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation, Nx, DDD
12 chapters
@ManfredSteyer Choosing a Solution
@ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks
Legacy Apps or *very very* strong isolation? iframes Separate Deployment/ mix Technologies? Load Bundles on Demand Monolith little much yes no yes no Module Federation
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io