?? Day 9: Exploring Frontend System Design - Server Side Events & WebHooks ??

Diving deeper into the realm of frontend architecture, today let's unravel the fascinating world of Server Side Events (SSE) and Webhooks! ??

Server Side Events (SSE)

Imagine a seamless flow of real-time data from the server to the client without the need for constant polling. That's exactly what SSE brings to the table! Here's a quick breakdown:

• Long-lived unidirectional communication: Unlike traditional polling where a new connection is established for each update, SSE maintains a single HTTP connection for continuous data flow.
• Connection: Keep-alive: Say goodbye to frequent connection closures. SSE keeps the connection open, allowing for efficient data transmission.
• Event-stream: Data is structured into events, making it easier to handle and process on the client-side.

Think of feeds, notifications, or monitoring dashboards - SSE revolutionizes how we interact with real-time data, offering a smoother and more responsive user experience. But of course, it's not without its challenges...

Challenges:

• Browser compatibility ??
• Connection limits ??
• Timeout issues ?
• Background tab behavior ??
• Resource utilization ??
• Load balancer considerations ??
• Sticky connections ??
• Proxy/firewall hurdles ??
• Testing/debugging complexities ???
• Efficient broadcasting strategies ??

Webhooks

Now, let's talk about another powerhouse in real-time communication - Webhooks!

• Realtime communication: Instantaneous updates triggered by events.
• Event-driven: React to specific events without the need for constant polling.
• REST API (POST type): Simple yet powerful, just fire a POST request and let the magic unfold.
• Retry mechanism: Stay resilient with built-in retry mechanisms, ensuring no event goes unnoticed.

In a payment scenario, efficiency is key. Consider this: you're integrating with payment gateways like Stripe or Razorpay. Once a payment is made, you need swift verification before progressing to the next step or screen.

Now, in the traditional polling approach, you'd repeatedly ping the API to check for confirmation. If the confirmation isn't received, you'll keep polling at intervals. But here's the snag: if the confirmation arrives between two API calls, you're stuck waiting until the next poll triggers.

Enter Webhooks! Alongside the initial API call for verification, you set up another POST request API with payload, authorization, and secret. Here's the magic: upon successful confirmation, this API acts as a callback function triggered automatically.

No more waiting around for the next poll cycle. It's efficient, it's seamless, and it's the future of real-time communication in frontend system design. ??

Use Cases:

• Notification system: Alerting users in real-time, keeping them informed.
• Data synchronization: Automating tasks like syncing Instagram posts to Facebook seamlessly.
• Automation: Streamlining workflows, think GitHub CI/CD pipelines.