Scaling Frontend Architectures with Micro Frontends

London Software Craftsmanship Community

Transcript

1. @duffleit Scaling Architectures with Micro Frontends London Software Craftsmanship Community David Leitner - @duffleit
2. @duffleit @duffleit @duffleit david@squer.at David Leitner Lead Engineer
3. @duffleit “microservices are small and focused on one thing to be autonomous.”
4. @duffleit
5. @duffleit Why autonomous? ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
6. @duffleit Microservice Microservice Microservice DB DB DB Microservice Microservice Microservice DB DB DB
7. @duffleit Disclaimer: That's fine in 80 % of the cases. SPA API Gateway Microservice Microservice Microservice DB DB DB
8. @duffleit Microservice API Gateway SPA Microservice Microservice DB DB DB ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Parallel development Frontend Monolith
9. @duffleit Microservice API Gateway SPA Microservice Microservice DB DB DB SPA API Gateway Micro Frontends
10. @duffleit μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink
11. @duffleit
12. @duffleit ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development Based on the assumption to have fully verticalized systems. μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Approach 1: Hyperlink Connected Applications
13. @duffleit Approach 1: Hyperlink Connected Applications μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB ⛔ Overfetching ⛔ Overrequesting
14. @duffleit Approach 1: Hyperlink Connected Applications with Backend for Frontends μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB BFF Service BFF Service BFF Service BFF Service https://samnewman.io/patterns/architectural/bff/ Presentation Process Flow Domain Logic Data Presentation Process Flow Domain Logic Data
15. @duffleit Approach 1: Hyperlink Connected Applications with GraphQL μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB GraphQL Presentation Process Flow Domain Logic Data
16. @duffleit But,
17. @duffleit Hyperlink Integration breaks your SPA.
18. @duffleit We introduce a horizontal layer.
19. @duffleit μService Ordering μService DB μService μService DB DB Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB View Aggregation Layer Horizontal Layer Ripple Effect
20. @duffleit Only works on a very coarse grained level. Ordering Catalogue Hyperlink Hyperlink Dashboard
21. @duffleit Dashboard Profile Profile μService DB Catalogue μService DB Catalogue Ordering Ordering μService DB Dashboard μService DB
22. @duffleit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard All this are “Micro Frontends” One “Micro Frontend” per page. 2...n Micro Frontends per page.
23. @duffleit
24. @duffleit Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink Dashboard All this are “Micro Frontends” One “Micro Frontend” per page. 2...n Micro Frontends per page.
25. @duffleit How to integrate them? @duffleit
26. @duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration Server Side Integration Runtime Integration
27. @duffleit Repository Build & Deploy Server Browser Mono Repo package.json Composed Application Micro Frontend Build Time Integration MonoRepo ✔ Allows extensive code sharing and reuse. ✔ No Version Conflicts and burden with distributing libraries Angular Workspaces
28. @duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development
29. @duffleit Build Time Integration allows Static Site Generation
30. @duffleit Product Product Product new Product Product Page Product Page Product Page Product Page Static Files Scully Rebuild
31. @duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Build Time Integration ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development
32. @duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Server Side Integration e.g. Project Mosaic
33. @duffleit Based on the concept of Server Side Includes or Edge Side Includes
34. @duffleit Tailor is a Layout Server header fragment μService account fragment μService catalogue fragment μService maps your request to a template checkout-template.html ... dashboard.template.html profile-template.html
35. @duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Server Side Integration ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development
36. @duffleit @duffleit Round Trips
37. @duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend Runtime Integration Aggregating UI Routing, Templates, Lazy Loading Meta-SPA-Router
38. @duffleit Meta Framework Isolation & Composition Routing Messaging & Shared State Frontend 1 Frontend N ...
39. @duffleit A Meta Framework to handle Frameworks.
40. @duffleit Decomposing Meta Frameworks in real world use cases
41. @duffleit Isolation & Composition Routing Messaging & Shared State Frontend 1 Frontend N ... Option 1: One shared Framework Option 2: Independent “Framework”
42. @duffleit Isolation & Composition Routing Messaging & Shared State Frontend 1 Frontend N ... Module Federation with Webpack 5 (in beta.17) Option 1: E-Commerce One shared Framework
43. @duffleit Remote Remote Host Container Module Module Module Container Module Module Module Container Module Module Module fetch from `company.com/remote1` fetch from `company.com/remote2`
44. @duffleit webpack.remote.config.js
45. @duffleit webpack.host.config.js
46. @duffleit shell.js index.html
47. @duffleit Isolation & Composition Routing Messaging & Shared State Frontend 1 Frontend N ... Option 2: Banking Independent “Framework” Compiler Why “Framework”?
48. @duffleit @duffleit
49. @duffleit @duffleit
50. @duffleit Isolation & Composition Routing Messaging & Shared State Frontend 1 Frontend N ... Option 2: Banking Independent “Framework” Isolation & Composition Routing Messaging & Shared State Frontend 1 Frontend N ... Option 1: E-Commerce One shared Framework
51. @duffleit our environment is the index.html immutablewebapps.org index.html https://12factor.net/
52. @duffleit Repository Build & Deploy Server Browser Composed Application Micro Frontend ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Small Interface Surface ✔ Model around Business Domains ✔ Parallel development Runtime Integration
53. @duffleit Server Browser Runtime Integration Longliving App State in the frontend & verticals need to interact with each other. Server Side Integration Request Response Model Interactions between different Verticals are done on the Backend.
54. @duffleit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per Page Buildtime Integration Server Side Integration Runtime Integration
55. @duffleit Complexities: • UI/UX Consistency • Shared State • Resilience • Tracing/Analytics • Offline-First • ... ✔ Independent Deployments ✔ Distinct Operations ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
56. @duffleit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per Page Buildtime Integration Serverside Integration Runtime Integration
57. @duffleit
58. @duffleit Mix and Match Landing Shop Ordering hyperlink hyperlink <!–- SSIs --> <!--#include … --> <!--#include … --> APP SHELL Header Footer
59. @duffleit Micro-Frontends are Distributed Systems. The Final Secret:
60. @duffleit Everything that can go wrong will go wrong. The Final Secret: Murphy’s law
61. @duffleit Maybe start with a monolithic first approach.
62. @duffleit by: twitter.com/swardley
63. @duffleit @duffleit @duffleit squer.at/slides David Leitner Lead Engineer