Django LiveView

Django LiveView

Framework for creating Realtime SPAs using HTML over the Wire technology

What is HTML over the Wire?

HTML over ther Wire, or HTML over the WebSockets, is a strategy for creating real-time SPAs by creating a WebSockets connection between a client and a server. It allows JavaScript to request actions, its only responsibility is to handle events, and the backend handles the business logic as well as rendering HTML. This means you can create pages without reloading the page, without AJAX or APIs. One technology provides a secure, stable and low-delay connection for real-time web applications.

Architecture send

Architecture receive

What is Django LiveView?

Django LiveView is a framework for creating Realtime SPAs using HTML over the Wire technology. It is inspired by Phoenix LiveView and it is built on top of Django Channels.

It allows you to create interactive web applications using only HTML, CSS and Python. JavaScript ONLY is used to capture events, send and receive strings over a WebSockets channel.

Let's illustrate with an example. I want to print article number 2.

1- A WebSockets connection, a channel, is established between the client and the server.

2- JavaScript sends a text, not a request, via WebSockets to the Server (in our case Django).

Send string

3- Django interprets the text and renders the HTML of the article through the template system and the database.

4- Django sends the HTML to JavaScript via the channel and tells it which selector to embed it in.

Send JSON

5- JavaScript draws the received HTML in the indicated selector.

Place HTML

The same process is repeated for each action, such as clicking a button, submitting a form, etc.

What are your superpowers?

  • All in real time. The data is sent and received instantly.

  • Single connection. You don't need to open and close connections like calls to an API.

  • Create SPAs without using APIs o JavaScript frameworks.

  • Uses Django's template system to render the frontend (The use of JavaScript is anecdotal).

  • The logic is not split between the backend and the frontend, it all stays in Python.

  • You can still use all of Django's native tools, such as its ORM, forms, plugins, etc.

  • Everything is asynchronous by default.

  • Don't learn anything new. If you know Python, you know how to use Django LiveView.

Are you ready to create your first Realtime SPA? Let's go to the Quickstart.