Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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