Learning Phoenix with an example: Let's build a chat app

Phoenix is a web framework for Elixir language focused on performance and productivity. In this talk you'll see a live coding demonstration in how to use the framework fundamental features to build a chat application. With this knowledge you'll be able to start your own Phoenix app.

You can see source code of the example:
https://github.com/ulissesalmeida/ikki

Transcript

1. Learning Phoenix with an example: Let's build a chat app Boa tarde! Hoje irei falar para vocês sobre Chat, Elixir e Phoenix.
2. Chat
3. Chat
4. Chat. Agora vamos falar de Elixir!
5. Elixir?
6. Elixir?
7. ❤ Elixir! Valeu Valim e Plataformatec s2 Vamos falar de Phoenix
8. Phoenix?
9. Phoenix?
10. ❤ Phoenix! Vlw Chris!
11. Chat +++ Elixir Phoenix +++ Nessa palestra iremos falar sobre construir um chat usando o framework web Phoenix. Por isso irei focar mais nesses dois assuntos e não tanto sobre Elixir. Se quiser saber mais sobre Elixir, recomendo assistirem a palestra do Lauro Caetano.
12. Ulisses Almeida @ulissesalmeida Eu sou Ulisses Almeida Trabalho na Plataformatec Podem me encontrar no github ou twitter como @ulissesalmeida.
13. consulting and software engineering
14. Estamos contratando!
 http://plataformatec.com.br/careers
15. Chat Para construir um Chat, precisamos entender mais ou menos como funciona.
16. IRC MSNP Windows Live XMPP Google Talk MTProto Telegram Campfire Slack Bate Papo UOL Whatsapp HTTP TCP Games Existem vários aplicativos e protocolos de Chat. Apesar existir vários, é relativamente fácil entender os requisitos básicos.
17. UserA UserB UserA: Hey! UserB: What? UserC: Yey! UserC What? Hey! Yey! Iremos construir um chat onde seja possível que mais que um usuário se comunique em um mesmo espaço. As famosas salas de bate-papo.
18. Web Chat HTTP? Mas como fazer isso no browser? Qual seria a primeira implementação que vc faria?
19. HTTP Server UserA UserB get “/messages" success post “/messages" success get “/messages" success get “/messages" success post “/messages" success get “/messages" success Como funciona o HTTP? O cliente sempre tem que fazer uma requisição e o servidor responde. De tempos e tempos o cliente precisa perguntar.
20. <meta http-equiv="refresh" content="5"> Podemos implementar isso facilmente no html.
21. <iframe> <meta http-equiv="refresh" content="5"> </iframe> Ok, recarregar a página inteira não é legal. Que tal um iframe?
22. window.setInterval(fetchMessages(),5000); Podemos usar AJAX também. Avançamos até esse ponto, existem outras técnicas como “long http connection”, mas que não vale a pena investir tempo nisso agora poque temos…
23. WebSockets! Full duplex! REALTIME ZOMG! …WebSockets! Full duplex! Realtime! São as buzzwords que você vai ouvir falar dessa tecnologia.
24. WebSocket Server UserA UserB Hi! OMG! Hi! OMG! Como funciona? Bem existe primeiro um handshake. Após feito handshake, abre-se uma socket(conexão) permanente entre os dois. A mensagens do servidor para o cliente podem ser feitas a qualquer momento e vice- versa. Esse é o “Full duplex”. Dada a velocidade, temos a sensação do realtime.
25. Tecnologia! Legal! Queremos usar WebSockets no nosso chat. O que o Elixir e Phoenix tem a ver com isso?
26. Phoenix Ai que entra Phoenix Framework. Sabemos que construir toda abstração para lidar com a web seria escrever o seu próprio framework. Então podemos acelerar esse processo de construção usando algo pronto e testado.
27. MVC Framework Isso MVC. Se você ja está acostumado com outros frameworks MVC como Rails, você vai se sentir familiarizado com a estrutura básica.
28. Vou mostrar isso agora para vocês que nunca brincaram o Phoenix ainda. Pensando nas salas do nosso chat, vamos construir um admin que cadastre as salas do nosso chat. (Nesse momento, mostrar a estrutura de diretórios da aplicação, usar o generator e mostrar o que o generator criou, mostrar funcionando)
29. Plug Para autenticar o admin vamos usar biblioteca bem simples que implementa um Plug.
30. plug +-= rack Plug é parecido com rack, pois é enxergado da mesma forma que o rack é para o Ruby. É uma spec para compor módulos entre aplicações web, além ser uma camada de abstração de conexão para diferente servers. Rack separa requests and responses, para plug é apenas connection.
31. conn |> plug_1 |> plug_2 |> plug_3 A conexão que chega ela irá passar por uma série de plugs configurada na sua aplicação. Plug são funções que recebem uma struct de conexão e precisam retornar uma struct de conexão. Plug sempre segue uma direção, nunca volta.
32. Vamos colocar o plug! (Baixaremos uma biblioteca de basic auth para pheonix, colocaremos no controller do admin)
33. Channels Para facilitar trabalhar com WebSockets, temos a abstração “Channels" em Phoenix.
34. Server UserA Socket rooms:* app:* Channels Lembram daquela conexão permante entre o cliente e o servidor? Essa conexão é o socket. Dentro da conexão de socket podemos criar vários Channels, para diferentes casos de uso. O cliente pode escutar especificamente o que ele quiser. Vamos olhar com mais detalhes o channel.
35. rooms:* Channel rooms:432 rooms:555 rooms:123 Topics Events Dentro de um Channel temos os “Topics”. As mensagens que passam pelos Topics são isoladas entre si. Trafegam em ambas direções. Essas mensagens são chamadas de Events.
36. rooms:123 Topic name: “users:join” payload: { message: “Jon Doe” } name: “message:new” payload: { message: “Hi!” } Events Os eventos possuem um nome que é uma string. Possui um payload, onde é possível colocar mais detalhes sobre o evento. O payload pode ser um json.
37. Vamos colocar isso no nosso app e fazer ele funcionar com um chat. :) (Montar app usando o generators do channel, conectar o usuário entrando em um room cadastrado no admin)
38. Ikki https://github.com/ulissesalmeida/ikki Se vocês quiserem ter acesso ao código, praticarem Phoenix seguindo as features que implementei. Vocês podem acessar esse repositório fazer o fork e brincar. (Mostrar o repositório)
39. Elixir http://elixir-lang.org/
40. Phoenix http://www.phoenixframework.org/
41. Obrigado! Espero que tenha sido interessante. Agradeço a presença de vocês! Obrigado! VLW