How to scale up your angular projects like a pro

Transcript

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