Making Connections
Web apps have come a long way form being static documents that are loaded into the browser. Here's an overview of the different methods modern web apps can use to send and receive data.
XHR/Fetch
The XMLHttpRequest (XHR) API became standard in 2004 and revolutionized how web apps were build. Before then, presenting new data on a page required an immersion breaking refresh or a redirect.
XHR allowed apps to request data programmatically in the background and then we can manipulate the DOM to present it. This technique of data fetching and updating the page is referred to as Asynchronous JavaScript and XML (AJAX). The fetch API is a newer, promise-based alternative to XHR.
Web Sockets
The Web Socket API is a very popular API for building real time web apps that provide features like tracking and messaging.
It allows web apps to create a keep open connection to the server and transfer bidirectional messages across the connection. Socket IO is a popular library used for building with web sockets.
Server Sent Events
Sever Sent Events is an API that allows application servers to send data to the client over an HTTP connection.
This API is different from web sockets in that it is unidirectional. It is simply a means for a server to push updates to a client.
Web RTC
Web Real-time Connection (RTC) is a standardized API for peer to peer communication. It is available on all major browsers and supports video and voice. Many video calling applications use Web RTC Under the hood.
Push Notifications
The Push API is a standard web API that facilitates push notifications on the web. It is natively supported on all major browsers except those on the MAC or IOS platform (push notifications can sill be done however using Apple Push).
Push notifications are a neat way to give reminders, updates and alerts to the user to increase engagement once the user has opt-in.
Push notifications are special from the others in that it is the only way for a server to push data to an app that isn't currently open by the user.
You can also have silent data notifications that update your apps in the background.
Web Transport
Web transport is a new specification which serves to be provide a lower latency connection by removing the sequencing delivery that web sockets do. It works on top of HTTP3 to provide and can be used as a client to server alternative to web RTC. It's still very early for web transport (scheduled for release in chrome 97) but it is an exciting development none the less.
Comparison
So which method should you use? Here's a table which summarizes the differences:
| Connection Type | Transfer Mode | Common Usage |
|---|---|---|
| XHR/Fetch | Client to Server | Most dynamic web apps, pull to refresh, gmail, instagram etc |
| Web Sockets | Bi Directional | Text messaging applications, broadcasting, real-time applications |
| Server Sent Events | Server to Client | Streaming data, tracking, timers |
| Web RTC | Client to Client | Screen sharing, video calling apps |
| Push Notifications | Server to Client | Notifications, alerts, background updates |
| Web Transport | Bi Directional | Low latency, unordered messaging, media streaming, online games |
Conclusion
Over the next couple of weeks I shall take a deep dive in each methodology. Which one have you used? Are you looking forward to a specific method?
Top comments (0)