ManfredSteyer
Enterprise Angular with Nx:
Sustainable Architectures & Fast Builds
Manfred Steyer, ANGULARarchitects.io
@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@ManfredSteyer
Manfred Steyer
@ManfredSteyer
@ManfredSteyer
Monorepo
Structure
@ManfredSteyer
Advantages
Everyone uses the latest versions
No version conflicts
Sharing Libs: Easy
@ManfredSteyer
Moving back and forth
Npm Registry
@ManfredSteyer
Two Flavors
Project Monorepo
• Like Workspaces/Solutions in different IDEs
Company-wide Monorepo
• E. g. used at Google or Facebook
@ManfredSteyer
Creating a Workspace with the CLI
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
Tooling & Generator
https://nrwl.io/nx
@ManfredSteyer
Visualize
Module
Structure
@ManfredSteyer
Creating a Workspace with the CLI
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 with Nx
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
@ManfredSteyer
Creating a Workspace with NX
npm install -g @angular/cli
npm init nx-workspace myworkspace
cd workspace
ng generate app my-app
ng generate lib my-lib --directory my-domain
ng serve --project my-app
ng build --project my-app
@ManfredSteyer
DEMO
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
Tagging Apps and Libs (nx.json)
"booking": {
"tags": ["domain:booking", "type:app"]
},
"booking-feature-search": {
"tags": ["domain:booking", "type:feature"]
},
@ManfredSteyer
Tagging Apps and Libs (nx.json)
"booking": {
"tags": ["domain:booking", "type:app"]
},
"booking-feature-search": {
"tags": ["domain:booking", "type:feature"]
},
@ManfredSteyer
Linting (.eslintrc)
{
"sourceTag": "domain:booking",
"onlyDependOnLibsWithTags":
["domain:booking", "domain:shared"]
}
@ManfredSteyer
DEMO
@ManfredSteyer
@ManfredSteyer
Options
File System
Nx Cloud
Custom Cache
@ManfredSteyer
Configuration (nx.json)
"tasksRunnerOptions": {
"default": {
"runner": "@nrwl/workspace/tasks-runners/default",
[…]
}
},
@ManfredSteyer
Configuration (nx.json)
"tasksRunnerOptions": {
"default": {
"runner": "@nrwl/workspace/tasks-runners/default",
"options": {
"cacheableOperations": ["build", "lint", "test", "e2e"],
[…]
}
}
},
@ManfredSteyer
Using
nx build app-or-lib --with-deps
@ManfredSteyer
Prerequisite for Incremental Builds
ng g lib lib-name --buildable
@ManfredSteyer
DEMO
@ManfredSteyer
Also Test and Lint-Results Can be Cached
nx build app-or-lib --with-deps
nx lint app-or-lib --with-deps
nx test app-or-lib --with-deps
nx e2e app-or-lib --with-deps
@ManfredSteyer
DEMO
@ManfredSteyer
@ManfredSteyer
Nx Console
for Visual
Studio Code
@ManfredSteyer
•
•
•
•
@ManfredSteyer
@ManfredSteyer
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 @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
@ManfredSteyer @ManfredSteyer
Automate
@ManfredSteyer
Usage
@ManfredSteyer
DEMO
@ManfredSteyer
Free eBook
ANGULARarchitects.io/book
@ManfredSteyer
•
•
•
•
@ManfredSteyer
@ManfredSteyer
Slides & Examples
Remote and In-House
http://softwarearchitekt.at/workshops
d
@ManfredSteyer
