'BUILDING ANGULAR APPS WITH NX' by Anastasia Necheporenko
Download as PPTX, PDF1 like471 views
This document discusses approaches to managing Angular applications, including using multiple repositories versus a monorepository. It notes advantages and disadvantages of each, such as isolation but also hard dependencies with multiple repos, versus easy code sharing but potential messiness with a monorepo. The document then introduces Nrwl Nx as an open-source tool that helps manage monorepos for Angular apps, providing features like dependency graphs, smart rebuilds, and code generators. However, it cautions that using Nx requires following its structure patterns and configurations, and migrating codebases and teams to its approach can also require effort.
'BUILDING ANGULAR APPS WITH NX' by Anastasia Necheporenko
- 1. Building Angular Apps with Nx Anastasia Necheporenko Thanks to my team, especially S. Mulyava
- 3. 3 www.luxoft.com Large application with multiple repositories Main App – Repo 1 Another App – Repo 11 Module 1 – Repo 2 Module 2 – Repo 3 Module 3 – Repo 4 Module 4 – Repo 6 Module 7 – Repo 9 … Shared UI – Repo 5 Shared BL – Repo 10
- 4. 4 www.luxoft.com Multiple repositories. Advantages Isolation Module`s Versioning Local small codebase
- 5. 5 www.luxoft.com Having multiple repositories. Disadvantages - Hard to find all affected places - Specific rules for each repo - Code duplication - Managing dependencies The diamond dependency problem
- 6. 6 www.luxoft.com Monorepo comes into play Easy code sharing Change`s affect is clear Easy best practice transitions between teams Single set of dependencies
- 7. 7 www.luxoft.com Monorepo. What are drawbacks ? - No code boundaries - ‘Heavy’ project (build, unit tests) - Mess in code organization - Immediately shared errors
- 8. 8 www.luxoft.com Nrwl Nx – open-source tool for Monorepo Victor Savkin Sources: https://medium.com/@vsavkin Jeff Cross https://medium.com/@jeffbcross
- 9. 9 www.luxoft.com Nx ecosystem Dependency graph Smart rebuilds of affected projects Computation caching Editor plugins Code generators Improved version migration process
- 10. 10 www.luxoft.com Nx - support for modern tools
- 11. 11 www.luxoft.com Time to show code
- 12. 12 www.luxoft.com Not everything is perfect - Structure pattern has to be followed - Documentation required - Several types of configurational files - Cost of migration to Nx - Cross-team collaboration on agreed-upon patters can be difficult - The codebases are forced to stay in sync
- 13. Thank You!
Editor's Notes
- #7: Shared code - Keeps your code DRY across your entire organization. Reuse validation code, UI components, and types across the codebase. Reuse code between the backend, the frontend, and utility libraries.
- #12: npx create-nx-workspace --preset=angular 1) Lib – heavy, apps-lightweight and runnable
- #13: Structure pattern has to be followed – one side view, organization inside lib is your choice