Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

May 06, 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 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