Sustainable Angular Architectures: Strategic Design with Nx Monorepos

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Sustainable Angular Architectures: Strategic Design

   with Nx Monorepos

2. @ManfredSteyer

3. @ManfredSteyer

4. @ManfredSteyer

5. @ManfredSteyer Methodology for bridging the gap b/w requirements and architecture/

   design

6. @ManfredSteyer Monolith? Flight System Flight System

7. @ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage Sub-Domains

8. @ManfredSteyer

9. @ManfredSteyer

10. @ManfredSteyer Manfred Steyer

11. @ManfredSteyer

12. @ManfredSteyer Monorepo Structure

13. @ManfredSteyer Advantages Everyone uses the latest versions No version conflicts

14. @ManfredSteyer Two Flavors • Like Workspaces/Solutions in different IDEs Project

    Monorepo • E. g. used at Google or Facebook Company-wide Monorepo

15. @ManfredSteyer Moving back and forth Npm Registry

16. @ManfredSteyer Tooling & Generator https://nrwl.io/nx

17. @ManfredSteyer Visualize Module Structure

18. @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

19. @ManfredSteyer

20. @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 Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 @ManfredSteyer Smart Comp. Dumb Comp.

21. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API

    API 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

22. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature API

    API 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

23. @ManfredSteyer

24. @ManfredSteyer • • •

25. @ManfredSteyer

26. @ManfredSteyer Distributed Cache 1) npm install @apployees-nx/level-task-runner -D 2) npm

    install mongodown -D 3) Configure @apployees-nx/level-task-runner in nx.json

27. @ManfredSteyer

28. @ManfredSteyer Works with Several Databases MongoDB Redis MySQL PostgreSQL …

29. @ManfredSteyer Where‘s the Catch? Inofficial Solution Official Solution: Nx Cloud

    Nx Cloud: Far more possibilities

30. @ManfredSteyer Free eBook https://ANGULARarchitects.io/book

31. @ManfredSteyer

32. • • •

33. None

34. @ManfredSteyer d Slides & Examples Public: Frankfurt, Munich, Vienna In-House:

    everywhere http://softwarearchitekt.at/workshops