Sustainable SPAs with Strategic Design: A Wonderful Friendship?

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Sustainable SPAs with Strategic Design A Wonderful Friendship?
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer
7. @ManfredSteyer
8. @ManfredSteyer
9. @ManfredSteyer Manfred Steyer
10. @ManfredSteyer
11. @ManfredSteyer Strategic Design Tactical Design
12. @ManfredSteyer Strategic Design Tactical Design
13. @ManfredSteyer
14. @ManfredSteyer Example e-Procurement System e-Procurement System
15. @ManfredSteyer Catalog Catalog Approval Approval Specification Specification Ordering Ordering Example Sub-Domains
16. @ManfredSteyer
17. @ManfredSteyer Workspace
18. @ManfredSteyer Advantages No version conflicts No burden with distributing libs
19. @ManfredSteyer Creating a Workspace 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
20. @ManfredSteyer Moving back and forth Npm Registry
21. @ManfredSteyer https://nrwl.io/nx
22. @ManfredSteyer Visualize Module Structure
23. @ManfredSteyer Creating a Workspace 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
24. @ManfredSteyer
25. @ManfredSteyer Catalog Catalog Ordering Ordering 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 Shared Kernel (if really needed) & other libs Smart Comp. Dumb Comp.
26. @ManfredSteyer Catalog Catalog Ordering Ordering 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
27. @ManfredSteyer Catalog Catalog Ordering Ordering 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
28. @ManfredSteyer Application Domain Model Infrastructure Application Domain Model Infrastructure Isolate your domain! Domain Domain e. g. data access Use case specific facades, state management (optional) Entities, biz logic
29. @ManfredSteyer Alternatives to layering • e. g. Hexagonal Architecture, Clean Architecture • Anyway: We need to restrict access b/w libraries
30. @ManfredSteyer DEMO
31. @ManfredSteyer • • • •
32. @ManfredSteyer
33. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … @ManfredSteyer Flight App Flight App Deployment Monolith
34. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Microfrontends
35. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Option 1: One Monorepo Monorepo
36. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Option 2: One Repo per Domain Publish shared libs seperately via npm Repository n Repository 2 Repository 1
37. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
38. • • • • •
40. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops