Building Scalable
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
Monorepos with NX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6169329/image__1_.png)
Nodebots book free!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/5051900/hero.png)
HI, IT'S ME
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6004960/DSC_3683-Edit.jpg)
<webapps/> are evolving
and we need to be up-to-date
The Micro * Way
how easy is to upgrade your app?
FRONTEND
BACKEND
DATABASE/CACHE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/4516144/redis.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/3293451/flat_550x550_075_f.u1.jpg)
{ }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/4516144/redis.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/3293451/flat_550x550_075_f.u1.jpg)
{ }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/4516144/redis.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/3293451/flat_550x550_075_f.u1.jpg)
{ }
team #1
team #2
team #3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6464054/Screen_Shot_2019-08-22_at_3.59.24_pm.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6464054/Screen_Shot_2019-08-22_at_3.59.24_pm.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6464054/Screen_Shot_2019-08-22_at_3.59.24_pm.png)
bundle
test
publish
lint
reporter
dev server
types
coverage
The Micro * Way
Way
The Micro *
The Macro *
Ownership
Flexibility
Innovation
Enforce technical decisions
Impacts
Monorepos
...can be a good solution
Can I use
as a PWA application
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/2565958/reactjs.png)
?
using
monorepos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/3914219/angular.png)
Organized
Tooling
Tasks
Traceability
Cross-project
Dependencies
Why monorepos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/5914959/Screen_Shot_2019-03-20_at_11.48.17_am.png)
In a
Single
Spot
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/5914942/nx.png)
npx create-nx-workspace --preset=react
// Starting a NX project
// Cypress Tests in Watch Mode
npx nx serve todo
npx nx run todo:e2e --watch
// Starting `todo` App
// Create New Project
yarn affected:build --base=main
// Running affected only
// E2E Tests
yarn affected:test --base=main
yarn affected:e2e --base=main
// Unit Tests
// Build
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/9137893/Screen_Shot_2021-11-24_at_11.44.57_am.png)
Programming Languages Support
DEMO
... or just "show me the code"
HOWEVER
HOWEVER
This can potentially
create new problems
Understand the problem
you want to solve
Step 1: Defining strategy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6855282/Screen_Shot_2019-12-05_at_12.45.15_am.png)
Releases can be a nightmare
Fast-forward
Time Machine
x
Release early
Release often
MASTER
BRANCH
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6451810/Screen_Shot_2019-08-18_at_4.04.17_pm.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6451810/Screen_Shot_2019-08-18_at_4.04.17_pm.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6451812/Screen_Shot_2019-08-18_at_4.06.40_pm.png)
Patch/Hotfix
Different Package Versions
Package Deprecations
Landkid
{1}
{2}
{3}
{4}
{5}
{2}
{6}
{5}
{1}
}
MASTER
BRANCH
{1}
{2}
{3}
{4}
{5}
{2}
{6}
{5}
{1}
}
MASTER
BRANCH
MASTER
BRANCH
{1}
{1}
{2}
{3}
{4}
{5}
{6}
}
{2}
{5}
{1}
MASTER
BRANCH
MASTER
BRANCH
Step 2: Developer Experience
Better Automation
Adding team owners as reviewers
Test Environment by changes
Changelogs
Codemods
Bundle size feedback
Comments in pull requests Priority for main bundles
Proactive actions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/9137942/Screen_Shot_2021-11-24_at_12.03.52_pm.png)
Real Example
Step 3: Enforce Technical Decisions
CSR or SSR
Lazy config
Types
Composition
Dev XP
Innovate
Experiments
Theming
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/7823722/Screen_Shot_2020-10-14_at_8.36.32_pm.png)
A/B Test
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6858390/Screen_Shot_2019-12-05_at_3.56.39_pm.png)
Performance priorization
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/7823731/analytics-web-client-in-ak-monorepo.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/7823662/Screen_Shot_2020-10-14_at_8.22.41_pm.png)
Alerts & monitoring
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/4513991/phrase.jpg)
<nx-recap/>
Think in architecture
Start with small steps
Migration plan
Define and enforce conventions
Monorepos can help
Thank you
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/38721/images/6169329/image__1_.png)
Building Scalable Monorepos with NX
By willmendesneto
Building Scalable Monorepos with NX
A quick introduction to monorepo strategies and how NX can help you in this journey
- 1,439