Tweet
Tweet

Slide 1

Slide 1 text

How to scale up your angular projects like a pro Angular Day 2022 Luca Del Puppo

Slide 2

Slide 2 text

1. What is Nx? 2. Tooling 3. How it works? Index How to scale up your angular 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 @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 angular 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 angular projects like a pro What is it? Nx is a CLI with many commands

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

How to scale up your angular projects like a pro What is it? Frontend Eco-System ● Angular ● Web Component ● React ● NextJs 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 angular 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 angular projects like a pro How it works?

Slide 17

Slide 17 text

Applications

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Migrate Multiple Angular CLI apps into a Single Nx Monorepo https://www.youtube.com/watch?v=M5NwkRNrpK0 πŸ’‘ Tip How to scale up your angular projects like a pro Applications Migrate an Angular CLI app to Nx https://www.youtube.com/watch?v=dJG9zH30c-o

Slide 21

Slide 21 text

Libraries

Slide 22

Slide 22 text

How to scale up your angular 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 angular 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/recipe/resolve-circular-dependencies πŸ’‘ Tip How to scale up your angular projects like a pro Libraries

Slide 26

Slide 26 text

Tools Generators & Executors

Slide 27

Slide 27 text

How to scale up your angular 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 affected libraries βž” Helps to monitor the structure of the codebase Dependencies Graph

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Demo 5 https://github.com/puppo/angularday-2022

Slide 32

Slide 32 text

Conclusion 6

Slide 33

Slide 33 text

How to scale up your angular 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 angular projects like a pro Conclusion - Blog - Dev.to - Youtube - Slack - Book by @LayZeeDK - @juristr - @jeffbcross - @victorsavkin Resources & Influencers

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Q&A Time