Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends in the Wild

Micro Frontends in the Wild

NDC London

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

January 23, 2020
Tweet

Transcript

  1. @duffleit Micro Frontends in the Wild . NDC London 2020

    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