Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Phoenix LiveReact
さっちゃん
June 30, 2019
Programming
1
260
Phoenix LiveReact
#tokyoex
https://github.com/ne-sachirou/phoenix_react_realtime_example
さっちゃん
June 30, 2019
Tweet
Share
More Decks by さっちゃん
See All by さっちゃん
名實一致
ne_sachirou
0
460
まかれるあなとみあ ―Mackerel のしくみを理解する 30 分― @ Hatena Engineer Seminar #16
ne_sachirou
0
2.3k
tacit programming : Point-free, Concatenatives & J
ne_sachirou
0
320
Monitoring Containerized Elixir
ne_sachirou
1
500
Let's create stateful systems, by Elixir
ne_sachirou
1
510
Phoenix LiveView チュートリアル
ne_sachirou
1
100
DDD: Data Driven Development
ne_sachirou
6
4.3k
Elixir on Containers
ne_sachirou
1
610
發言の超越論的な根拠
ne_sachirou
1
160
Other Decks in Programming
See All in Programming
CLIツールにSwift Concurrencyを適用させようとしている話
417_72ki
3
120
mrubyを1300円のボードで動かそう
yuuu
0
160
コードの解析と言語習得の心得
jinjin33333
0
110
設計とテストの必要性について考える
akeno
0
140
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
620
ゼロから作る Protocol Buffer のパーサーとレキサー / Writing Protocol Buffer Parser/Lexer in Go from scratch
yoheimuta
1
150
TDX22: User-Mode DB Ops
ca_peterson
3
1.1k
Yumemi.apk #6 ~ゆめみのAndroidエンジニア 日頃の成果大発表会!~ Session 2
blendthink
1
200
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
130
職場にPythonistaを増やす方法
soogie
0
170
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
300
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
0
250
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
A designer walks into a library…
pauljervisheath
196
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Gamification - CAS2011
davidbonilla
75
3.9k
Bootstrapping a Software Product
garrettdimon
294
110k
Adopting Sorbet at Scale
ufuk
63
7.5k
Fireside Chat
paigeccino
11
1.2k
Transcript
Phoenix LiveReact
.。oO(さっちゃんですよヾ(〃l _ l)ノ゙ ☆)
Phoenix LiveView https://github.com/phoenixframework/phoenix_live_view
Phoenix LiveView: Interactive, Real-Time Apps. No Need to Write JavaScript.
https://dockyard.com/blog/2018/12/12/phoenix-liveview- interactive-real-time-apps-no-need-to-write-javascript
_⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈_ > No Need to Write JavaScript. <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
Write Elixir. defmodule ExampleWeb.CounterLive do use Phoenix.LiveView def render(assigns) do
~L""" Count: <%= @count %> """ end def mount(%{}, socket) do if connected?(socket), do: :timer.send_interval(1000, self(), :count_up) {:ok, assign(socket, :count, 0)} end def handle_info(:count_up, socket) do count = socket.assigns.count {:noreply, assign(socket, :count, count + 1)} end end
Write EEx. <%= Phoenix.LiveView.live_render(@conn, ExampleWeb.CounterLive, session: %{}) %> Done!
No Need to Write JavaScript?
Taking the principle of excluded middle from the mathematician would
be the same, say, as proscribing the telescope to the astronomer or to the boxer the use of his fists. Hilbert (1927)
Taking the JavaScript from the Web UI would be the
same, say, as proscribing the principle of excluded middle from the mathematician.
UI and the changes of UI are difficult. We can't
escape from JavaScript.
If there is a useChannel React hook…
Improving UX with Phoenix Channels & React Hooks – Flatiron
Labs – Medium https://medium.com/flatiron-labs/improving-ux-with- phoenix-channels-react-hooks-8e661d3a771e
defmodule ExampleWeb.RoomChannel do use ExampleWeb, :channel def join("room:lobby", payload, socket)
do socket = assign(socket, :count, 0) :timer.send_interval(1000, self(), :count_up) {:ok, socket} end def handle_info(:count_up, socket) do count = socket.assigns.count + 1 socket = assign(socket, :count, count) push(socket, "count_up", %{count: count}) {:noreply, socket} end end
import React from "react"; import ReactDOM from "react-dom"; export default
function main() { ReactDOM.render( <SocketProvider wsUrl={"/socket"} options={{ token: window.userToken }}> <App /> </SocketProvider>, document.getElementById("app") ); }
import { Socket } from "phoenix"; import { createContext, useEffect
} from "react"; const SocketContext = createContext(); function SocketProvider({ wsUrl, options, children }) { const socket = new Socket(wsUrl, { params: options }); useEffect(() => { socket.connect(); }, [options, wsUrl]); return ( <SocketContext.Provider value={socket}>{children}</SocketContext.Provider> ); } SocketProvider.defaultProps = { options: {} };
import { useContext, useEffect, useReducer } from "react"; function useChannel(channelTopic,
reducer, initialState) { const socket = useContext(SocketContext); const [state, dispatch] = useReducer(reducer, initialState); useEffect(() => { const channel = socket.channel(channelTopic, {}); channel.onMessage = (event, payload) => { dispatch({ event, payload }); return payload; }; channel.join(); return () => { channel.leave(); }; }, [channelTopic]); return state; }
function appReducer(state, { event, payload }) { switch (event) {
case "count_up": return { ...state, count: payload.count }; default: return state; } } function App(props) { const initialState = { count: 0 }; const { count } = useChannel("room:lobby", appReducer, initialState); return <div>Count: {count}</div>; } Done!
use-phoenix-channel - npm https://www.npmjs.com/package/use-phoenix-channel