MicroFrontends in the Wild

GeeCon Prague

1. @duffleit Micro Frontends in the Wild . GeeCon Prague 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 another 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 Two Definitions of 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 Two Definitions of 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 A Meta Framework to handle Frameworks.
39. @duffleit Meta Framework Isolation & Composition Routing Messaging & Shared State Web Platform Isolation & Composition Routing Frontend 1 Frontend N ... Frontend N Frontend 1 ...
40. @duffleit @duffleit
41. @duffleit @duffleit
42. @duffleit index.html Meta Framework Isolation & Composition Routing Messaging & Shared State Web Platform Isolation & Composition Routing Messaging & Shared State Frontend N Frontend 1 ... Frontend N Frontend 1 ... Frontend N + 1
43. @duffleit our environment is the index.html immutablewebapps.org index.html https://12factor.net/
44. @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
45. @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.
46. @duffleit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per Page Buildtime Integration Serverside Integration Runtime Integration
47. @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
48. @duffleit 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends per Page Buildtime Integration Serverside Integration Runtime Integration
49. @duffleit
50. @duffleit Mix and Match Landing Shop Ordering hyperlink hyperlink <!–- SSIs --> <!--#include … --> <!--#include … --> APP SHELL Header Footer
51. @duffleit Micro-Frontends are Distributed Systems. The Final Secret:
52. @duffleit Everything that can go wrong will go wrong. The Final Secret: Murphy’s law
53. @duffleit Maybe start with a monolithic first approach.
54. @duffleit by: twitter.com/swardley
55. @duffleit @duffleit @duffleit squer.at/slides David Leitner Lead Engineer