How to scale up your projects like a pro

Transcript

1. How to scale up your projects like a pro Luca Del Puppo
2. 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
3. Ego Slide Luca Del Puppo (aka Puppo) Full-Stack Developer at Flowing a Claranet Company @puppo92 https://www.linkedin.com/in/lucadelpuppo/ luca@delpuppo.net
4. What is Nx? 1
5. How to scale up your projects like a pro What is it? What is it? ➔ Smart 🤓 ➔ Fast ⚡ ➔ Extensible 🧱 🏗 Build System Built by nrwl
6. How to scale up your projects like a pro What is it? Nx is a CLI with many commands
7. How to scale up your projects like a pro What is it? Best Features
8. How to scale up your projects like a pro What is it? Run Task
9. How to scale up your projects like a pro What is it? Cache task results
10. How to scale up your projects like a pro What is it? Build and Test only affected code
11. How to scale up your projects like a pro What is it? Dependencies Graph
12. 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?
13. Tooling 2
14. 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
15. How it works? 3
16. • Applications • Libraries • Tools (generators and executors) Main Actors How to scale up your projects like a pro How it works?
17. Applications
18. How to scale up your projects like a pro Applications Applications are the glue(containers) of our libraries
19. How to scale up your projects like a pro Applications Real Applications E2E Applications Application Types
20. 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
21. Libraries
22. How to scale up your projects like a pro Libraries Libraries are the containers of specific business domains or utilities
23. How to scale up your projects like a pro Libraries Library Type Publishable Buildable Workspace
24. • 20% applications • 80% libraries Keep in mind Libraries 80% Applications 20%
25. 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
26. Tools Generators & Executors
27. 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
28. Visualize Dependencies 4
29. 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
30. How to scale up your projects like a pro What is it?
31. Demo 5 https://github.com/Puppo/nx-scale-your-projecs-react
32. Conclusion 6
33. 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)
34. How to scale up your projects like a pro Conclusion - Blog - Dev.to - Youtube - Slack - Book by @LayZeeDK - @juristr - @jeffbcross - @victorsavkin Resources & Influencers
35. Slides Code Slides & Code How to scale up your projects like a pro
36. “Thanks!” Luca Del Puppo @puppo92 https://www.linkedin.com/in/lucadelpuppo/ luca@delpuppo.net
37. Q&A Time