Introdução ao Phoenix LiveView


Vinícius Simões

$ whoami

  • Vinícius Simões
  • Software Engineer @ Xerpa
  • Github/Telegram/Twitter: @vinikira

Conteúdo

  • Breve história do Frontend
  • Por dentro do Phoenix LiveView
  • Live Coding
  • Considerações finais

Breve história do Frontend

Server Rendering

server_redering.svg

AJAX

ajax.svg

Single Page Application

spa.svg

Live View?

liveview.svg

Por dentro do Phoenix LiveView

O que é esse tal de Phoenix LiveView?

Segundo a documentação do próprio:

LiveView provides rich, real-time user experiences with server-rendered HTML.

LiveView provê uma experiência rica, em tempo real com HTML renderizado no servidor.

Ciclo de vida

  1. Renderiza a página HTML no servidor;
  2. Entrega esse HTML para o cliente;
  3. Cliente abre uma conexão WebSocket com o servidor;
  4. Cliente emite eventos ao interagir com a tela;
  5. Eventos são capturados pelo servidor (via WebSocket);
  6. Servidor muda o estado do socket e renderiza um novo HTML;
  7. Lib Phoenix JS faz o diff desse conteúdo e aplica a diferença na interface;
  8. Volta ao passo 4.

Definindo um componente/página LiveView

defmodule MyAppWeb.LiveViewPage do
  use Phoenix.LiveView, :live_view

  #...
end

mount/3

O mount é executado duas vezes, uma no server rendering e outra quando a conexão via websocket é estabelecida. 

def mount(params, session, socket) do
  # generate new socket state

  {:ok, socket}
end

render/1

def render(assigns) do
  ~L"""
  <h1>Hello, world!</h1>
  """
end

handle_event/3

def handle_event(event, values, socket) do
  # generate new socket state

  {:noreply, socket}
end

Exemplo completo

defmodule MyAppWeb.LiveViewPage do
  use Phoenix.LiveView, :live_view

  def mount(params, session, socket) do
    # generate new socket state
    {:ok, socket}
  end

  def render(assigns) do
    # should return a liveview template
  end

  def handle_event(event, values, socket) do
    # generate new socket state
    {:noreply, socket}
  end
end

Live Coding

Talk is cheap. Show me the code. - Torvalds, Linus.

Considerações finais

Phoenix não quer matar o JavaScript

ovomataojs.png

Mais uma ferramenta para o ecossistema do Elixir

Phoenix LiveView junto com o ecossistema Phoenix + Elixir nos propõe uma produtividade muito grande. Embora o nível de dinamismo não chegue ao de um SPA ele serve muito bem para tarefas do dia dia e pode até ser usado junto com bibliotecas como React, Angular, Vue etc…

Por hoje é isso pessoal!