Beyond Micro Frontends: Frontend Moduliths for the Enterprise

# Example
https://github.com/manfredsteyer/nx-ddd-demo

# Free eBook on Angular Architectures
https://www.angulararchitects.io/book

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Beyond Micro Frontends: Frontend Moduliths for the Enterprise
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App
5. @ManfredSteyer
6. @ManfredSteyer
7. @ManfredSteyer
8. @ManfredSteyer
9. @ManfredSteyer
10. @ManfredSteyer Manfred Steyer
11. @ManfredSteyer
12. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App
13. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Repository n Repository 2 Repository 1 Strict Borders
14. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Repository n Repository 2 Repository 1 Strict Borders
15. @ManfredSteyer
16. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Published via npm: Pain! SPA: Download into the Browser Version Mismatches?
17. @ManfredSteyer
18. @ManfredSteyer Monorepo Structure
19. @ManfredSteyer Everyone uses the latest versions No version conflicts Sharing Libs: Easy
20. @ManfredSteyer Npm Registry
21. @ManfredSteyer https://nrwl.io/nx
22. @ManfredSteyer Visualize Module Structure
23. @ManfredSteyer
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
27. @ManfredSteyer "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
28. @ManfredSteyer { "sourceTag": "domain:booking", "onlyDependOnLibsWithTags": ["domain:booking", "domain:shared"] }
29. @ManfredSteyer DEMO
30. @ManfredSteyer
31. @ManfredSteyer
32. @ManfredSteyer
33. @ManfredSteyer
34. @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.
35. @ManfredSteyer Automate
36. @ManfredSteyer DEMO
37. @ManfredSteyer
38. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Access Restrictions Separate Apps/ Builds/ Deployments Better Build Times !!!
39. @ManfredSteyer µFrontend SPA µFrontend SPA µFrontend SPA
40. @ManfredSteyer µService µFrontend µFrontend µFrontend Shell Webpack Module Federation
41. @ManfredSteyer Free eBook ANGULARarchitects.io/book
42. @ManfredSteyer • • • •
43. @ManfredSteyer
44. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops