TestDriven.io: HTML Over WebSockets

This vendible looks at a new tideway for achieving a Single-page Application (SPA) — HTML over WebSockets.

This vendible has been translated and well-timed from the original Spanish version.

What is it?

The traditional way to unzip a Single-page Application (SPA) is to divide responsibilities between the when and front-end:

  • the back-end serves information up via a JSON RESTful API
  • the front-end fetches data from the back-end asynchronously via API calls

Unfortunately, this pattern is costly, requires two specialized developer profiles, and slows release cycles since you must develop and maintain two variegated applications (often in two variegated languages). It moreover makes rapid prototyping and SEO difficult. This pattern has been dominant since the early 2010s. It’s the price that we’ve had to pay in order to unhook web apps with the squint and finger of desktop apps. This is starting to transpiration though, as many teams are recognizing that the gains don’t outweigh the financing and are experimenting with new patterns for delivering a SPA. One pattern that’s whence to proceeds traction is to serve up HTML instead of JSON over a WebSocket.

How does it work?

Chris McCord, creator of Phoenix (the most popular Framework within the Elixir ecosystem), presented a technology tabbed LiveView at ElixirConf 2019, which serves HTML over WebSockets. Shortly after, he demonstrated how to build a real-time Twitter clone in just 15 minutes with LiveView without a client-side JavaScript framework like React, Angular, or Vue. He showed that it was possible to unhook a slick, real-time UI from a back-end framework. This inspired other developers to create their own implementations using other languages and web frameworks.

McCord’s solution is to send HTML to the front-end instead of JSON via WebSockets. This tideway not only simplifies development, but you moreover get a nice performance uplift as well, since the rendering logic is handled by the back-end and the front-end doesn’t need to make any new HTTP requests to get new data.

Traditional approach

Again, with this approach, the browser kicks things off by making an HTTP request from the front-end to obtain a JSON response with the raw, preprocessed information. The front-end is then responsible for processing the information and creating the respective HTML.

Traditional SPA Approach

HTML over WebSockets approach

With this approach, the browser or server can kick things off since WebSockets provides bi-directional communication.

Example

Let’s looks at a quick example of displaying a blog article.

  1. Connection: We start with a connection. WebSockets enable bi-directional liaison between the vendee and server, which you just have to establish once.
  2. Component request: The vendee requests the content for a particular vendible associated with the /article/2 route.
  3. Back-end logic: The server generates the relevant HTML, CSS, and JavaScript for the template, using a templating system (like Jinja), and returns the template fragment through the WebSocket channel.
  4. Update DOM: Finally, the front-end updates the DOM with the template fragment to exhibit the blog article.

Django Demo

I created a prototype of the HTML over WebSockets tideway with Django that uses Django Channels for WebSocket support. The app itself is fairly simple. It’s just a blog with wares and comments. That said, it’s a full SPA, so page changes don’t required a page refresh.

You can see the power of WebSockets here:

You can find the lawmaking on GitHub.

Benefits and drawbacks

Benefits:

  1. HTML rendering / processing happens solely on the back-end
  2. Real-time
  3. The WebSockets protocol is faster than HTTP
  4. Works with slow connections
  5. Create a SPA with whimsically any JavaScript
  6. Straightforward SEO

Drawbacks:

  1. Server requires increasingly resources since you have to leave a WebSocket unshut per client
  2. Nascent ecosystem – few frameworks, tutorials, and documentation

Resources

You can start with the pursuit resources:

  1. The Future of Web Software Is HTML-over-WebSockets
  2. Phoenix LiveView
  3. Hotwire – build modern web apps by sending HTML over the wire
  4. Reactor – a LiveView library for Django
  5. Sockpuppet – build reactive applications with the Django tooling you once know and love
  6. Action Cable – seamlessly integrate WebSockets with the rest of your Ruby and Rails app
  7. AnyCable – build lightning fast, reliable real-time applications with Ruby and Rails

Conclusion

While this tideway is still very new, it deserves a look. Adoption is growing and increasingly and increasingly tools and examples are seeming every month. On a personal note, I’m surprised at how little known it seems to be. I imagine this has a lot to do with just how powerful the JavaScript ecosystem is.

Comments are closed.