Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope

Transcript

1. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Strategic Design in the Frontend: Moduliths & Micro Frontends ANGULARarchitects.io
2. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 "… and then someone will also create a guest area"
3. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 Frontends became quite powerful … and complex! Modern SPAs are far more than receivers of DTOs
4. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4
5. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 1) How to Structure our Frontends? (+ how Strategic Design can help) 2) Implementation with Frontend Moduliths and Micro Frontends 3) Demos and Live Coding 4) Labs Agenda
6. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
7. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Structure our Frontends? + how Strategic Design can help …
8. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Good Fences Makes Good Neighbors!
9. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Vertical Architectures < Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature Conway's law
10. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Find Good Verticals?
11. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Let's Try With Semantics … Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage
12. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Collaborative Modelling can Help
13. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Booking Boarding Flight Price Seats Passenger Tickets Flight Ticket Different Models: Clear Semantics → Less Deps
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Mindset & Techniques, Frontend devs can learn from Strategic Design
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Are These Slices the Same as in the Backend?
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Sometimes yes, …
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 …, sometimes no.
18. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Consider the Frontend Perspective Early
19. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Are These Slices "Real" Bounded Contexts?
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 If there is translation, the frontend can have a very simple ("cheap bargain") Bounded Context
21. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 "A bounded context owns the vertical slice of functionality [including the] presentation layer"
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 "[…] DDD folks […] can make the final mistake of exposing this complexity to the customer."
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Better Question: What can we Learn for the Frontend?
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 ✓ Different Models ✓ Look out for Semantics ✓ Look out for Pivotal Events ✓ Look at Processes ✓ Team up with Experts → Domain Knowlege ✓ Use Collaborative Modeling Takeaways
25. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Translation into Frontend Code
26. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Data Data Data Data Data Data Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 Smart Comp. Dumb Comp.
27. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 Booking Boarding Shared Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI Data Data Data Data Data Data Util Util Util Util Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 Smart Comp. Dumb Comp.
28. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 Booking Boarding Shared Feature Feature Feature UI UI UI Data Data Util Util Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 Feature Feature Feature Feature Feature Feature Feature UI Data Util UI Data Util
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Moduliths with Nx
30. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30
31. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 • Organize Repos and Project(s) Around Libraries • Module Boundaries • Build Cache • Dependency Graph Selected Features
32. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Moduliths with Sheriff
33. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @softarc/eslint-plugin-sheriff 33 Modularization Boundaries on a per-folder basis
34. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 DEMO
35. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 35 Micro Frontends
36. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 Micro Frontends Booking App Check-in App Boarding App Luggage App
37. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 Micro Frontends Help to Scale Projects to several teams!
38. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 Integration via Hyperlinks
39. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 UI Composition with Hyperlinks µApp SPA µApp SPA µApp SPA
40. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40
41. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 41
42. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 42 Integration via Shell
43. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 43 SPA-based Shell µService µFrontend µFrontend µFrontend Shell
44. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 44 Module Federation
45. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 45 Module Federation Shell (Host) Micro Frontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } import('mfe1/Cmp') // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' }
46. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 46 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
47. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 7 Alternatives Getting Popular TURBOPACK
48. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 48
49. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 49 DEMO
50. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 50 Multi-Framework/ Multi-Version Solutions
51. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 51 Not perfect :) Abstract them, e.g. via Web Components Different Versions or Frameworks? Angular App (MFE) React App (MFE) Coarse-grained Web Component
52. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 52 Result: Best of Both Worlds
53. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 53 DEMO https://red-ocean-0fe4c4610.azurestaticapps.net
54. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 54 More Details Workarounds for Zone.js and the Router Link
55. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 55 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx
56. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Costs of Micro Frontends
57. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 57 Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change
58. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 58 ✓ Domain thinking: also valueable in the frontend ✓ Different models, semantics, pivotal events ✓ Collaborative modelling together with domain experts ✓ Frontend Moduliths vs. Micro Frontends Conclusion
59. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 59
60. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 61 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io