Phoenix LiveView: It's a Kind of Magic

Transcript

1. XELIM PHOENIX LIVEVIEW: IT’S A KIND OF MAGIC
2. O QUE É PHOENIX LIVEVIEW? Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. phoenixframework/phoenix_live_view
3. - Tudo começa como uma request HTTP e uma resposta HTML - A função mount/3 é chamada, fazendo as atribuições necessárias a um socket - Logo após as atribuições ao socket, a função render/1 é chamada para que o conteúdo seja enviado como resposta - Garante que, mesmo que o JavaScript do navegador esteja desabilitado, seja possível renderizar conteúdo ao usuário CICLO DE VIDA
4. - Depois do conteúdo inicial ser renderizado, o navegador e o servidor se conectam via WebSockets - Essa conexão garante transmissão de dados de forma mais rápida que uma request HTTP comum - Depois de ambas as pontas estarem conectadas, sempre que o socket ser alterado no backend, o conteúdo renderizado no navegador é atualizado, sem a necessidade de escrever um pingo de JavaScript - A conexão via WebSockets também permite emitir eventos do navegador para o backend através de bindings CICLO DE VIDA
5. - Os eventos emitidos serão capturados na LiveView, ocasionando novas atualizações no socket e, consequentemente, atualizando seu conteúdo no navegador - Sempre que um socket é atualizado, a função de render/1 é novamente chamada para criar o conteúdo com os novos valores do socket - O processo é inteligente o suficiente para enviar apenas o conteúdo atualizado para o navegador, e apenas ele é atualizado na tela - Uma LiveView é eterna - até que a conexão seja desconectada ou haja um crash no processo CICLO DE VIDA
6. - Atributos adicionados ao DOM que permitem a interação entre frontend e backend BINDINGS Exemplo de bindings
7. BINDINGS Possibilidades de bindings - https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-bindings
8. - Compartimentação de HTML e eventos com render, live_render e live_component - Live navigation - Tratamento de erros - JavaScript Hooks - JS e Elixir unidos por uma causa nobre - Testes MAIS COISAS INTERESSANTES
9. #PROVOCAÇÃO Tweet do nosso pensador contemporâneo.
10. - Qualquer aplicação web que exija atualizações dinâmicas a partir de interações com os usuários que sejam escritas em Elixir podem (devem) usar LiveView - A vida é muito boa escrevendo o mínimo de JavaScript QUANDO USAR
11. - Performance - até parece magia - Regras de negócio podem existir em apenas uma ponta da aplicação - Produtividade - não há mudança de contexto entre linguagens - O privilégio de não precisar esquentar a cabeça com webpack, babel e jest - Tooling? Pfff. In Valim We Trust. BENEFÍCIOS
12. - Quando a necessidade das interações do usuário é apenas estética - transições CSS, atualizações de classes e estilos no geral - Quando a aplicação não é escrita em Elixir - Quando você não gosta de coisas simples e não quer ser feliz no dia-a-dia QUANDO NÃO USAR
13. - Geração de notas de repúdio atualizada em tempo-real de acordo com inputs do usuário - $ mix phx.new repudiei —live LIVE-CODING: REPUDIEI
14. “SE UMA APLICAÇÃO PODE SER FEITA COM LIVE_VIEW, FATALMENTE ELA SERÁ FEITA COM LIVE_VIEW.” CLARICE LISPECTOR
15. - https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html - https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-life-cycle - https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-bindings - https://pragmaticstudio.com/phoenix-liveview - https://twitter.com/dhh/status/1275902566719610880 REFERÊNCIAS
16. OBRIGADO.