@ManfredSteyer
Create Library with CLI >= 6
npm install -g @angular/cli
ng new lib-project
cd lib-project
ng generate library logger-lib
ng generate application playground-app
ng serve --project playground-app
ng build --project logger-lib
Slide 7
Slide 7 text
@ManfredSteyer
Folder
Structure
Slide 8
Slide 8 text
@ManfredSteyer
Create Library with CLI >= 6
npm install -g @angular/cli
ng new lib-project --create-application false
cd lib-project
ng generate library logger-lib
ng generate application playground-app
ng serve --project playground-app
ng build --project logger-lib
Slide 9
Slide 9 text
@ManfredSteyer
Publishing
Slide 10
Slide 10 text
@ManfredSteyer
Publishing to npm Registry
• Increment version in package.json
• ng build --project logger-lib
• npm publish --registry http://localhost:4873
• npm install --registry http://localhost:4873
Slide 11
Slide 11 text
@ManfredSteyer
Alternatives for setting the Registry
• Global: npm set registry http://localhost:4873
• Default: registry.npmjs.org
• npm get registry
• Project: .npmrc in project root
Slide 12
Slide 12 text
@ManfredSteyer
npm Registries
Nexus Artifactory
Team
Foundation
Server
Verdaccio
npm i -g verdaccio
verdaccio
Slide 13
Slide 13 text
@ManfredSteyer
DEMO
Slide 14
Slide 14 text
@ManfredSteyer
Advantages
• Distribution
• Versioning
Slide 15
Slide 15 text
@ManfredSteyer
Disadvantages
• Distribution
• Versioning
;-)
Slide 16
Slide 16 text
@ManfredSteyer
Disadvantages
Distribution
• Annoying
within project
• Prevents
gritting further
libs
Versioning
• Old versions
• Conflicts
• How to force
devs to use
latest version?
Slide 17
Slide 17 text
@ManfredSteyer
Monorepos
Slide 18
Slide 18 text
@ManfredSteyer
Monorepo
Structure
Slide 19
Slide 19 text
@ManfredSteyer
Advantages
Everyone uses the latest versions
No version conflicts
No burden with distributing libs
Creating new libs: Adding folder
Experience: Successfully used at Google, Facebook, …
Slide 20
Slide 20 text
@ManfredSteyer
Two Flavors
• Like Workspaces/Solutions in different IDEs
Project Monorepo
• E. g. used at Google or Facebook
Company-wide Monorepo
@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
Slide 25
Slide 25 text
@ManfredSteyer
Creating a Workspace
npm install -g @angular/cli
npm init nx-workspace myworkspace
cd workspace
ng generate app my-app
ng generate lib my-lib
ng serve --project my-app
ng build --project my-app
Slide 26
Slide 26 text
@ManfredSteyer
DEMO
Slide 27
Slide 27 text
@ManfredSteyer
LAB
Slide 28
Slide 28 text
@ManfredSteyer
DDD
in a nutshell
Slide 29
Slide 29 text
@ManfredSteyer
Methodology for
bridging the gap b/w
requirements and
architecture/ design
Slide 30
Slide 30 text
@ManfredSteyer
Slide 31
Slide 31 text
@ManfredSteyer
Slide 32
Slide 32 text
@ManfredSteyer
Domain Driven Design
Strategic Design Tactical Design
Decomposing a System
Design Patterns
& Practices
Slide 33
Slide 33 text
@ManfredSteyer
Domain Driven Design
Strategic Design Tactical Design
Decomposing a System
Design Patterns
& Practices
Slide 34
Slide 34 text
@ManfredSteyer
Slide 35
Slide 35 text
@ManfredSteyer
Example
Flight System
Flight System
@ManfredSteyer
Application
Domain Model
Infrastructure
Application
Domain Model
Infrastructure
Isolate your domain!
Domain
Domain
e. g. data access
Use case specific facades,
state management
Entities, biz logic
Slide 45
Slide 45 text
@ManfredSteyer
Alternatives to
layering
• e. g. Hexagonal Architecture, Clean Architecture
• Anyway: We need to restrict access b/w libraries
Slide 46
Slide 46 text
@ManfredSteyer
DEMO
Slide 47
Slide 47 text
@ManfredSteyer
Finegrained Libraries
• Unit of recompilation
• Unit of retesting
• Access restrictions
• Information Hiding
• Easy: Just ng g lib …
• Future replacement for
NgModules?
@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
How to Get the Microfrontend's URL?
Shell (Host) Microfrontend (Remote)
RemoteEntrypoint.js
Slide 66
Slide 66 text
@ManfredSteyer
How to Share Libs?
Shell (Host) Microfrontend (Remote)
shared: [
"@angular/core", "…"
]
shared: [
"@angular/core", "…"
]
Slide 67
Slide 67 text
@ManfredSteyer
DEMO
Slide 68
Slide 68 text
@ManfredSteyer
Example for SemVer and Fallback
• Shell: my-lib: ^10.0.0
• MFE1: my-lib: ^10.1.1
• MFE2: my-lib: ^9.0.0
Result:
• Shell and MFE1 share ^10.1.1
• MFE2 falls back to its own version ^9.0.0
Slide 69
Slide 69 text
@ManfredSteyer
However …
• Shell: my-lib: ^10.0.0
• MFE1: my-lib: ^10.1.1
+ MFE1: dynamic Module Federation
Result:
• Shell uses ^10.0.0
• MFE1 falls back to its own version ^10.1.1
@ManfredSteyer
Well …
Webpack 5 is currently beta
Shown examples: PoC w/ custom webpack conf + patched CLI lib
CLI: Not before version 11 (fall 2020)
Custom Builder (e. g. ngx-build-plus)
Slide 75
Slide 75 text
@ManfredSteyer
Free eBook
ANGULARarchitects.io/book
Updated for Module Federation
and Alternatives
Slide 76
Slide 76 text
@ManfredSteyer
Choosing a Solution
Slide 77
Slide 77 text
@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
Not a good fit for public web sites