$30 off During Our Annual Pro Sale. View Details »

Rethinking Reactive Architectures with GraphQL

SQUER Solutions
March 23, 2021
290

Rethinking Reactive Architectures with GraphQL

WeAreDevelopers Live Days

SQUER Solutions

March 23, 2021
Tweet

Transcript

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

    View Slide

  2. @duffleit
    @duffleit
    [email protected]
    David Leitner
    Coding Architect

    View Slide

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

    View Slide

  4. asynchronous data streams.
    Space
    Time
    Collections
    Iterator Generator
    Value
    Getter Setter
    Promise
    Deferred Resolver
    Stream
    Reader Emitter

    View Slide

  5. Counter and Doubled should be bound.

    View Slide

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

    View Slide

  7. 1
    map(x => x*2) 2
    3
    6
    the Destiny Operator
    Counter and Doubled should be bound.

    View Slide

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

    View Slide

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

    View Slide

  10. Stream
    Caller Receiver
    propagate change
    observe change
    The reactive programming paradigm is based on asynchronous
    streams which propagate change.

    View Slide

  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

    View Slide

  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()

    View Slide

  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()

    View Slide

  14. We move from a
    pull-based design,
    to an asynchronous
    push-based design.

    View Slide

  15. Reactive Programming

    Reactive Architectures
    🥺
    We take the same concepts from reactive programming
    and move them up to the system architecture.
    🤞

    View Slide

  16. View Slide

  17. The Reactive Manifesto
    Responsive
    Responsive
    NFR

    View Slide

  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.

    View Slide

  19. The Reactive Manifesto
    Message
    Driven
    Responsive
    Elastic Resilient
    NFR
    Support
    Enable
    Scalability Extendibility

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  26. We move from a
    synchronous pull-based
    architecture, to an
    asynchronous push-based
    architecture.

    View Slide

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

    View Slide

  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

    View Slide

  29. Web Application
    Stream
    Microservice
    usually Backend-For-Frontend (BFF)
    Microservice A
    Microservice B
    Microservice C
    Third Generation MicroServices
    Fully asynchronous
    & stream-centric

    View Slide

  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.

    View Slide

  31. Web Application
    Stream
    Microservice
    usually Backend-For-Frontend (BFF)
    Microservice A
    Microservice B
    Microservice C

    View Slide

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

    View Slide

  33. Web Application
    Eventstore
    Microservice
    usually Backend-For-Frontend (BFF)
    FaaS A
    FaaS B
    FaaS C
    Forth Generation MicroServices
    EventSourced with FaaS

    View Slide

  34. FaaS A
    Web Application
    FaaS B
    FaaS C
    Eventstore
    Microservice
    often Backend-For-Frontend (BFF)
    HTTP
    Streaming
    Request/Response

    View Slide

  35. GraphQL
    ✅ Consumer Driven APIs
    ✅ Native Schema Support
    ✅ Streaming Support

    View Slide

  36. Streaming with GraphQL

    View Slide

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

    View Slide

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

    View Slide

  39. Lambda A
    Web Application
    Lambda B
    Lambda C
    Eventstore
    GraphQL
    Microservice A
    Microservice B
    Microservice C
    Web Application

    pull-based push-based

    View Slide

  40. Insurance Portal
    Example
    🚗
    👩💻

    View Slide

  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

    View Slide

  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.

    View Slide

  43. Mobile Banking
    Example
    📱
    💵

    View Slide

  44. Mobile Banking Usage
    Show balance & last transactions: 93%
    Initiate new payment: 3%
    Any other functionality: 4%

    View Slide

  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.

    View Slide

  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.

    View Slide

  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%

    View Slide

  48. The Reactive Manifesto
    Message
    Driven
    Responsive
    Elastic Resilient
    NFR
    Supported by
    Enabled by
    Scalability Extendibility

    View Slide

  49. This stuff is cool,
    but think twice, & ensure that
    reactive architectures really fit your
    problem at hand.

    View Slide

  50. Architectural Styles
    buy you options
    Reactive Architectures buy you mainly
    Resilience, Realtime Capabilities,
    Elasticity, & Extendibility.
    you pay by complexity.
    💵

    View Slide

  51. Maybe start small,
    and shift to reactive systems once needed.

    View Slide

  52. View Slide

  53. @duffleit
    @duffleit
    [email protected]
    David Leitner
    Coding Architect

    View Slide

  54. squer.link/kafka

    View Slide