Unlocking Realtime Web Applications - 4Developers Katowice 2023
0 likes27 views
The document discusses the challenges faced by a frontend developer, Rodrigo, when implementing a new API feature to display order status on an e-commerce platform. It addresses issues with backend response times during high traffic and explores real-time web applications, highlighting technologies such as server-sent events (SSE) and websockets. The document also presents the advantages and limitations of SSE, along with optimizations and use cases for its implementation.
Unlocking Realtime Web Applications - 4Developers Katowice 2023
- 1. 🍿 Unlocking Real-Time Web Applications
- 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 🍺
- 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.
- 18. 💩
- 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.
- 25. 😭 Monday
- 27. Customers who created new orders didn’t get status Moreover there were thousands of requests to backend in users’ browsers tabs
- 30. Use the right tools for speci fi c problems…
- 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.
- 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
- 87. • Handling connection losses and re-establishing connections. • Listening to SSE error events in React.
- 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)