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