Phoenix LiveReact

#tokyoex
https://github.com/ne-sachirou/phoenix_react_realtime_example

Transcript

1. Phoenix LiveReact
2. .｡oO(さっちゃんですよヾ(〃l _ l)ﾉﾞ ☆)
3. Phoenix LiveView https://github.com/phoenixframework/phoenix_live_view
4. 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
5. ＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿ ＞ No Need to Write JavaScript. ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
6. 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
7. Write EEx. <%= Phoenix.LiveView.live_render(@conn, ExampleWeb.CounterLive, session: %{}) %> Done!
8. No Need to Write JavaScript?
9. 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)
10. Taking the JavaScript from the Web UI would be the same, say, as proscribing the principle of excluded middle from the mathematician.
11. UI and the changes of UI are difficult. We can't escape from JavaScript.
12. If there is a useChannel React hook…
13. Improving UX with Phoenix Channels & React Hooks – Flatiron Labs – Medium https://medium.com/flatiron-labs/improving-ux-with- phoenix-channels-react-hooks-8e661d3a771e
14. 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
15. 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") ); }
16. 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: {} };
17. 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; }
18. 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!
19. use-phoenix-channel - npm https://www.npmjs.com/package/use-phoenix-channel