Patrick Thompson

Founder at Inkstone Software.

Read this first

Creating a Modal LiveView LiveComponent

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 live_redirect, 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.

[Feb. 5, 2020 - Article and code updated to LiveView v0.6.0]
[Dec. 17, 2019 - Article and code written for LiveView v0.4.1]

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.

Screen Shot 2019-11-30 at 6.06.40 PM.png

We will...

Continue reading →


Introduction to Phoenix LiveView LiveComponents

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

[Feb. 5, 2020 - Article and code updated to LiveView v0.6.0]
[Dec. 5, 2019 - Article and code written for LiveView v0.4.1]

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...

Continue reading →