A common pitch for Phoenix LiveView is it allows you to create modern reactive apps without having to write JavaScript. In large part that is true. You can create dynamic server-rendered apps all in Elixir without having to write a large portion of your app in JavaScript frameworks such as React, Angular, or Vue.js. But, even so, you will still need to write a smattering of JavaScript if you want your app to have the fit and finish of a finely crafted web app. And that makes sense, as this is exactly what JavaScript was created to do.

Where JavaScript shines is in providing quick response to client actions that don’t require a server roundtrip to perform and in transitions, such as opening a dropdown with a nice animation from the closed to open state and back.

Where LiveView and JavaScript meet is what this article is about. We will discuss how LiveViews and LiveComponents can...

In this article, we will create a reusable and configurable modal dialog that we can use throughout our app. We will implement the modal as a LiveComponent and along the way we will touch on several other important LiveView features including push_patch, browser pushState, and JavaScript hooks.

If you aren’t familiar with LiveView LiveComponents, you might want to read Introduction to Phoenix LiveView LiveComponents before proceeding with this article.

You can find the code for this article on GitHub.

[Sept. 7, 2020 - Article and code updated to LiveView v0.14.4]

Our Example

For our example, we will modify Chris McCord’s counter example from his LiveView Example Repo. This is a simple LiveView example with buttons to increment and decrement a counter and another one, called Boom, to crash the counter.

We will modify the example to display a modal dialog when the user clicks the...

LiveComponents are a new feature of Phoenix LiveView, bringing lightweight reusable components into the LiveView ecosystem.

[Sept. 7, 2020 - Article and code updated to LiveView v0.14.4]

Phoenix LiveView

Phoenix LiveView became publicly available in March of 2019 and has been under active development ever since; as such we can expect regular changes and additions until the 1.0 released, likely sometime in 2020.

LiveView enables client-side dynamism using server side processes. Built on top of Elixir’s Phoenix web framework, LiveView allows you to create pages that are dynamically updated when state changes on the server, providing dynamism to web pages. And LiveView reacts to user actions, in a way that until now, only client-side programming could do.

A LiveView is an Elixir process, essentially a GenServer. When a client browser connects to a LiveView an initial rendering of the...