Connection Types In Web Apps
Tags: javascript, webdev, webrtc, beginners
Published: 2022-02-14 17:26:27

# 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn2a5akxat8ca1l086h7.png) 

The [XMLHttpRequest (XHR) API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) 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)](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX). The [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) is a newer, promise-based alternative to XHR.

# Web Sockets

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4sta1xz6sw911ymub7f.png)
[Image Credit](https://images.app.goo.gl/YbwfRo4WDat7KQ3X9)

The [Web Socket API](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_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](https://socket.io/) is a popular library used for building with web sockets.

# Server Sent Events

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zafqwpzndqnznqfshl1h.png)
[Image Credit](https://images.app.goo.gl/bNeDzhWixwTUSn7T9)

[Sever Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y31y0ait580w66x77uug.png)
[Image Credit](https://images.app.goo.gl/rrp1xRNrWbuL9mdB7) 

[Web Real-time Connection (RTC)](https://webrtc.org/) 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gym2htp0vo9jp2k5cja7.png)
[Image Credit](https://images.app.goo.gl/e32MPopWLFgEjpeN8) 

The [Push API](https://developer.mozilla.org/en-US/docs/Web/API/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](https://developer.apple.com/notifications/safari-push-notifications/#:~:text=Use%20the%20Apple%20Push%20Notifications,when%20Safari%20isn't%20running.&text=They%20display%20your%20website%20icon,go%20right%20to%20your%20website.)). 

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

{% youtube 2yQIBZbKhdU %}

[Web transport](https://web.dev/webtransport/#use-cases) 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](https://en.wikipedia.org/wiki/HTTP/3) 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?

# References
* [Web RTC](https://webrtc.org/)
* [Web.dev Using Web Transport](https://web.dev/webtransport/#use-cases)
* [MDN Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Auth0 Developing Real Time Web Apps](https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/)