Managing Monorepos with Nx - Nrwl/Nxの近況 -

Transcript

1. Managing Monorepos with Nx - Nrwl/Nxの近況 - ng-japan OnAir #12
2. Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2
3. Monorepo? Nx? 3
4. Monorepo • A single repository containing multiple projects ◦ Monorepo !== Monolith • Used by 4 ...
5. 5 https://nx.dev/
6. Nx • Developed by Nrwl • Monorepo management tool ◦ Modern web development ◦ Effective change detection ◦ Automated migration 6 “Develop like Google, Facebook and Microsoft”
7. Version histories • v1.x〜（April, 2018） ◦ Extensions for Angular CLI • v6.x ◦ Jest support • v7.x ◦ Cypress and Nest support • v8.x ◦ React, Next.js and Storybook support • v9.x ◦ Angular v9 support 7
8. $ npx create-nx-workspace : ? Workspace name (e.g., org name) workspace ? What to create in the new workspace angular-nest ? Application name web ? Default stylesheet format SASS(.scss) Creating a workspace 8
9. Nx workspace • Similar to Angular workspace • Single version policy ◦ package.json is a single source of truth 9
10. Scaffolding • Applications ◦ nx g @nrwl/angular:app • Libraries ◦ nx g @nrwl/angular:lib • Schematics ◦ nx g workspace-schematic 10
11. Testing • Jest ◦ nx test <project-name> • Cypress ◦ nx e2e <project-name-e2e> 11
12. $ npm i -D @nrwl/storybook $ npm i -D @storybook/angular @storybook/addon-knobs $ nx g @nrwl/angular:storybook-configuration # Run storybook $ nx run project-name:storybook # E2E with Cypress $ nx e2e project-name-e2e Storybook 12
13. Linting/Formatting • ESLint/TSLint ◦ nx lint ◦ nx workspace-lint • Prettier ◦ nx format:write ◦ '--uncommitted' option for lint-staged 13
14. enforce-module-boundaries • Dependency constraints https://nx.dev/web/guides/monorepo-tags 14
15. Dependency visualization • nx dep-graph • nx affected:dep-graph 15
16. Effective change detection • nx affected:lint • nx affected:test • nx affected:build • nx affected:e2e 16
17. Distributed caching for faster CI 17 https://blog.nrwl.io/distributed-caching-in-nx-164edfbc68e0
18. Nx ecosystem • Nx Console ◦ VS Code extension • Nx Plugin ◦ Custom builder • Nx Cloud ◦ Cloud distributed caching 18 https://nx.dev/nx-console
19. Nx v10 • https://github.com/nrwl/nx/issues/2152 ◦ Stability ◦ Smarter affected ◦ Distributed caching by default ◦ Mixing monorepo and polyrepo 19
20. Recap • Nx makes managing monorepos easy! ◦ Supports ◦ https://nx.dev/ • Try it now! 20 $ npx create-nx-workspace
21. Thank you! @puku0x Noriyuki Shinpuku