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

Slide 1

Slide 1 text

Learning Phoenix with an example: Let's build a chat app Boa tarde! Hoje irei falar para vocês sobre Chat, Elixir e Phoenix.

Slide 2

Slide 2 text

Chat

Slide 3

Slide 3 text

Chat

Slide 4

Slide 4 text

Chat. Agora vamos falar de Elixir!

Slide 5

Slide 5 text

Elixir?

Slide 6

Slide 6 text

Elixir?

Slide 7

Slide 7 text

❤ Elixir! Valeu Valim e Plataformatec s2 Vamos falar de Phoenix

Slide 8

Slide 8 text

Phoenix?

Slide 9

Slide 9 text

Phoenix?

Slide 10

Slide 10 text

❤ Phoenix! Vlw Chris!

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

Ulisses Almeida @ulissesalmeida Eu sou Ulisses Almeida Trabalho na Plataformatec Podem me encontrar no github ou twitter como @ulissesalmeida.

Slide 13

Slide 13 text

consulting and software engineering

Slide 14

Slide 14 text

Estamos contratando!  http://plataformatec.com.br/careers

Slide 15

Slide 15 text

Chat Para construir um Chat, precisamos entender mais ou menos como funciona.

Slide 16

Slide 16 text

IRC MSNP Windows Live XMPP Google Talk MTProto Telegram Campﬁre 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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Web Chat HTTP? Mas como fazer isso no browser? Qual seria a primeira implementação que vc faria?

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

Podemos implementar isso facilmente no html.

Slide 21

Slide 21 text

Ok, recarregar a página inteira não é legal. Que tal um iframe?

Slide 22

Slide 22 text

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…

Slide 23

Slide 23 text

WebSockets! Full duplex! REALTIME ZOMG! …WebSockets! Full duplex! Realtime! São as buzzwords que você vai ouvir falar dessa tecnologia.

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

Tecnologia! Legal! Queremos usar WebSockets no nosso chat. O que o Elixir e Phoenix tem a ver com isso?

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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)

Slide 29

Slide 29 text

Plug Para autenticar o admin vamos usar biblioteca bem simples que implementa um Plug.

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

conn |> plug_1 |> plug_2 |> plug_3 A conexão que chega ela irá passar por uma série de plugs conﬁgurada 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.

Slide 32

Slide 32 text

Vamos colocar o plug! (Baixaremos uma biblioteca de basic auth para pheonix, colocaremos no controller do admin)

Slide 33

Slide 33 text

Channels Para facilitar trabalhar com WebSockets, temos a abstração “Channels" em Phoenix.

Slide 34

Slide 34 text

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 especiﬁcamente o que ele quiser. Vamos olhar com mais detalhes o channel.

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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)

Slide 38

Slide 38 text

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)

Slide 39

Slide 39 text

Elixir http://elixir-lang.org/

Slide 40

Slide 40 text

Phoenix http://www.phoenixframework.org/

Slide 41

Slide 41 text

Obrigado! Espero que tenha sido interessante. Agradeço a presença de vocês! Obrigado! VLW