MicroFrontends

 MicroFrontends

DevoxxPL (Krakow, Poland)

http://devoxx.pl

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

June 24, 2019
Tweet

Transcript

  1. @duffleit leitner.io @duffleit leitner.io Micro Frontends a Strive for Fully

    Verticalized Systems Devoxx Poland
  2. @duffleit leitner.io David Leitner @duffleit

  3. @duffleit leitner.io “the idea of micro frontends is to extend

    the concept of micro services to the frontend world.” micro-frontends.org
  4. @duffleit leitner.io Secret 1: That's fine in 80 % of

    the cases. SPA API Gateway Microservice Microservice Microservice DB DB DB
  5. @duffleit leitner.io Monolith API Gateway SPA DB Secret 2: That's

    also fine in 80 % of the cases.
  6. @duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB

    DB
  7. @duffleit leitner.io Sam Newman “microservices are small and focused on

    one thing to be autonomous.”
  8. @duffleit leitner.io Why autonomous? ✔ Independent Deployments ✔ Distinct Operations

    ✔ Technology Agnostic ✔ Model around Business Domains ✔ Small Interface Surface ✔ Parallel development
  9. @duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB

    DB ❌ Independent Deployments ❌ Distinct Operations ❌ Technology Agnostic ❌ Small Interface Surface ❌ Parallel development Frontend Monolith
  10. @duffleit leitner.io Microservice API Gateway SPA Microservice Microservice DB DB

    DB SPA API Gateway Micro Frontends
  11. @duffleit leitner.io μService Ordering μService DB μService μService DB DB

    Catalogue Profile μService DB DB Hyperlink Hyperlink
  12. @duffleit leitner.io ✔ 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 leitner.io μService Ordering μService DB μService μService DB DB

    Catalogue Profile μService DB DB Hyperlink Hyperlink Dashboard Hyperlink μService DB ⛔ Overfetching ⛔ Overrequesting Approach 1: Hyperlink Connected Applications
  14. @duffleit leitner.io 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 leitner.io 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 leitner.io The more coarse-grained you can go, the more

    coarse-grained you should go. Or: Think big.
  17. @duffleit leitner.io But,

  18. @duffleit leitner.io Hyperlink Integration breaks your SPA.

  19. @duffleit leitner.io

  20. @duffleit leitner.io μ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
  21. @duffleit leitner.io Dashboard Profile Profile μService DB Catalogue μService DB

    Catalogue Ordering Ordering μService DB Dashboard μService DB
  22. @duffleit leitner.io Dashboard Profile Catalogue Ordering Ordering Catalogue Hyperlink Hyperlink

    Dashboard How to slice? One “Micro Frontend” per page. 2...n Micro Frontends per page.
  23. @duffleit leitner.io How to integrate them?

  24. @duffleit leitner.io Repository Build & Deploy Server Browser Composed Application

    Micro Frontend Build Time Integration Server Side Integration Runtime Integration
  25. @duffleit leitner.io Repository Build & Deploy Server Browser Mono Repo

    package.json Composed Application Micro Frontend Build Time Integration MonoRepo ✔ Allows extensive code sharing and reuse. ✔ Simplifies Dependency Management. Angular Workspaces
  26. @duffleit leitner.io 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
  27. @duffleit leitner.io Repository Build & Deploy Server Browser Composed Application

    Micro Frontend Server Side Integration Project Mosaic
  28. @duffleit leitner.io Based on the concept of Server Side Includes

    or Edge Side Includes ⛔ JS and CSS global scoped ⛔ Round-Trips are needed
  29. @duffleit leitner.io 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
  30. @duffleit leitner.io supports Javascript-Isolation init(fragment-dom){ ... } How about account

    fragment μService html script styles 1...n
  31. @duffleit leitner.io supports Javascript-Isolation account fragment μService html script styles

    1...n init(fragment-dom){ ... } isolate CSS: naming-convention like BEM
  32. @duffleit leitner.io 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
  33. @duffleit leitner.io Repository Build & Deploy Server Browser Composed Application

    Micro Frontend Runtime Integration Aggregating UI Routing, Templates, Lazy Loading
  34. @duffleit leitner.io Meta Frame Works

  35. @duffleit leitner.io Component Driven Development Routing State Management Dependency Injection

    ...
  36. @duffleit leitner.io the Meta Framework will be the Framework.

  37. @duffleit leitner.io the aggregation is done on a single point.

    Aggregating UI
  38. @duffleit leitner.io the aggregation and configuration is done on a

    single point. Aggregating UI
  39. @duffleit leitner.io the aggregation and configuration is done on a

    single point. immutablewebapps.org index.html https://12factor.net/
  40. @duffleit leitner.io 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
  41. @duffleit leitner.io Ok, which one to use?

  42. @duffleit leitner.io Server Browser Server Side Integration Runtime Integration Request

    Response Model Interactions between different Verticals are done on the Backend. Longliving App State in the frontend & verticals need to interact with each other.
  43. @duffleit leitner.io Cool, anything that can go wrong?

  44. @duffleit leitner.io UI/UX Consistency Shared State Resilience Tracing/Analytics Offline-First ...

  45. @duffleit leitner.io 1 Micro-Frontend per Page Hyperlink Integration n Micro-Frontends

    per Page Buildtime Integration Serverside Integration Runtime Integration
  46. @duffleit leitner.io

  47. @duffleit leitner.io Mix and Match Landing Shop Ordering hyperlink hyperlink

    <!–- SSIs --> <!--#include … --> <!--#include … --> APP SHELL Header Footer
  48. @duffleit leitner.io Micro-Frontends are Distributed Systems. The Final Secret:

  49. @duffleit leitner.io Everything that can go wrong will go wrong.

    The Final Secret: Murphy’s law
  50. @duffleit leitner.io Maybe start with a monolithic first approach.

  51. @duffleit leitner.io by: twitter.com/swardley

  52. @duffleit leitner.io David Leitner @duffleit slides: leitner.io/talks