Building Scalable
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
Monorepos with NX

Nodebots book free!

HI, IT'S ME

<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


{ }


{ }


{ }
team #1
team #2
team #3



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

?
using
monorepos

Organized
Tooling
Tasks
Traceability
Cross-project
Dependencies
Why monorepos

In a
Single
Spot

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

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

Releases can be a nightmare
Fast-forward
Time Machine
x
Release early
Release often
MASTER
BRANCH



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

Real Example
Step 3: Enforce Technical Decisions
CSR or SSR
Lazy config
Types
Composition
Dev XP
Innovate
Experiments
Theming

A/B Test

Performance priorization


Alerts & monitoring

<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

Building Scalable Wilson Mendes @willmendesneto Google Developer Expert Web technologies Monorepos with NX
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,733