Save 37% off PRO during our Black Friday Sale! »

Enterprise Angular with Nx: Sustainable Architectures & Fast Builds

Enterprise Angular with Nx: Sustainable Architectures & Fast Builds

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

June 29, 2021
Tweet

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 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 DEMO

  34. @ManfredSteyer

  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