Introduction to Phoenix LiveView

git clone git@github.com:alukasz/todo_live_view.git && cd todo_live_view
git checkout part-one
mix deps.get && mix deps.compile
yarn install --cwd assets # or cd assets && npm install
mix phx.server

# lib/todo.ex
defmodule Todo do
  defstruct [:id, :title, completed: false]

  def create(%{"title" => title}) when byte_size(title) >= 3 do
    {:ok, %Todo{id: Ecto.UUID.generate(), title: title}}
  end

  def create(_) do
    {:error, :invalid_title}
  end
end

• render/1 – renders HTML template. HTML can be returned directly using ~L sigil or rendered using Phoenix’s view layer;
• mount/2 – invoked during initial template rendering and succeding WebSocket connection. Here default data for template is assigned to the socket and will be passed to the template (the assigns argument in render/1 function).

# lib/todo_web/live/todo_live.ex
defmodule TodoWeb.TodoLive do
  use Phoenix.LiveView

  @todos [
    %Todo{id: "1", title: "Taste Elixir & Phoenix LiveView", completed: true},
    %Todo{id: "2", title: "Buy a unicorn", completed: false}
  ]

  def render(assigns) do
    TodoWeb.TodoView.render("index.html", assigns)
  end

  def mount(_, socket) do
    {:ok, assign(socket, :todos, @todos)}
  end
end

Example todos are assigned to the socket in mount/2 using assign/3 function. Last part is the view and template, which we invoked in render/1.

# lib/todo_web/views/todo_view.ex
defmodule TodoWeb.TodoView do
  use TodoWeb, :view
end

# lib/todo_web/templates/todo/index.html.leex
  <ul class="todo-list">
    <%= for todo <- @todos do %>
      <li <%= if todo.completed, do: "class=completed" %>>
        <div class="view">
          <input class="toggle" type="checkbox">
          <label><%= todo.title %></label>
        </div>
      </li>
    <% end %>
  </ul>

# lib/todo_web/router.ex
scope "/", TodoWeb do
  pipe_through :browser
  # replace get "/", PageController, :index with
  live "/", TodoLive, as: :todo
end

Start Phoenix server with mix phx.server and head to http://localhost:4000.

We have added a nice amount of interactivity to the application. Let’s go a step further and add a SPA-like routing to filter todos. It is possible using live_link/3 and live_redirect/2 functions provided by LiveView.

# lib/todo_web/router.ex
  live "/", TodoLive, as: :todo
  live "/:filter", TodoLive, as: :todo

Because both routes point to the same LiveView, the library won’t mount a new LiveView every time the link is clicked. Instead a handle_params/3 callback will be invoked. It will receive route parameters as first argument and url as second. We can use this to display only selected todos. Two functions handle_params/3 are defined. The first one will match only when status is one of active or completed. The second one is a fallback that will set filter to all. In mount/2 a default filter is set.

# lib/todo_web/live/todo_live.ex
  def mount(_, socket) do
    {:ok, assign(socket, todos: @todos, filter: "all")}
  end

  def handle_params(%{"filter" => filter}, uri, socket) 
      when filter in ["active", "completed"] do
    {:noreply, assign(socket, :filter, filter)}
  end

  def handle_params(params, uri, socket) do
    {:noreply, assign(socket, :filter, "all")}
  end

Then we need to make changes in the template. We will add 2 functions filter_todos/2 and filter_link/3 in TodoView to help us generating HTML.

# lib/todo_web/views/todo_view.ex
  def filter_todos(todos, "all"), do: todos
  def filter_todos(todos, "active"), do: Enum.reject(todos, &(&1.completed))
  def filter_todos(todos, "completed"), do: Enum.filter(todos, &(&1.completed))

  def filter_link(socket, filter, active_filter) do
    route = Routes.todo_path(socket, TodoWeb.TodoLive, filter)
    live_link(String.capitalize(filter), to: route,
      class: filter_class(filter, active_filter))
  end

  defp filter_class(filter, filter), do: "selected"
  defp filter_class(_, _), do: nil

# lib/todo_web/templates/todo/index.html.leex
  <ul class="todo-list">
    <%= for todo <- filter_todos(@todos, @filter) do %>
      ...
    <% end %>
  </ul>
  ...
  <ul class="filters">
    <%= for filter <- ["all", "active", "completed"] do %>
      <li>
        <%= filter_link(@socket, filter, @filter) %>
      </li>
    <% end %>
  </ul>

Then, any change in the todos will result in sending data over the WebSocket. When marking todo as complete the following payload is received. Under dynamics key there is a list of HTML elements that changed. There is small overhead of Phoenix Channels and LiveView itself, but you can see the HTML changes in payload.

[
  "1",
  "9",
  "lv:phx-5NBVjiDG",
  "phx_reply",
  {
    "response": {
      "diff": {
        "0": {
          "dynamics": [
            [
              "class=completed",
              "c79837da-81ec-4f9e-9e5c-5e8e380dda29",
              "checked",
              "Taste Elixir & Phoenix LiveView"
            ],
            [
              "",
              "584216d7-4441-4e88-bbe9-7a5a6e43ffaa",
              "",
              "Buy a unicorn"
            ]
          ]
        }
      }
    },
    "status": "ok"
  }
]