How to scale up your projects like a pro

Slide 1

Slide 1 text

How to scale up your projects like a pro Luca Del Puppo

Slide 2

Slide 2 text

1. What is Nx? 2. Tooling 3. How it works? Index How to scale up your projects like a pro Index 4. Visualize Deps 5. Demo 6. Conclusion

Slide 3

Slide 3 text

Ego Slide Luca Del Puppo (aka Puppo) Full-Stack Developer at Flowing a Claranet Company @puppo92 https://www.linkedin.com/in/lucadelpuppo/ [email protected]

Slide 4

Slide 4 text

What is Nx? 1

Slide 5

Slide 5 text

How to scale up your projects like a pro What is it? What is it? ➔ Smart 🤓 ➔ Fast ⚡ ➔ Extensible 🧱 🏗 Build System Built by nrwl

Slide 6

Slide 6 text

How to scale up your projects like a pro What is it? Nx is a CLI with many commands

Slide 7

Slide 7 text

How to scale up your projects like a pro What is it? Best Features

Slide 8

Slide 8 text

How to scale up your projects like a pro What is it? Run Task

Slide 9

Slide 9 text

How to scale up your projects like a pro What is it? Cache task results

Slide 10

Slide 10 text

How to scale up your projects like a pro What is it? Build and Test only aﬀected code

Slide 11

Slide 11 text

How to scale up your projects like a pro What is it? Dependencies Graph

Slide 12

Slide 12 text

How to scale up your projects like a pro What is it? Frontend Eco-System ● React ● NextJs ● Angular ● Web Component Backend Eco-System ● Node ● Express ● Fastify ● NestJs Who can run with Nx?

Slide 13

Slide 13 text

Tooling 2

Slide 14

Slide 14 text

How to scale up your projects like a pro Tooling Testing ● Jest ● Storybook ● Cypress Linting ● Eslint ● Prettier Out-Of-The-Box Tool Extensions ● Nx Console

Slide 15

Slide 15 text

How it works? 3

Slide 16

Slide 16 text

● Applications ● Libraries ● Tools (generators and executors) Main Actors How to scale up your projects like a pro How it works?

Slide 17

Slide 17 text

Applications

Slide 18

Slide 18 text

How to scale up your projects like a pro Applications Applications are the glue(containers) of our libraries

Slide 19

Slide 19 text

How to scale up your projects like a pro Applications Real Applications E2E Applications Application Types

Slide 20

Slide 20 text

Architect an Extensible Digital Garden with Next.js, Tailwind, and Nx https://egghead.io/courses/architect-an-extensible-digital-garden-wit h-next-js-tailwind-and-nx-53f7628f 💡 Tip How to scale up your projects like a pro Applications Scale React Development with Nx https://egghead.io/courses/scale-react-development-with-nx-4038

Slide 21

Slide 21 text

Libraries

Slide 22

Slide 22 text

How to scale up your projects like a pro Libraries Libraries are the containers of specific business domains or utilities

Slide 23

Slide 23 text

How to scale up your projects like a pro Libraries Library Type Publishable Buildable Workspace

Slide 24

Slide 24 text

● 20% applications ● 80% libraries Keep in mind Libraries 80% Applications 20%

Slide 25

Slide 25 text

Split your modules in libraries ⚠ Watch out! ⚠ It isn’t so easy peasy https://nx.dev/recipes/other/resolve-circular-dependenci es 💡 Tip How to scale up your projects like a pro Libraries

Slide 26

Slide 26 text

Tools Generators & Executors

Slide 27

Slide 27 text

How to scale up your projects like a pro Generators/Executors ➔ Create template for new libraries that follow your standard ➔ Create custom tasks ➔ Create executors to upgrade your code base

Slide 28

Slide 28 text

Visualize Dependencies 4

Slide 29

Slide 29 text

Command: nx graph ➔ Creates the deps graph in a Tab of the Browser ➔ Shows the aﬀected libraries ➔ Helps to monitor the structure of the codebase Dependencies Graph

Slide 30

Slide 30 text

How to scale up your projects like a pro What is it?

Slide 31

Slide 31 text

Demo 5 https://github.com/Puppo/nx-scale-your-projecs-react

Slide 32

Slide 32 text

Conclusion 6

Slide 33

Slide 33 text

How to scale up your projects like a pro Conclusion PROS ● Extensibile ● Configurable ● Give you more control to the structure of your codebase ● Helping to split in libraries/modules your codebase ● Mono-repo is not mandatory ● Build and Test only changes CONS ● You have to study and understand how it works ● You have to configure your own rules (optional)

Slide 34

Slide 34 text

How to scale up your projects like a pro Conclusion - Blog - Dev.to - Youtube - Slack - Book by @LayZeeDK - @juristr - @jeﬀbcross - @victorsavkin Resources & Influencers

Slide 35

Slide 35 text

Slides Code Slides & Code How to scale up your projects like a pro

Slide 36

Slide 36 text

“Thanks!” Luca Del Puppo @puppo92 https://www.linkedin.com/in/lucadelpuppo/ [email protected]

Slide 37

Slide 37 text

Q&A Time