@BASTAcon & @ManfredSteyer
Typical Module Structure
AppModule … SharedModule
SharedModule
Root Module Feature Modules Shared Modules
Page ▪ 3 @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
@ManfredSteyer
Domain Driven Design
Design Patterns
Decomposing a System
& Practices
Strategic Design Tactical Design
@ManfredSteyer
Domain Driven Design
Design Patterns
Decomposing a System
& Practices
Strategic Design Tactical Design
@ManfredSteyer
@ManfredSteyer
Example
Flight System
@ManfredSteyer
Example
Booking Check-in
Sub-Domains
Luggage Boarding
@ManfredSteyer
Finding Sub-Domains
Travel Agency Check-in Agent Boarding Agent
Passenger
Book Check-in Check-in Board Pickup
Flight Passenger Luggage Plane Luggage
@ManfredSteyer
Booking Boarding
Flight
Flight Ticket
Price
Seats Ubiquitous Language
Tickets Bounded Context
Passenger
@ManfredSteyer
Context Map
Boarding Booking Luggage
Check-in
@ManfredSteyer
Shared Kernel (if really needed) & other libs
Smart
Comp. Booking Boarding Shared
Dumb Comp.
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
@ManfredSteyer Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7
@ManfredSteyer
DEMO
@ManfredSteyer
@ManfredSteyer
Finegrained Libraries
• Unit of recompilation
• Unit of retesting
• Access restrictions
• Information Hiding
• Easy: Just ng g lib …
• Future replacement for
NgModules?
@ManfredSteyer
Micro
Frontends?
Short outlook
@ManfredSteyer
Microfrontends
Booking App Check-in App
Luggage App Boarding App
@ManfredSteyer
@ManfredSteyer
Deployment Monolith
Booking Boarding Shared
Flight App
Feature Feature Feature Feature Feature
… … … … … … … … …
@ManfredSteyer @ManfredSteyer
Microfrontends
Booking Boarding Shared
Booking App Boarding App
Feature Feature Feature Feature Feature
… … … … … … … … …
@ManfredSteyer
Option 1: One App per Domain
Booking Boarding Shared
Booking App Boarding App
Feature Feature Feature Feature Feature
… … … … … … … … …
Monorepo
@ManfredSteyer
Option 2: One Monorepo per Domain
Booking Boarding Shared
Publish shared libs
Booking App Boarding App seperately via npm
Feature Feature Feature Feature Feature
… … … … … … … … …
Repository 1 Repository 2
@ManfredSteyer Repository n
Benefits
Autonomous Teams
Separate Development
Separate Deployment
Own architecture decisions
Own technology descisions
@ManfredSteyer
Integration via
Hyperlinks
@ManfredSteyer
UI Composition
w/ Hyperlinks
µApp µApp µApp
SPA SPA SPA
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
Integration via
Shell
@ManfredSteyer
Providing a (SPA based) Shell
Shell
µApp µService
µApp µApp
@ManfredSteyer
@ManfredSteyer
Idea
Does not work with
webpack/ Angular CLI
const Component = import('http://other-app/xyz')
Even lazy parts must be
known at compile time!
@ManfredSteyer
Webpack 5 Module Federation
Shell (Host) Microfrontend (Remote)
import('mfe1/Cmp')
// Maps Urls in // Expose files in
// webpack config // webpack config
remotes: { exposes: {
mfe1: "http://..." Cmp: './my.cmp.ts'
} }
@ManfredSteyer
How to Get the Microfrontend's URL?
Shell (Host) Microfrontend (Remote)
<script src="…"></script> RemoteEntrypoint.js
@ManfredSteyer
How to Share Libs?
Shell (Host) Microfrontend (Remote)
shared: [ shared: [
"@angular/core", "…" "@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 React App
(MFE) (MFE)
@ManfredSteyer
@ManfredSteyer
await import('other-app/web-cmp');
@ManfredSteyer
const rootElm = document.createElement('web-cmp')
document.body.appendChild(rootElm);
await import('other-app/web-cmp');
@ManfredSteyer
WrapperComponent
const rootElm = document.createElement('web-cmp')
document.body.appendChild(rootElm);
await import('other-app/web-cmp');
@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
Choosing a Solution
@ManfredSteyer
Some General Advice
Module Federation
little
Hyperlinks
Shared state,
navigation b/w yes iframes
apps Legacy Apps or
yes Load Bundles on
*very very* strong
much Demand
isolation? Separate
no Deployment/ mix
Technologies?
no Monolith
@ManfredSteyer
