Um clone do Twitter com Phoenix e Vue.js

Slides da palestra que apresentei na Ruby Conf Brasil de 2016 (e depois no ElugSP #7), onde mostro como criar um MVP do Twitter com Phoenix e Vue.js.
O código-fonte do projeto está em https://github.com/philss/sabiah

1. Um clone do Twitter com Phoenix e Vue.js @philipsampaio
2. Sobre Twitter
3. Sobre Vue.js
4. Sobre Phoenix
5. Philip Sampaio @philipsampaio @philss
6. github.com/philss/floki
7. magnetis.com.br/dev
9. Twitter
11. Twitter
13. Twitter é importante!
15. Não podemos correr esse risco
16. Precisamos de uma alternativa
17. Será feito, aqui e agora
18. Um MVP do Twitter
19. MVP que eu possa twittar
20. MVP que eu possa seguir
21. MVP que eu possa ver tweets
22. Um nome
23. sabiah
24. Falando em pássaros
26. Poderoso
27. Poderoso Herda os superpoderes da Elixir
28. Produtivo
29. Produtivo Geradores, guides, metaprogramação
30. Produtivo Um pouco parecido com Rails
31. sabiah
32. sabiah ⏳ 1. tweetar 2. seguir 3. ver timeline com tweets de quem sigo
33. mix phoenix.new sabiah
35. web/
36. lib/
37. sabiah ⏳ 1. tweetar 2. seguir 3. ver timeline com tweets de quem sigo
38. Uma timeline estática Tweetar
39. Timeline é onde vejo novos tweets de quem sigo
 (também os meus tweets)
40. Começa pelo router.ex
41. scope "/", Sabiah do pipe_through :browser # Use the default browser stack get "/", TimelineController, :index end web/router.ex
42. TimelineController
43. defmodule Sabiah.TimelineController do use Sabiah.Web, :controller def index(conn, _params) do render conn, "index.html" end end web/controllers/timeline_controller.ex
44. defmodule Sabiah.TimelineController do use Sabiah.Web, :controller def index(conn, _params) do render conn, "index.html" end end web/controllers/timeline_controller.ex
45. defmodule Sabiah.TimelineView do use Sabiah.Web, :view end web/views/timeline_view.ex
46. <h2>Timeline</h2> <div id='timeline-app'> <input type='text' v-model='newTweet' placeholder='What is happening?'> <button @click='postTweet' class='button'>Tweet</button> <ul class='timeline'> <li class='tweet' v-for='tweet in tweets'> <span class='tweet__content'>{{ tweet }}</span> </li> </ul> </div> web/templates/timeline/index.html.eex
47. {{ }} ?
50. <!doctype html> <html> <body> <div id='app'> <input type='text' v-model='message'> {{ message }} </div> <script src=‘https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.min.js'></script> <script> new Vue({ el: '#app', data: { message: 'Hello world' } }); </script> </body> </html> priv/examples/vue.html
52. new Vue({ el: '#app', data: { message: 'Hello world' } }); priv/examples/vue.html
54. <div id='app'> <input type='text' v-model='message'> {{ message }} </div> priv/examples/vue.html
56. Timeline
57. <h2>Timeline</h2> <div id='timeline-app'> <input type='text' v-model='newTweet' placeholder='What is happening?'> <button @click='postTweet' class='button'>Tweet</button> <ul class='timeline'> <li class='tweet' v-for='tweet in tweets'> <span class='tweet__content'>{{ tweet }}</span> </li> </ul> </div> web/templates/timeline/index.html.eex
58. Precisamos da app Vue.js
59. npm install --save vue
60. Zero de configuração
62. import 'phoenix_html'; import Vue from 'vue/dist/vue'; new Vue({ el: '#timeline-app', data: { newTweet: '', tweets: [] }, methods: { postTweet: function() { this.tweets.unshift(this.newTweet); this.newTweet = ''; } } }); web/static/js/app.js
63. <h2>Timeline</h2> <div id='timeline-app'> <input type='text' v-model='newTweet' placeholder='What is happening?'> <button @click='postTweet' class='button'>Tweet</button> <ul class='timeline'> <li class='tweet' v-for='tweet in tweets'> <span class='tweet__content'>{{ tweet.content }}</span> </li> </ul> </div> web/templates/timeline/index.html.eex
64. Temos uma timeline
68. Enviando tweets Tweetar
69. Web Sockets
70. Phoenix Channels
71. Um canal
72. Uma timeline por usuário
73. mix phoenix.gen.channel Timeline
75. $ novo tweet timeline:42 Philip, id 42
76. defmodule Sabiah.UserSocket do use Phoenix.Socket channel "timeline:*", Sabiah.TimelineChannel transport :websocket, Phoenix.Transports.WebSocket end web/channels/user_socket.ex
77. defmodule Sabiah.UserSocket do use Phoenix.Socket channel "timeline:*", Sabiah.TimelineChannel transport :websocket, Phoenix.Transports.WebSocket end web/channels/user_socket.ex
78. conecta timeline:42 Philip, id 42 $
79. Conectamos pelo cliente JS
80. import socket from './socket'; const userId = 42; let channel = socket.channel(`timeline:${userId}`, {}); channel.join() .receive('ok', resp => { console.log('Joined successfully', resp) }) .receive('error', resp => { console.log('Unable to join', resp) }); // The app ... web/static/js/app.js
81. No Phoenix, aceitamos ou não
82. defmodule Sabiah.TimelineChannel do use Sabiah.Web, :channel def join("timeline:", _payload, _socket) do {:error, %{reason: "User id is missing."}} end def join("timeline:" <> user_id, _payload, socket) do socket = assign(socket, :user_id, user_id) {:ok, socket} end def handle_in("new_tweet", payload, socket) do broadcast socket, "new_tweet", payload {:noreply, socket} end end web/channels/timeline_channel.ex
83. Nosso canal aceita tweets
84. defmodule Sabiah.TimelineChannel do use Sabiah.Web, :channel def join("timeline:", _payload, _socket) do {:error, %{reason: "User id is missing."}} end def join("timeline:" <> user_id, _payload, socket) do socket = assign(socket, :user_id, user_id) {:ok, socket} end def handle_in("new_tweet", payload, socket) do broadcast socket, "new_tweet", payload {:noreply, socket} end end web/channels/timeline_channel.ex
85. novo tweet timeline:42 Philip, id 42 $
86. let app = new Vue({ el: '#timeline-app', data: { newTweet: '', tweets: [] }, methods: { postTweet: function() { channel.push('new_tweet', { tweet: this.newTweet }); this.newTweet = ''; } } }); channel.on('new_tweet', (payload) => { app.tweets.unshift(payload.tweet); }); web/static/js/app.js
87. O Phoenix envia a resposta
88. defmodule Sabiah.TimelineChannel do use Sabiah.Web, :channel def join("timeline:", _payload, _socket) do {:error, %{reason: "User id is missing."}} end def join("timeline:" <> user_id, _payload, socket) do socket = assign(socket, :user_id, user_id) {:ok, socket} end def handle_in("new_tweet", payload, socket) do broadcast socket, "new_tweet", payload {:noreply, socket} end end web/channels/timeline_channel.ex
89. novo tweet timeline:42 Philip, id 42 tweet $
90. let app = new Vue({ el: '#timeline-app', data: { newTweet: '', tweets: [] }, methods: { postTweet: function() { channel.push('new_tweet', { tweet: this.newTweet }); this.newTweet = ''; } } }); channel.on('new_tweet', (payload) => { app.tweets.unshift(payload.tweet); }); web/static/js/app.js
92. Salvando Tweets Tweetar
93. É necessário um model
94. Tweet
95. Tweet user_id, content
96. mix phoenix.gen.model Tweet tweets user_id:references:users content
98. defmodule Sabiah.Tweet do use Sabiah.Web, :model schema "tweets" do field :content, :string belongs_to :user, Sabiah.User timestamps() end @doc """ Builds a changeset based on the `struct` and `params`. """ def changeset(struct, params \\ %{}) do struct |> cast(params, [:user_id, :content]) |> validate_required([:user_id, :content]) end end web/models/tweet.ex
99. Precisamos salvar esse tweet
100. alias Sabiah.Tweet def handle_in("new_tweet", %{ "content" => content } = payload, socket) do user_id = socket.assigns[:user_id] tweet_changeset = Tweet.changeset(%Tweet{}, %{user_id: user_id, content: content}) Repo.insert!(tweet_changeset) broadcast socket, "new_tweet", payload {:noreply, socket} end web/channels/timeline_channel.ex
101. Pronto. Salvando tweets!
102. Mas o que é um changeset?
103. alias Sabiah.Tweet def handle_in("new_tweet", %{ "content" => content } = payload, socket) do user_id = socket.assigns[:user_id] tweet_changeset = Tweet.changeset(%Tweet{}, %{user_id: user_id, content: content}) Repo.insert!(tweet_changeset) broadcast socket, "new_tweet", payload {:noreply, socket} end web/channels/timeline_channel.ex
104. – Ecto.Changeset - https://hexdocs.pm/ecto/Ecto.Changeset.html “Changesets allow filtering, casting, validation and definition of constraints when manipulating structs.”
105. def changeset(struct, params \\ %{}) do struct |> cast(params, [:user_id, :content]) |> validate_required([:user_id, :content]) end web/models/tweet.ex
106. Transforma e valida
107. Pronto. Salvando tweets!
108. sabiah ⏳ 1. tweetar ✅ 2. seguir 3. ver timeline com tweets de quem sigo
109. Tweets para seguidores Seguir
110. Seguidores
112. Um model
113. Follower
114. Follower user_id, followed_user_id
115. E o botão “Seguir”?
117. No template, temos forms
118. <%= for user <- @users do %> <tr> <td><%= user.name %></td> <td><%= user.username %></td> <td> <%= form_for follower_changeset(user.id),
 follower_path(@conn, :create), fn f -> %> <%= hidden_input f, :followed_user_id, value: user.id %> <%= submit "+ follow", class: "button" %> <% end %> </td> </tr> <% end %> web/templates/user/index.html.eex
119. O form recebe um changeset
120. defmodule Sabiah.UserView do use Sabiah.Web, :view alias Sabiah.Follower def follower_changeset(user_id) do Follower.changeset(%Follower{followed_user_id: user_id}) end end web/views/user_view.ex
121. Só falta o controller
122. def create(conn, %{"follower" => params}) do user_id = get_session(conn, :user_id) params = Map.put(params, "user_id", user_id) changeset = Follower.changeset(%Follower{}, params) case Repo.insert(changeset) do {:ok, follow} -> conn |> put_flash(:info, "You are now following #{follow.followed_user_id}") |> redirect(to: user_path(conn, :index)) {:error, changeset} -> IO.inspect(changeset) conn |> put_flash(:error, "You seems to be logged out. Create an user to continue.") |> redirect(to: user_path(conn, :new)) end end web/views/user_view.ex
123. &
124. sabiah ⏳ 1. tweetar ✅ 2. seguir ✅ 3. ver timeline com tweets de quem sigo
125. ( ) $ * novo tweet ??? $
126. Broadcaster
127. def handle_in("new_tweet", %{"content" => content}, socket) do user_id = socket.assigns[:user_id] tweet = save_tweet!(user_id, content) response_payload = decorate_payload(user_id, %{"content" => content}) broadcast socket, "new_tweet", response_payload TweetBroadcaster.broadcast_to_followers(tweet, response_payload) {:noreply, socket} end web/channels/timeline_channel.ex
128. def handle_in("new_tweet", %{"content" => content}, socket) do user_id = socket.assigns[:user_id] tweet = save_tweet!(user_id, content) response_payload = decorate_payload(user_id, %{"content" => content}) broadcast socket, "new_tweet", response_payload TweetBroadcaster.broadcast_to_followers(tweet, response_payload) {:noreply, socket} end web/channels/timeline_channel.ex
129. ( ) $ * novo tweet broadcast! $
130. defmodule Sabiah.TweetBroadcaster do alias Sabiah.{Endpoint, Repo} import Ecto.Query def broadcast_to_followers(tweet, payload) do followers_ids_query = from f in "followers", where: f.followed_user_id == ^tweet.user_id, select: f.user_id followers_ids = Repo.all(followers_ids_query) Enum.map(followers_ids, fn(user_id) -> Endpoint.broadcast!("timeline:#{user_id}", "new_tweet", payload) end) end end web/channels/tweet_broadcaster.ex
131. ( ) $ * novo tweet broadcast! $
132. sabiah ⏳ 1. tweetar ✅ 2. seguir ✅ 3. ver timeline com tweets de quem sigo
133. Há um detalhe faltando
134. Salvar a timeline de cada usuário
136. Veremos ao vivo
137. [Perigo iminente]
139. Conclusão
140. Phoenix
141. Vue.js
142. Escolha a ferramenta
143. Divirta-se!
144. github.com/philss/sabiah
145. • ElixirSchool - https://elixirschool.com/pt/ • Phoenix Guides - http://www.phoenixframework.org/docs/overview • Vue.js - http://vuejs.org/
147. Obrigado! @philipsampaio @philss