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