Event-Driven UIusing theReactive Interaction Gateway

Kevin Bader, Accenture

2

LIVE UPDATES

3

ASYNC PROCESSING

Example: Conference Registration

• Allow people to register to the conference• When someone has registered:

• send an email to the organizing team

• send an email to the new participant

• Assign a mentor to the participant• It might take a while to find a good match..

ASYNC PROCESSING

4github.com/mmacai/openslava-2019-rig-example

5

CONFERENCE REGISTRATION

submitregistration form

participant registered

mentor assigned

conference service

all the data,all the events

github.com/mmacai/openslava-2019-rig-example

6

CONFERENCE REGISTRATION

registrationservice

mentoringservice

communicationsservice

participants,registrations

mentors,mentees

recipients,email templates

github.com/mmacai/openslava-2019-rig-example

7

CONFERENCE REGISTRATION

registrationservice

mentoringservice

communicationsservice

submitregistration form

participantregistered

mentorassigned

github.com/mmacai/openslava-2019-rig-example

8

CONFERENCE REGISTRATION

submitregistration form

registrationservice

mentoringservice

communicationsservice

participantregistered

mentorassigned

github.com/mmacai/openslava-2019-rig-example

• 13 min

© 2019 Accenture

a (web) app is an application

10

LET THE FRONTEND (TEAM) PARTICIPATE

Service A Service B

"A" happened "B" happened

Frontend

Service A Service B

"A" happened "B" happened

Frontend

11

Microservices emit events.Frontends consume and produce events the same way other microservices do.Frontends not aware how eventsare stored.

LET THE FRONTEND (TEAM) PARTICIPATE

Enable the frontend toparticipate in choreography:• Frontends subscribe to events• Microservice emit events and

don’t target specific frontends• Frontend team gains autonomy

Service A Service B

"A" happened "B" happened

Frontend

Service A Service B

"A" happened "B" happened

Frontend

12

Microservices emit events.Frontends consume and produce events the same way other microservices do.Frontends not aware how eventsare stored.

LET THE FRONTEND (TEAM) PARTICIPATE

Frontends communicatesthe user’s actions.

Microservices can react:• start a (long-running) process• analyze a user’s behavior• notify the support staff

Service A

Service B

the user did something

Frontend

13

Microservices emit events.Frontends consume and produce events the same way other microservices do.Frontends not aware how eventsare stored.

LET THE FRONTEND (TEAM) PARTICIPATE

• Decouples teams• Topic partitioning should not be part of

the interface

events

Frontend

?

• 13 min

© 2019 Accenture

how to implement this?

15

REACTIVE INTERACTION GATEWAY (RIG)

16

INTEGRATION

Business Logic

Local data

API

UI pushAPI Gateway

UIServer-SentEvents

Business Logic

Local data

API

BusinessEvents

17

CONFERENCEREGISTRATIONEXAMPLE submit

registrationform

RegistrationService

frontend

backend

NotificationService

MentorMatchingService

email toorganizing team

email toparticipant

...

...

Server-Sent Events

Participantregistered

Mentor assigned

github.com/mmacai/openslava-2019-rig-example

18

ANOTHER EXAMPLE..

github.com/kevinbader/rig-logistics-demo

19

20

21

22

23

24

25

26

27

28

29

SHOW ME THE CODE

github.com/kevinbader/rig-logistics-demo

Amazon Kinesis

• Real-time data feed• Via Server-Sent Events (HTTP/2 + HTTP/1.1)

• Via WebSocket (HTTP/1.1)

• Via HTTP long-polling

• Connection/session handling• Scalable in #users and #events

• Authorization: JSON web token, blacklisting

• HTTP reverse proxy• To HTTP endpoints and Kafka topics

WHAT CAN RIG DO?

30

Server-Sent Events

WebSocket

HTTP long-polling

31

MESSAGE FLOW

K8s Service

Consumer Group

Apache KafkaAmazon Kinesis

Kafka partitions / Kinesis shards

Server-Sent Events (HTTP/2)WebSocket (HTTP/1.1)

K8s headless servicefor peer discovery

HTTP long-polling

• CNCF spec• Simple envelope format• Encoding: JSON, Avro, ...• Mappings for transports:

Kafka, AMQP, MQTT, ...

CloudEvents

32

• Asynchronous, event-driven processing is the new default

• Decoupling: easy to add/remove microservices

• Deployment: easy to deal with upgrades/rollbacks/downtime

• But: frontend and 3rd party clients often expect immediate response

• Requires “conversion” of asynchronously processed result into synchronous request-response

SYNC REQUEST, ASYNC PROCESSING

33

34

HTTP POST

produce request event

pick up request event

process request

publish response

publish response

HTTP response

frontend message broker backend service

the frontend seesa traditional API

while processing is asynchronous

• 13 min

© 2019 Accenture

tl;dr

• Use live updates for great UX• Leverage events to decouple frontend and backend• Rely on open standards• Enable statelessness by handling connections at one place

GO BUILD EVENT-DRIVEN FRONTENDS!

37

Accenture/reactive-interaction-gatewayhttps://github.com/kevinbader/rig-logistics-demo