Adding Layers to LiveView

Let’s take a look at how LiveView works in making interactive applications and how we can integrate it into our OTP boundary layer.

We'll cover the following

Since LiveView is an implementation of Phoenix Channels, the integration story for the two frameworks will be similar. Phoenix LiveView is a library for allowing highly interactive applications with impressive performance and bidirectional communication. That sounds much like Channels, but there’s an important distinction— LiveView does so with no custom JavaScript.

How it works

Here’s how LiveView goes about providing real-time user experiences with server-rendered HTML.

  • The developer configures LiveView, including integrating some OTP dependencies and a common JavaScript library. (Don’t worry. As promised, we’ll not use JavaScript in the day-to-day coding of our project.)

  • The infrastructure calls a mount point when a user connects to start a new GenServer process the first time.

  • A server-side function renders a user interface using the state and templates.

  • The framework JavaScript automatically sends messages to the server, which the server translates to GenServer callbacks.

  • When those callbacks fire, LiveView sends any state changes back to the client, resulting in a new page in the browser.

Get hands-on with 1200+ tech skills courses.