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

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

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

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

April 19, 2021
Tweet

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