Miroslav Jonas / @meeroslav / nrwl.io / nx.dev
The Age of Monorepos
Slide 2
Slide 2 text
@meeroslav
WARNING!
Bad design
Flickering colors
Life-changing features
Slide 3
Slide 3 text
@meeroslav
Miroslav
Jonaš
@meeroslav
Slide 4
Slide 4 text
@meeroslav
Slide 5
Slide 5 text
@meeroslav
STATIC WEB
(pre JS era)
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
@meeroslav
Slide 8
Slide 8 text
@meeroslav
successfully confusing
recruiters since 1995
Slide 9
Slide 9 text
@meeroslav
Age
of
Scripting
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
@meeroslav
Age
of
jQuery
Slide 12
Slide 12 text
Age of SPAs
Slide 13
Slide 13 text
@meeroslav
Age
of
JAMStack
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
@meeroslav
Age
of
Monorepos
Slide 16
Slide 16 text
Homepage App
(framework X)
Every application*
UI Components
/
Design system
Backend
Service 1 Service 1 Service 1 Service 1 Service 1 Service 1 Service 1
Slide 17
Slide 17 text
Homepage App
(framework X)
Backend
Every application*
UI Components
/
Design system
Service 1 Service 1 Service 1 Service 1 Service 1 Service 1 Service 1
Admin Portal App
Mobile App
Utility
v1 v3 v2_beta
v1.0.1
~2.15.0 > 3.0.0
Slide 18
Slide 18 text
Homepage App
(framework X)
Backend
Every application*
UI Components
/
Design system
Service 1 Service 1 Service 1 Service 1 Service 1 Service 1 Service 1
Admin Portal App
Mobile App
Utility
v1 v3 v2_beta
v1.0.1
~2.15.0 > 3.0.0
Slide 19
Slide 19 text
Homepage App
(framework X)
Backend
Collocate
UI Components
/
Design system
Service 1 Service 1 Service 1 Service 1 Service 1 Service 1 Service 1
Admin Portal App
Mobile App
Utility
admin store api
Deploy every second week
Deploy on Tuesdays
Deploy on every change
Affected graph + deploy
Slide 26
Slide 26 text
Workspace analysis
Slide 27
Slide 27 text
Task orchestration
Test Build Lint
Build
Lint
Test
Build
Lint
Test
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Caching
Never { build, test, lint… } same code twice
{ build, test, lint,... }
Nx
Local cache
{ build, test, lint,... }
Nx
Local cache
CI provider
Slide 30
Slide 30 text
Distributed task execution
Main agent
Slide 31
Slide 31 text
Distributed task execution
Idle time
Idle time
Slide 32
Slide 32 text
Distributed task execution
Slide 33
Slide 33 text
Distributed task execution
Instant replay from cache
Slide 34
Slide 34 text
@meeroslav
Agent utilization
Optimal idle time
Slide 35
Slide 35 text
@meeroslav
Slide 36
Slide 36 text
Code constraints
Slide 37
Slide 37 text
Code constraints
store
checkout sales coupons
core
shared
admin
Slide 38
Slide 38 text
@meeroslav
Slide 39
Slide 39 text
@meeroslav
- onlyDependOnLibsWithTags
scope:store -> store or shared
- notDependOnLibsWithTags
scope:store !-> api
- bannedExternalImports
scope:shared !-> @angular/*
enforce-module-boundaries
Slide 40
Slide 40 text
@meeroslav
- banTransitiveDependencies
deps can get lost with update
- checkNestedExternalImports
shared !-> util -> @angular/*
- allowCircularSelfDependency
like living on the edge?
enforce-module-boundaries
@meeroslav
Monorepos make it easy
- code sharing
- code collocation
- powerful generators
- consistent tooling
- code constraints
Slide 51
Slide 51 text
@meeroslav
- developer mobility
- collaboration as default
- can change the organization
- greater confidence
- velocity increase
Not just a fancy tool
Slide 52
Slide 52 text
@meeroslav
Slide 53
Slide 53 text
@meeroslav
Use
nx.dev
Slide 54
Slide 54 text
@meeroslav
WHY BE A 10X
WHEN YOU CAN BE AN NX
DEVELOPER?
Slide 55
Slide 55 text
Miroslav Jonas / @meeroslav / nrwl.io / nx.dev
Thank you