GURUPI - Conhecendo Phoenix Liveview

Transcript

1. Conhecendo Phoenix Liveview
2. Alessandro Dias 12 anos trabalhando com desenvolvimento web Trabalhei na Codeminer de 2014 até 2024
3. Começo do anos 90 • Era tudo mato • A internet estava começando • DragonBall era exibido no SBT • Sites estáticos • PHP(1995), Java(1995), Ruby(1995) e Javascript(1995) sendo criados • Conexões HTTP não eram persistentes • Navegar entre páginas em sites era lento
5. Final dos anos 90 • Sites começam a utilizar server side rendering • CSS é criado (1996) • Guerra dos navegadores • One piece começa • Adição da tag <iframe> • Conexões HTTP persistentes com HTTP 1.1 • Ajax é proposto
6. Anos 2000 • Bug do milênio • XMLHttpRequest • Server-sent events • jQuery é criado (2006)
7. Pós ano 2010 • Explode a criaçao de frameworks Javascript: Angular, Backbone, Ember, Vue, React, etc. • Surge o HTML5 • Surge Websockets • Surge o HTTP2 • Elixir é criado (2012) • Turbolinks é criado (2013) • Phoenix é criado (2014) • Phoenix LiveView é criado (2019) • Hotwire é criado (2020)
8. O que é uma aplicação real time? É uma aplicação em que as informações são entregues da maneira mais rápida possível. Exemplo: • WhatsApp • Notificações do Ifood • Google docs • Twitch
9. Técnicas para adicionar replicar comportamento realtime
10. Pooling • Enviar requisições de em períodos de tempo determinados para verificar se existem mudanças • Problemas: ◦ Várias requisições desnecessárias ◦ Desperdício de recursos do servidor
11. Long Pooling • Enviar requisições para verificar se existem mudanças e mantém a conexão aberta até ter dados ou atingir o timeout • Reduz a quantidade de conexões feitas, mas continua consumindo recursos desnecessários do servidor
12. Server-Sent Events (SSE) • Mais leve que Pooling • Comunicação unidirecional (Server -> Client)
13. Websockets • Conexão estabelecida uma vez • Permite comunicação em ambos sentidos • Não precisa transmitir todos o headers que seriam transmitidos em uma requisição HTTP • Menor latência pois a conexão está sempre aberta
16. Phoenix LiveView é uma biblioteca que fornece experiência de usuário realtime com renderização do lado do servidor, através de comunicação via WebSocket, necessitando de mínima escrita de Javascript e nenhuma em alguns casos.
17. message: search params: "text to search"
18. message: search params: "text to search" json {.....}
19. Vamos ao código
20. Mas antes um review rápido da sintaxe do Elixir
21. Pattern matching
22. Pipe operator
23. Pipe operator
24. Tela do Chat
25. Template do chat
27. Tratando os eventos
30. Atualizando as janelas de todos usuários ativos no chat
35. Vamos ao APP rodando
38. LiveView e Hotwire • Estado salvo no backend no "socket" • Não precisa escrever Javascript na maioria dos casos • Possui components de forma similar ao React • Cada página Live View e Stateful componentes são um processo separado • Estado salvo no HTML • Maioria das mudanças do DOM é feita via Stimulus • O Stimulus possui controllers mas não components
39. Slides Repositorio
41. Obrigado LinkedIn adbatista.github.io