Slide 1

Slide 1 text

INTRODUÇÃO AO PHOENIX LIVEVIEW INTRODUÇÃO AO PHOENIX LIVEVIEW VINÍCIUS SIMÕES VINÍCIUS SIMÕES

Slide 2

Slide 2 text

$ WHOAMI $ WHOAMI Vinícius Simões So ware Engineer @ Xerpa Github/Telegram/Twitter: @vinikira

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

BREVE HISTÓRIA DO FRONTEND BREVE HISTÓRIA DO FRONTEND

Slide 5

Slide 5 text

SERVER RENDERING SERVER RENDERING

Slide 6

Slide 6 text

AJAX AJAX

Slide 7

Slide 7 text

SINGLE PAGE APPLICATION SINGLE PAGE APPLICATION

Slide 8

Slide 8 text

LIVE VIEW? LIVE VIEW?

Slide 9

Slide 9 text

POR DENTRO DO PHOENIX LIVEVIEW POR DENTRO DO PHOENIX LIVEVIEW

Slide 10

Slide 10 text

O QUE É ESSE TAL DE 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.

Slide 11

Slide 11 text

CICLO DE VIDA 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 diﬀ desse conteúdo e aplica a diferença na interface; 8. Volta ao passo 4.

Slide 12

Slide 12 text

DEFININDO UM COMPONENTE/PÁGINA DEFININDO UM COMPONENTE/PÁGINA LIVEVIEW LIVEVIEW defmodule MyAppWeb.LiveViewPage do use Phoenix.LiveView, :live_view #... end

Slide 13

Slide 13 text

MOUNT/3 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

Slide 14

Slide 14 text

RENDER/1 RENDER/1 def render(assigns) do ~L"""

Hello, world!

""" end

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

EXEMPLO COMPLETO 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

CONSIDERAÇÕES FINAIS CONSIDERAÇÕES FINAIS

Slide 19

Slide 19 text

PHOENIX NÃO QUER MATAR O JAVASCRIPT PHOENIX NÃO QUER MATAR O JAVASCRIPT

Slide 20

Slide 20 text

MAIS UMA FERRAMENTA PARA O MAIS UMA FERRAMENTA PARA O ECOSSISTEMA DO ELIXIR 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…

Slide 21

Slide 21 text

POR HOJE É ISSO PESSOAL! POR HOJE É ISSO PESSOAL! Dúvidas? Feedbacks? Phoenix LiveView Documentation Phoenix LiveView Course by Pragmatic Studio