Enterprise Angular with Nx: Robust Architectures and Fast Builds @iJS London 2021

Transcript

1. @BASTAcon & @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Enterprise Angular with Nx: Robust Architectures and Fast Builds
2. @BASTAcon & @ManfredSteyer
3. @BASTAcon & @ManfredSteyer
4. @BASTAcon & @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer Manfred Steyer
7. @ManfredSteyer
8. @ManfredSteyer Monorepo Structure
9. @ManfredSteyer Advantages Everyone uses the latest versions No version conflicts Sharing Libs: Easy
10. @ManfredSteyer Moving back and forth Npm Registry
11. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project Monorepo • E. g. used at Google or Facebook Company-wide Monorepo
12. @ManfredSteyer Creating a Workspace with the CLI npm install -g @angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
13. @ManfredSteyer Tooling & Generator https://nrwl.io/nx
14. @ManfredSteyer Visualize Module Structure
15. @ManfredSteyer Creating a Workspace with the CLI npm install -g @angular/cli ng new workspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
16. @ManfredSteyer Creating a Workspace with Nx npm install -g @angular/cli npm init nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib ng serve --project my-app ng build --project my-app
17. @ManfredSteyer Creating a Workspace with NX npm install -g @angular/cli npm init nx-workspace myworkspace cd workspace ng generate app my-app ng generate lib my-lib --directory my-domain ng serve --project my-app ng build --project my-app
18. @ManfredSteyer DEMO
19. @ManfredSteyer
20. @ManfredSteyer
21. @ManfredSteyer Tagging Apps and Libs (nx.json) "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
22. @ManfredSteyer Tagging Apps and Libs (nx.json) "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
23. @ManfredSteyer Linting (.eslintrc) { "sourceTag": "domain:booking", "onlyDependOnLibsWithTags": ["domain:booking", "domain:shared"] }
24. @ManfredSteyer DEMO
25. @ManfredSteyer
26. @ManfredSteyer Options File System Nx Cloud Custom Cache
27. @ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", […] } },
28. @ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", "options": { "cacheableOperations": ["build", "lint", "test", "e2e"], […] } } },
29. @ManfredSteyer Using nx build app-or-lib --with-deps
30. @ManfredSteyer Prerequisite for Incremental Builds ng g lib lib-name --buildable
31. @ManfredSteyer DEMO
32. @ManfredSteyer Also Test and Lint-Results Can be Cached nx build app-or-lib --with-deps nx lint app-or-lib --with-deps nx test app-or-lib --with-deps nx e2e app-or-lib --with-deps
33. @ManfredSteyer Nx Console for Visual Studio Code
34. @ManfredSteyer • • • •
35. @ManfredSteyer Free eBook ANGULARarchitects.io/book
36. @ManfredSteyer • • • •
37. @ManfredSteyer
38. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops