$ 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

AJAX

Single Page Application

Live View?

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

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!

• Dúvidas?
• Feedbacks?
• Phoenix LiveView Documentation
• Phoenix LiveView Course by Pragmatic Studio