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

Rethinking Reactive Architectures with GraphQL

E6c61f085d7aceaf97b7bd00e9195514?s=47 SQUER Solutions
March 23, 2021
100

Rethinking Reactive Architectures with GraphQL

WeAreDevelopers Live Days

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

March 23, 2021
Tweet

Transcript

  1. WeAreDevelopers Live Days Remote, March 2021 Rethinking Reactive Architectures with

    GraphQL
  2. @duffleit @duffleit david.leitner@squer.at David Leitner Coding Architect

  3. Reactive? Programming with, or designing upon, asynchronous data streams.

  4. asynchronous data streams. Space Time Collections Iterator Generator Value Getter

    Setter Promise Deferred Resolver Stream Reader Emitter
  5. Counter and Doubled should be bound.

  6. the Destiny Operator Counter and Doubled should be bound. ⬅

  7. 1 map(x => x*2) 2 3 6 the Destiny Operator

    Counter and Doubled should be bound.
  8. the Destiny Operator Counter and Doubled should be bound.

  9. the Destiny Operator Counter and Doubled should be bound.

  10. Stream Caller Receiver propagate change observe change The reactive programming

    paradigm is based on asynchronous streams which propagate change.
  11. YAMS — Yet Another Mail Service NEW 2021-04-11 — An

    important Email 2021-04-09 — Another important Email 2021-04-08 — Do you want to join my network? 2021-04-05 — Nigerian prince wants to send you money X your inbox contains 4 mails 1 NEW Mail Reload Controller Rest Client update UI Element update UI update UI
  12. YAMS — Yet Another Mail Service NEW 2021-04-11 — An

    important Email 2021-04-09 — Another important Email 2021-04-08 — Do you want to join my network? 2021-04-05 — Nigerian prince wants to send you money X your inbox contains 4 mails 1 NEW Mail Reload Websocket Client Email Email count() count() collect() filter() subscribe Email map()
  13. YAMS — Yet Another Mail Service NEW 2021-04-11 — Hello

    WeAreDevelopers! 👋 2021-04-09 — Another important Email 2021-04-08 — Do you want to join my network? 2021-04-05 — Nigerian prince wants to send you money X your inbox contains 5 mails 2 NEW Mail Websocket Client Email Email count() count() collect() filter() subscribe Email NEW 2021-04-11 — An important Email map()
  14. We move from a pull-based design, to an asynchronous push-based

    design.
  15. Reactive Programming ✅ Reactive Architectures 🥺 We take the same

    concepts from reactive programming and move them up to the system architecture. 🤞
  16. None
  17. The Reactive Manifesto Responsive Responsive NFR

  18. Internet has 4.7 Billion users. Facbook has 2.8 Billion users.

    Youtube has 2.1 Billion users. 2010 2020 The Internet has 1.4 Billion users. A single website may now handle twice as much traffic as the entire internet did a decade ago.
  19. The Reactive Manifesto Message Driven Responsive Elastic Resilient NFR Support

    Enable Scalability Extendibility
  20. Microservice A Microservice B Message Driven Responsive Elastic Resilient Value

    Form Means
  21. Microservice A Microservice B Message Driven Responsive Elastic Resilient Value

    Form Means Microservice B
  22. Microservice A Microservice B Message Driven Responsive Elastic Resilient Value

    Form Means Microservice B Stream
  23. Microservice A Microservice B Message Driven Responsive Elastic Resilient Value

    Form Means
  24. Message Driven Responsive Elastic Resilient Value Form Means Microservice A

    Stream Microservice B
  25. We are resilient by supporting Back-Pressure Stream Provider Consumer events

    are stored until consumed Stream Provider Consumer A Consumer C Consumer B scaling out consumers We can scale-out by Location Transparency
  26. We move from a synchronous pull-based architecture, to an asynchronous

    push-based architecture.
  27. Microservice A Microservice B Microservice C Web Application Microservice C

    with high latency First Generation MicroServices Synchronous and without Backpressure Support
  28. Microservice A Microservice B Microservice C Web Application Microservice C

    with high latency Second Generation MicroServices Partially asynchronous with Queues Queue isolates bottleneck Queue Microservice C with high latency
  29. Web Application Stream Microservice usually Backend-For-Frontend (BFF) Microservice A Microservice

    B Microservice C Third Generation MicroServices Fully asynchronous & stream-centric
  30. Events as the System State Stream of Transactions Max sent

    David 100€ Max sent Maria 70€ David sent Maria 25€ User Balance David + 75 € Max - 170 € Maria + 95 € ➡ Event Sourcing 100% reliable audit log.
  31. Web Application Stream Microservice usually Backend-For-Frontend (BFF) Microservice A Microservice

    B Microservice C
  32. Web Application Eventstore Microservice usually Backend-For-Frontend (BFF) Microservice A Microservice

    B Microservice C
  33. Web Application Eventstore Microservice usually Backend-For-Frontend (BFF) FaaS A FaaS

    B FaaS C Forth Generation MicroServices EventSourced with FaaS
  34. FaaS A Web Application FaaS B FaaS C Eventstore Microservice

    often Backend-For-Frontend (BFF) HTTP Streaming Request/Response
  35. GraphQL ✅ Consumer Driven APIs ✅ Native Schema Support ✅

    Streaming Support
  36. Streaming with GraphQL ➡

  37. Lambda A Web Application Lambda B Lambda C Eventstore Microservice

    often Backend-For-Frontend (BFF) HTTP Streaming Request/Response
  38. Lambda A Web Application Lambda B Lambda C Eventstore GraphQL

    Streaming Request/Response
  39. Lambda A Web Application Lambda B Lambda C Eventstore GraphQL

    Microservice A Microservice B Microservice C Web Application ➡ pull-based push-based
  40. Insurance Portal Example 🚗 👩💻

  41. Lambda A Lambda B Lambda C GraphQL Step 1 Step

    2 Step 2 Car Brand Build Year Car Model Insurance Agent Customer ✅ This Is Correct Alfra Romeo Giulia, 2020 110PS, Diesel Step 1 Step 2 Step 2 Coverage 200 € 🏁 Sign Digital Do you accept 70% coverage for 200€? Eventstore GraphQL
  42. GraphQL Step 1 Step 2 Step 2 Car Brand Build

    Year Car Model Lambda A Insurance Agent Lambda B Lambda C Eventstore GraphQL Customer ✅ This Is Correct Alfra Romeo Giulia, 2020 110PS, Diesel Step 1 Step 2 Step 2 Coverage 250 € 🏁 Sign Digital Do you accept full coverage for 250€? Customers expect realtime syncronisation between channels.
  43. Mobile Banking Example 📱 💵

  44. Mobile Banking Usage Show balance & last transactions: 93% Initiate

    new payment: 3% Any other functionality: 4%
  45. Microservice A Web Banking Microservice B Microservice C Eventstore GraphQL

    Projection Projections 1⃣ Projections act as read-models for a specific client. 2⃣ They subscribe to events & hydrate the projection. 3⃣ The client only reads from the projection.
  46. Microservice A Web Banking Microservice B Microservice C Eventstore GraphQL

    Projection Projections 1⃣ Projections act as read-models for a specific client. 2⃣ They subscribe to events & hydrate the projection. 3⃣ The client only reads from the projection.
  47. GraphQL Mobile Client Projection Microservice A Web Banking Microservice B

    Microservice C Eventstore GraphQL Projection Projections 1⃣ Projections act as read-models for a specific client. 2⃣ They subscribe to events & hydrate the projection. 3⃣ The client only reads from the projection. Show balance & last transactions: 93%
  48. The Reactive Manifesto Message Driven Responsive Elastic Resilient NFR Supported

    by Enabled by Scalability Extendibility
  49. This stuff is cool, but think twice, & ensure that

    reactive architectures really fit your problem at hand.
  50. Architectural Styles buy you options Reactive Architectures buy you mainly

    Resilience, Realtime Capabilities, Elasticity, & Extendibility. you pay by complexity. 💵
  51. Maybe start small, and shift to reactive systems once needed.

  52. None
  53. @duffleit @duffleit david.leitner@squer.at David Leitner Coding Architect

  54. squer.link/kafka