Building Scalable

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

Monorepos with NX 

- Access bit.ly/nodebots-book-en

- Decrease the price to $0,00

- Enjoy

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