Enterprise Angular with Nx: Sustainable Architectures & Fast Builds @JAX 2021

Transcript

1. @BASTAcon & @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Enterprise Angular with Nx: Sustainable Architectures & 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 What to Cache? ng build ng lint ng test ng e2e
27. @ManfredSteyer Where to Cache? File System Nx Cloud Custom Cache
28. @ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", […] } },
29. @ManfredSteyer Configuration (nx.json) "tasksRunnerOptions": { "default": { "runner": "@nrwl/workspace/tasks-runners/default", "options": { "cacheableOperations": ["build", "lint", "test", "e2e"], […] } } },
30. @ManfredSteyer Using nx build app-or-lib --with-deps
31. @ManfredSteyer Prerequisite for Incremental Builds ng g lib lib-name --buildable
32. @ManfredSteyer DEMO
33. @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
34. @ManfredSteyer DEMO
35. @ManfredSteyer Nx Console for Visual Studio Code
36. @ManfredSteyer • • • •
37. @ManfredSteyer
38. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer Smart Comp. Dumb Comp.
39. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer
40. @ManfredSteyer Automate
41. @ManfredSteyer Usage
42. @ManfredSteyer DEMO
43. @ManfredSteyer Free eBook ANGULARarchitects.io/book
44. @ManfredSteyer • • • •
45. @ManfredSteyer
46. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops