In this talk, we'll venture into the powerful realm of real-time web applications. Today's users demand interactivity and instant feedback, and server-side events can deliver just that. But how do we leverage these capabilities effectively within React applications? Join me as I explain Server-Side Events and their implementation in React. We'll explore how they provide a seamless user experience, enabling applications to push updates to clients in real time, transforming the conventional, static user-experience into a dynamic digital interaction. Whether you're a seasoned professional or new to the world of React, this talk will equip you with the knowledge to create engaging, live-updating web applications that meet the expectations of today's users.

1. 🍿 Unlocking Real-Time
Web Applications

2. 🏆 The Challenge

3. Let’s meet
Rodrigo

4. Rodrigo works on the frontend side of
the complex e-commerce platform.

5. Backend team just deployed new feature:
the new API endpoint which allows
to check status of the order.

6. Backend team just deployed new feature:
the new API endpoint which allows
to check status of the order.
Today is Friday, and there is
urgent business requirement
to display order status on the frontend side.

7. Rodrigo was working on the new feature a whole day
and at 4 PM deployed changes to production.

8. Rodrigo was working on the new feature a whole day
and at 4 PM deployed changes to production.
Deploy was successful and Rodrigo can
go home or 🍺

9. Rodrigo was working on the new feature a whole day
and at 4 PM deployed changes to production.
Deploy was successful and Rodrigo can
go home or 🍺

10. Frontend Backend
Request
Response

11. Frontend
Request
Response
Backend

12. 🤯 The Problem

13. Backend is not responding immediately the
status of the order because there are plenty of
operations to process.
Correct status can be retrieved
after few milliseconds.

14. 👨💻 Rodrigo’s Solution

18. 💩

19. What could
go wrong?

20. What could
go wrong?
We’ll
refactor
oneway

21. What could
go wrong?
We’ll
refactor
oneway
#yolodevelopment

22. Backend is not responding immediately the
status of the order because there are plenty of
operations to process.

23. Backend is not responding immediately the
status of the order because there are plenty of
operations to process.
Unfortunately there was a bug in the infrastructure.
During the weekend tra
ffi
c increased and backend
wasn’t able respond with valid status.

24. Frontend
Request
Response
Backend
Order Status Microservice

25. 😭 Monday

27. Customers who created new orders didn’t get status
Moreover there were thousands of requests to
backend in users’ browsers tabs

29. ¡Hola Amigos!
@PatrykOmiotek

30. Use the right tools
for speci
fi
c problems…

31. …to create
elegant solutions

32. 🔓 Unlock Realtime-apps

33. 🙋 What are Realtime apps?

34. This is done using a variety of technologies, such
as WebSockets, server-sent events,
and long polling.
Real-time web applications are applications that
allow users to receive updates from the server
without having to manually refresh the page.

35. 🧩 Use cases

36. 1. Chat and messages
2. Social media updates
3. News feeds
4. Noti
fi
cations and alerts
5. Collaborative editing tools
6. Stock tickers
7. Real-time gaming

37. 😏 Standard way

38. Traditionally, a web page has to send a request to the server to
receive new data; that is, the page requests data
from the server.
With server-sent events, it's possible for a server to send new
data to a web page at any time, by pushing messages
to the web page.
These incoming messages can be treated as Events + data
inside the web page.

39. 🎯 What are Server-Sent Events?

40. Let’s talk about what SSE is not

41. 🥊 WebSockets vs SSE

42. 🥊 WebSockets vs SSE

43. Eo eo i mem z Freddy

44. Eo eo i mem z Freddy
Server

45. Eo eo i mem z Freddy
Server
Eeeooo

46. Eo eo i mem z Freddy
Server
Eeeooo
Client

47. Eo eo i mem z Freddy
Server
Eeeooo
Client
Client

48. Eo eo i mem z Freddy
Server
Eeeooo
Client
Client
Client

49. Eo eo i mem z Freddy
Server
Eeeooo
Client
Client
Client
Client

50. Eo eo i mem z Freddy
Server
Eeeooo
Client
Client
Client
Client
Eeeooo

51. Eo eo i mem z Freddy
Server
Client
Client
Client
Client
Eeeooo
Eeeooo
Eeeooo
Eeeooo
Web Sockets
Eeeooo

52. Eo eo i mem z Freddy
Server
Client
Client
Client
Client
🤐
🤐
🤐 Eeeooo
🤐
SSE

53. Eo eo i mem z Freddy
Server
Eeeooo
Client
Client
Client
Client
SSE

54. Feature WebSockets SSE
Communication channel Full-duplex One-way
Protocol TCP HTTP
Bidirectional communication Yes No
Binary data support Yes No
Latency Low Medium
Scalability High High
Complexity Medium Low

55. Feature Long polling SSE
Communication channel Bidirectional One-way
Protocol HTTP HTTP
Bidirectional communication Yes No
Binary data support Yes No
Latency Medium Low
Scalability Medium High
Complexity Low Medium

56. Feature Web Sockets Long polling SSE
Communication channel Full-duplex Bidirectional One-way
Protocol TCP HTTP HTTP
Bidirectional communication Yes Yes No
Binary data support Yes Yes No
Latency Low Medium Low
Scalability High Medium High
Complexity Medium Low Medium

57. 🤓 OK, Show me the code!

58. Part 1/2
⌨ Server implementation

73. Part 2/2
🎨 Frontend implementation

74. 🧵 EventSource

75. An EventSource instance opens
a persistent connection
to an HTTP server,
which sends events in text/event-stream format.

81. ✅ SSE Advantages

82. • Simple to implement and understand
• Built on top of HTTP
• Error handling via auto-reconnect comes built-in
• Supported by all major browsers
• Scalable, as the server can send events to many
clients simultaneously.

83. ❌ SSE Limitations

84. • One-way communication (server to client only).
• Not supported natively in all browsers (Microsoft Edge/IE v78
and earlier)
• When used over HTTP 1.1 there’s a limit of 6 open SSE
connections per browser, but when SSE is used over HTTP/2
the maximum number of simultaneous HTTP streams is
negotiated between the server and the client (defaults to 100)
• Overhead compared to WebSockets for certain scenarios
• No support for binary data (only UTF-8 encoded text)

85. 🐞 Error Handling
and
Connection Management

86. Source: https://www.aklivity.io/post/a-primer-on-server-sent-events-sse

87. • Handling connection losses and re-establishing
connections.
• Listening to SSE error events in React.

88. 🏃 Optimizations
and
Best Practices

89. • Throttling messages for performance
• Using a backoff strategy for reconnections
• Closing connections when not needed

90. ▶ Other use cases

91. Let’s assume Rodrigo is building
AI image processing platform

92. Let’s assume Rodrigo is building
AI image processing platform
or Real-time noti
fi
cations
or Live news or sport scores.
or Collaborative tools (e.g., shared document editing).

93. Let’s assume Rodrigo is building
AI image processing platform
or Real-time noti
fi
cations
or Live news or sport scores.
or Collaborative tools (e.g., shared document editing).
because he wants to become
Señor AI Cloud Blockchain Developer ;)

95. 🧮 When operation will complete?

96. 🧮 When operation will complete?

97. 🧮 When operation will complete?
🤷

98. 👌 Tips

99. 🙅 CORS

100. 📖 Headers

101. 🎸 Design, implement, refactor, repeat

102. ✨ State manager

103. ✨ State manager

104. 👨💻 Code

105. 🌈 Conclusion

107. You can catch me here:
🙏 Thank you

108. Plan na dziś
• Kodujemy bibliotekę komponentów
• MEWA (Modern and Ef
fi
cient Web Applications)