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

https://bitbucket.org/atlassian/atlaskit-mk-2/pull-requests/7385

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

willmendesneto.github.io