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