Getting Started with LiveView

So far in this course, we’ve seen that Phoenix Channels make the server-side of real-time application development a breeze, but we still ended up writing a lot of front-end client code. This is acceptable for many applications, but wouldn’t it be nice if we could write real-time applications without spinning up a JavaScript front-end as well? Enter Phoenix LiveView.

LiveView is an exciting library that shakes up the traditional real-time application development life cycle. In a typical web application, we integrate real-time features into an interface based on standard HTML and JavaScript. In the section Build a Real-Time Sneaker Store, we did this by passing HTML fragments from the server to the client, and passing JSON data to the client. In both solutions, the front-end received the Channel’s message and modified the interface based on its content.

LiveView changes this paradigm by defining our application’s user interface in Elixir code. The interface is automatically kept up to date by sending content differences from server to client. A minimal amount (a few lines) of JavaScript is used to initialize LiveView, but otherwise, LiveView handles all updates to the DOM. We can build a rich real-time web application with LiveView without writing any custom JavaScript.

We’ll start this section by covering the basics of LiveView. We’ll see more of what it is, the programming model it uses, and how it compares to Channels. We’ll then implement the Sneakers23 product page in LiveView instead of the Channel-based approach that we used previously. This will be a fun one—let’s jump in!

LiveView has scratched an itch for real-time applications that seems obvious in hindsight. Libraries like it have existed in different languages over the years, but Elixir and Phoenix are perfectly aligned to satisfy LiveView’s goals. Developers have expressed boosts in productivity and satisfaction when coding with LiveView, which is a good indicator of a solid library to have in our development toolbox.

LiveView is new and innovative, but we’ll be able to get started in no time because it’s built on a foundation that we already know. We’ll go over this strong foundation and LiveView’s benefits from it. We’ll then look at how data flows in a LiveView application, from the front-end to the back-end and then back to the front-end. Lastly, we’ll see situations where LiveView thrives and what trade-offs we should consider when using it.

Let’s jump into an overview of LiveView before looking at a basic LiveView demo.

LiveView overview

LiveView is based on existing technologies we’re familiar with: Channels and Sockets. It takes these tools a step further by providing a rich front-end client and server-side rendering engine that work together to offer a full-stack development experience. The following figure captures the flow of LiveView: