Introdução ao Phoenix LiveView

Uma breve introdução sobre o que é o Phoenix Live View.

Repo com os códigos do live coding: https://github.com/vinikira/live_view_intro

Snippets utilizados: https://gist.github.com/vinikira/0df92cb1c32ed15c5742f3c5810e4487

Transcript

1. INTRODUÇÃO AO PHOENIX LIVEVIEW INTRODUÇÃO AO PHOENIX LIVEVIEW VINÍCIUS SIMÕES VINÍCIUS SIMÕES
2. $ WHOAMI $ WHOAMI Vinícius Simões So ware Engineer @ Xerpa Github/Telegram/Twitter: @vinikira
3. CONTEÚDO CONTEÚDO Breve história do Frontend Por dentro do Phoenix LiveView Live Coding Considerações finais
4. BREVE HISTÓRIA DO FRONTEND BREVE HISTÓRIA DO FRONTEND
5. SERVER RENDERING SERVER RENDERING
6. AJAX AJAX
7. SINGLE PAGE APPLICATION SINGLE PAGE APPLICATION
8. LIVE VIEW? LIVE VIEW?
9. POR DENTRO DO PHOENIX LIVEVIEW POR DENTRO DO PHOENIX LIVEVIEW
10. 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.
11. 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 diff desse conteúdo e aplica a diferença na interface; 8. Volta ao passo 4.
12. DEFININDO UM COMPONENTE/PÁGINA DEFININDO UM COMPONENTE/PÁGINA LIVEVIEW LIVEVIEW defmodule MyAppWeb.LiveViewPage do use Phoenix.LiveView, :live_view #... end
13. 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
14. RENDER/1 RENDER/1 def render(assigns) do ~L""" <h1>Hello, world!</h1> """ end
15. HANDLE_EVENT/3 HANDLE_EVENT/3 def handle_event(event, values, socket) do # generate new socket state {:noreply, socket} end
16. 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
17. LIVE CODING LIVE CODING Talk is cheap. Show me the code. - Torvalds, Linus.
18. CONSIDERAÇÕES FINAIS CONSIDERAÇÕES FINAIS
19. PHOENIX NÃO QUER MATAR O JAVASCRIPT PHOENIX NÃO QUER MATAR O JAVASCRIPT
20. 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…
21. POR HOJE É ISSO PESSOAL! POR HOJE É ISSO PESSOAL! Dúvidas? Feedbacks? Phoenix LiveView Documentation Phoenix LiveView Course by Pragmatic Studio