Fun with Phoenix LiveView

As a Learning Friday project, I wanted to try out Phoenix LiveViews. This is about what I was able to create in one day, starting from scratch.

What is LiveView

LiveView is a framework that builds upon the Phoenix framework to deliver highly interactive web pages without having to write lots of Javascript.

As Chris McCord, who is one of the authors of the Phoenix framework, and José Valim, who is the creator of Elixir are participating in the creation of LiveView, the framework promises to get some traction within the Elixir community.

If you want to know more about LiveView and what it is, have a look into the Elixir forum.

The Idea

The idea was to build something fun and not too trivial using the source code of the not yet released LiveView project on GitHub. The Game of Life is a popular coding kata, so I chose it to check what can be built in one day.

What came of it

Given how new LiveView is, I expected a lot of bumps and hurdles. I was wrong. Writing the implementation was flawless and so much fun! The embarassing fact is that I put more thought into the implementation of the rules of Game of Life than into the LiveView specific parts.

The complete UI code - apart from some CSS - I wrote is this tiny snippet:

def render(assigns) do
    ~L"""
     <h1>Game of Life</h1>
     <button phx-click="tick">Tick</button>
     <p>Generation: <%= @generation %></p>
     <button phx-click="clear">Clear</button>
     <button phx-click="start">Start</button>
     <button phx-click="stop">Stop</button>
     <table class="board">
      <%= for row <- Board.as_rows(@board) do %>
        <tr>
          <%= for {x, y, alive} <- row do %>
          <td phx-click="swap-state-<%= x %>@<%= y %>" class="cell <%= if alive do "alive" else "dead" end %>"></td>
          <% end %>
        </tr>
      <% end %>
     </table>
    """
  end

This small code snippet renders the complete board, along with the minimal controls I needed. Adding actions to elements is straightforward and easy to debug.

Source code

The source code can be found on GitHub - currently, the project uses Ecto for no good reason - feel free to remove Ecto from it and send a PR.

TL;DR

I recommend to everyone who is interested in new ways to think web development to try out LiveView.

It is definitely ready for tinkering and its authors have delivered high quality frameworks that meet very high standards in the past, so it is worth more than one look and has the potential to change the way a lot of web applications are written in the future by exploring a fresh view on how things are done - which IMHO puts so much fun into our jobs, fellow developers.