Collin Day

Phoenix LiveView: Ideal for Resource Constrained Environments

Posted at — Apr 16, 2020

Phoenix LiveView is an innovative library for the Phoenix Web Framework that enables rich, highly interactive, UI experiences for web applications. In this article I’ll explain why LiveView is an ideal fit for environments with limited bandwidth, compute capacity, and latency.

The Traditional Single Page Application (SPA)

Let’s begin by reviewing the components of a very common web app architecture today:

  1. A frontend written using a JavaScript SPA framework such as React, Vue, Angular, Ember, etc.
  2. A RESTful API, often using JSON over HTTP for serialization and transport
  3. Backend services and stores that implement the domain logic

Essentially, we have a layered architecture where the user interface executes on the client (as JavaScript in the browser). This served as an important evolution from server-side MVC frameworks (such as Rails) which render the UI on the server then ship HTML to the browser. A primary benefit of moving the UI to the client was greater responsiveness and interactivity. These frameworks helped to bring the same sort of features previously found in desktop applications to the web.

However, like anything, there are some trade-offs that come with SPAs. Data-intensive applications will often require many HTTP requests to the API. This is especially apparent with novel representations (such as graph-based) that split the data required to assemble a coherent model across many API resources or query results. Other API technologies, such as GraphQL, try to solve these problems (sometimes known as overfetching or underfetching) by providing a more sophisticated query language for API resources. However, the data still needs to be sent over the wire.

These problems become especially apparent in the difficult environments that some users, such as many in the defense community, operate in. Take the following example scenario:

Most SPAs will struggle to maintain a good user experience in this environment:

So, what’s the solution? We could move back to server side frameworks such as Rails, but wouldn’t it be nice if we could keep all of the benefits of the SPA architecture while addressing the problems above?

Enter Phoenix LiveView

Phoenix is indeed a server-side MVC framework in the same vein as Rails. However, the power of the Elixir language (and its underlying Erlang BEAM virtual machine) give Phoenix highly performant and scalable real-time capabilities. LiveView builds on top of these capabilities to bring the same advantages of JavaScript-based SPAs to the server:

  1. LiveView maintains a persistent WebSocket connection between each client and the server
  2. When application state changes (e.g. from some user interaction or an update from a backing service) LiveView computes a minimal diff from the client’s current state to the new state and sends that diff over the wire
  3. The client displays the updated state to the user

The vast majority of the application logic is executed on the server, on powerful hardware and close to the data. This eliminates the need to send large JavaScript bundles down to the client. It also greatly reduces the compute requirements of the client - it pretty much just needs to be able to render HTML. LiveView handles connection failures out of the box by reconnecting to the server automatically. And finally, and most importantly, because LiveView only sends diffs of dynamic state, only a minimal amount of bandwidth is required and high latency has less of an impact.

All of these qualities make LiveView ideal for applications that need advanced interactivity and real-time capabilities and have users in resource constrained and unreliable environments.

For more info, check out this article and talk, both by Chris McCord, the creator of Phoenix.