Realtime Mobile Apps with React Native and Elixir - ElixirConf 2017

Building realtime mobile apps presents several challenges. Most approaches default to complex polling and caching techniques, and/or use subpar toolchains. This talk argues that functional programming is the best way to build scalable mobile apps. The talk demonstrates how to quickly build a realtime cross-platform mobile app with React Native. In addition, it describes how to use Elixir and the Phoenix framework to drastically reduce the effort and complexity necessary to build a realtime web server. Lastly, the talk argues that this approach is the most maintainable for small to medium-sized development teams.

Transcript

1. Realtime Mobile Apps with React Native and Elixir Osa Gaius github.com/osagaius @osagaius
2. Who am I? Engineer at Mailchimp Organizer - Atlanta Elixir Meetup
3. Outline 1. Intro + Demo 2. Functional Programming 3. Reactive Programming 4. React Native 5. Redux 6. Elixir + Phoenix 7. Conclusion
4. What’s Realtime?
5. What’s Realtime?
6. What’s Realtime?
7. Why Realtime?
8. Speed vs. Simplicity
9. Demo
10. Approaches to Realtime
11. Choosing an Approach • “Do you even need real-time?” • Team • Complexity over time ◦ External dependencies ◦ Testing • Functional + Reactive
12. New Tools
13. Choosing an Approach • “Do you even need real-time?” • Team • Complexity over time ◦ External dependencies ◦ Testing • Functional + Reactive
14. Functional Programming
15. Functional Programming • Pure functions • State
16. Pure Functions Impure function square(x) { updateXInDatabase(x); return x * x; } Pure function square(x) { // return the output return x * x; }
17. Pure Functions contd. Impure var count = 0; function increaseCount(val) { count += val; } Pure ?
18. Pure Functions contd. Impure var count = 0; function increaseCount(val) { count += val; } Pure var count = 0; function increaseCount(curentVal, val) { curentVal + val; } var count = increaseCount(count, 1);
19. Functional Programming • Pure functions • State
20. State
21. Takeaways • Pure functions reduce complexity • Reason about state explicitly • Don’t share
22. Reactive Programming
23. Streams
24. Dataflow System A System B User Interface
25. Dataflow contd. System A System B User Interface
26. Dataflow contd. System A System B User Interface Button Click!
27. Dataflow contd. System A System B User Interface
28. Dataflow contd. System A System B User Interface
29. Unidirectional Dataflow • Simplicity • Contained complexity • Utilize modern tooling correctly
30. Unidirectional Dataflow Services App Data Store
31. Takeaways • Design your data flow • Prefer uni-directionality
32. React Native
33. React Native Javascript library for building cross-platform native apps
34. Who uses it?
35. Javascript • Developer friendly • Tooling ◦ Write ◦ Build ◦ Test npm install -g react-native-cli react-native-cli init AwesomeProject react-native-cli run-ios
36. Native • Not a “mobile web app” • Access native code
37. Components Component Component Component
38. Components contd. const Button = (props) => { return ( <TouchableOpacity onPress={props.onPress}> <Text> I am Button </Text> </TouchableOpacity> ); }; export { Button }; Button
39. Components contd. ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange() { //handle username change } render() { return ( <Card> <CardSection> <Input onChangeText={this.onUserNameChange.bind(this)} /> </CardSection> {this.renderError()} <Button title=”Log In”> </Card> ); } } LoginForm
40. Components contd. ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange() { //handle username change } render() { return ( <Card> <CardSection> <Input onChangeText={this.onUserNameChange.bind(this)} /> </CardSection> {this.renderError()} {this.renderButton()} </Card> ); } } LoginForm
41. Components contd. ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange() { //handle username change } render() { return ( <Card> <CardSection> <Input onChangeText={this.onUserNameChange.bind(this)} /> </CardSection> {this.renderError()} {this.renderButton()} </Card> ); } } LoginForm
42. Redux
43. Redux • State ◦ Global ◦ Read only • Uni-directional
44. Elements • View • Store • Reducers • Actions
45. Store import { Provider } from 'react-redux'; import ReduxThunk from 'redux-thunk'; import { createStore, applyMiddleware } from 'redux'; import reducers from './reducers'; export default class App extends React.Component { render() { const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); return ( <Provider store={store}> ... </Provider> ); } }
46. Store import { Provider } from 'react-redux'; import ReduxThunk from 'redux-thunk'; import { createStore, applyMiddleware } from 'redux'; import reducers from './reducers'; export default class App extends React.Component { render() { const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); return ( <Provider store={store}> ... </Provider> ); } }
47. Login Form revisited ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange(text) { //handle username change } render() { return ( <Card> <CardSection> <Input value=? onChangeText={this.onUserNameChange.bind(this)} /> </CardSection> ... </Card> ); } }
48. Login Form revisited ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange(text) { //handle username change } render() { return ( <Card> <CardSection> <Input value=? onChangeText={this.onUserNameChange.bind(this)} /> </CardSection> ... </Card> ); } }
49. Login Form revisited ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange(text) { //handle username change } render() { return ( <Card> <CardSection> <Input value=? onChangeText={this.onUserNameChange.bind(this)} /> </CardSection> ... </Card> ); } }
50. Login Form revisited ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange(text) { … } render() { return ( <Card> <CardSection> <Input value=? onChangeText={this.onUserNameChange.bind(this)} /> </CardSection> ... </Card> ); } }
51. Login Form revisited ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange(text) { this.props.userNameChanged(text); } render() { return ( <Card> <CardSection> <Input value=? onChangeText={this.onUserNameChange.bind(this)} /> </CardSection> ... </Card> ); } }
52. Login Form revisited import { userNameChanged } from '../actions'; class LoginForm extends React.Component { ... } const mapStateToProps = (state) => { const { userName, error, loading } = state.auth; return { userName, error, loading }; }; export default connect(mapStateToProps, { userNameChanged })(LoginForm);
53. Login Form revisited import { userNameChanged } from '../actions'; class LoginForm extends React.Component { ... } const mapStateToProps = (state) => { const { userName, error, loading } = state.auth; return { userName, error, loading }; }; export default connect(mapStateToProps, { userNameChanged })(LoginForm);
54. Login Form revisited import { userNameChanged } from '../actions'; class LoginForm extends React.Component { ... } const mapStateToProps = (state) => { const { userName, error, loading } = state.auth; return { userName, error, loading }; }; export default connect(mapStateToProps, { userNameChanged })(LoginForm);
55. Login Form revisited import { userNameChanged } from '../actions'; class LoginForm extends React.Component { ... } const mapStateToProps = (state) => { const { userName, error, loading } = state.auth; return { userName, error, loading }; }; export default connect(mapStateToProps, { userNameChanged })(LoginForm);
56. Login Form revisited import { userNameChanged } from '../actions'; class LoginForm extends React.Component { ... } const mapStateToProps = (state) => { const { userName, error, loading } = state.auth; return { userName, error, loading }; }; export default connect(mapStateToProps, { userNameChanged })(LoginForm);
57. Actions export const userNameChanged = (text) => { return { type: “username_changed”, payload: text }; };
58. Actions export const userNameChanged = (text) => { return { type: “username_changed”, payload: text }; };
59. Reducers const INITIAL_STATE = { userName: '', error: '' }; export default (state = INITIAL_STATE, action) => { switch (action.type) { case “username_changed”: return { ...state, userName: action.payload, error: '' }; default: return state; } };
60. Login Form revisited ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange(text) { //handle username change } render() { return ( <Card> <CardSection> <Input value=? onChangeText=... /> </CardSection> {this.renderError()} {this.renderButton()} </Card> ); } }
61. Login Form revisited ... import { Button, Card, CardSection, Input, Spinner } from './common'; class LoginForm extends React.Component { onUserNameChange(text) { //handle username change } render() { return ( <Card> <CardSection> <Input value={this.props.userName} onChangeText=... /> </CardSection> {this.renderError()} {this.renderButton()} </Card> ); } }
62. Login Form revisited import { userNameChanged } from '../actions'; class LoginForm extends React.Component { ... } const mapStateToProps = (state) => { const { userName } = state.auth; return { userName }; }; export default connect(mapStateToProps, { userNameChanged })(LoginForm);
63. Login Form revisited import { userNameChanged } from '../actions'; class LoginForm extends React.Component { ... } const mapStateToProps = (state) => { const { userName } = state.auth; return { userName }; }; export default connect(mapStateToProps, { userNameChanged })(LoginForm);
64. Login Form revisited import { userNameChanged } from '../actions'; class LoginForm extends React.Component { ... } const mapStateToProps = (state) => { const { userName } = state.auth; return { userName }; }; export default connect(mapStateToProps, { userNameChanged })(LoginForm);
65. Takeaways • Uni-directional flow • Pure components
66. Elixir + Phoenix
67. Phoenix Channels • Routing • Presence • Cross-Platform
68. Channels contd. defmodule ChatServer.UserSocket do use Phoenix.Socket channel "rooms:*", PhoenixChat.RoomChannel transport :websocket, Phoenix.Transports.WebSocket def connect(%{"user" => user}, socket) do {:ok, assign(socket, :user, user)} end end
69. Channels contd. defmodule ChatServer.UserSocket do use Phoenix.Socket channel "rooms:*", PhoenixChat.RoomChannel transport :websocket, Phoenix.Transports.WebSocket def connect(%{"user" => user}, socket) do {:ok, assign(socket, :user, user)} end end
70. Channels contd. defmodule ChatServer.UserSocket do use Phoenix.Socket channel "rooms:*", PhoenixChat.RoomChannel transport :websocket, Phoenix.Transports.WebSocket def connect(%{"user" => user}, socket) do {:ok, assign(socket, :user, user)} end end
71. Channels contd. defmodule ChatServer.UserSocket do use Phoenix.Socket channel "rooms:*", ChatServer.RoomChannel transport :websocket, Phoenix.Transports.WebSocket def connect(%{"user" => user}, socket) do {:ok, assign(socket, :user, user)} end end
72. Login Form revisited import { joinSocket } from '../actions'; class LoginForm extends React.Component { onButtonPress() { this.props.joinSocket(); } render() { return ( <Card> <Button onPress={this.onButtonPress.bind(this)}> Log In </Button> </Card> ); } } export default connect(mapStateToProps, { userNameChanged, joinSocket })(LoginForm);
73. Login Form revisited import { joinSocket } from '../actions'; class LoginForm extends React.Component { onButtonPress() { this.props.joinSocket(); } render() { return ( <Card> <Button onPress={this.onButtonPress.bind(this)}> Log In </Button> </Card> ); } } export default connect(mapStateToProps, { userNameChanged, joinSocket })(LoginForm);
74. Login Form revisited import { joinSocket } from '../actions'; class LoginForm extends React.Component { onButtonPress() { this.props.joinSocket(); } render() { return ( <Card> <Button onPress={this.onButtonPress.bind(this)}> Log In </Button> </Card> ); } } export default connect(mapStateToProps, { userNameChanged, joinSocket })(LoginForm);
75. Login Form revisited import { joinSocket } from '../actions'; class LoginForm extends React.Component { onButtonPress() { this.props.joinSocket(); } render() { return ( <Card> <Button onPress={this.onButtonPress.bind(this)}> Log In </Button> </Card> ); } } export default connect(mapStateToProps, { joinSocket })(LoginForm);
76. Actions export const joinSocket = () => { return (dispatch) => { const socket = new Socket('http://localhost:4000/socket';); socket.connect(); socket.onOpen(() => { dispatch({ type: CONNECT_SUCCESS, payload: { socket } }); Actions.main(); }); }; };
77. Actions export const joinSocket = () => { return (dispatch) => { const socket = new Socket('http://localhost:4000/socket';); socket.connect(); socket.onOpen(() => { dispatch({ type: CONNECT_SUCCESS, payload: { socket } }); Actions.main(); }); }; };
78. Actions export const joinSocket = () => { return (dispatch) => { const socket = new Socket('http://localhost:4000/socket';); socket.connect(); socket.onOpen(() => { dispatch({ type: CONNECT_SUCCESS, payload: { socket } }); Actions.main(); }); }; };
79. Actions export const joinSocket = () => { return (dispatch) => { const socket = new Socket('http://localhost:4000/socket';); socket.connect(); socket.onOpen(() => { dispatch({ type: CONNECT_SUCCESS, payload: { socket } }); Actions.main(); }); }; };
80. Actions export const joinSocket = () => { return (dispatch) => { const socket = new Socket('http://localhost:4000/socket';); socket.connect(); socket.onOpen(() => { dispatch({ type: CONNECT_SUCCESS, payload: { socket } }); Actions.main(); }); }; };
81. Reducers export default (state = INITIAL_STATE, action) => { switch (action.type) { case CONNECT_SUCCESS: return { ...state, socket: action.payload.socket }; default: return state; } };
82. Actions export const joinSocket = () => { return (dispatch) => { const socket = new Socket('http://localhost:4000/socket';); socket.connect(); socket.onOpen(() => { dispatch({ type: CONNECT_SUCCESS, payload: { socket } }); Actions.main(); }); }; };
83. The Lobby import { joinRoom } from '../actions'; class RoomList extends React.Component { componentWillMount() { const redirectToRoom = false; this.props.joinRoom( 'lobby', this.props.socket, this.props.userName, redirectToRoom ); this.createDataSource(this.props.rooms); } }
84. The Lobby import { joinRoom } from '../actions'; class RoomList extends React.Component { componentWillMount() { const redirectToRoom = false; this.props.joinRoom( 'lobby', this.props.socket, this.props.userName, redirectToRoom ); this.createDataSource(this.props.rooms); } }
85. The Lobby import { joinRoom } from '../actions'; class RoomList extends React.Component { componentWillMount() { const redirectToRoom = false; this.props.joinRoom( 'lobby', this.props.socket, this.props.userName, redirectToRoom ); this.createDataSource(this.props.rooms); } }
86. The Lobby const mapStateToProps = (state) => { const { socket, userName } = state.auth; return { socket, userName }; }; export default connect(mapStateToProps, { joinRoom })(RoomList);
87. The Lobby const mapStateToProps = (state) => { const { socket, userName } = state.auth; return { socket, userName }; }; export default connect(mapStateToProps, { joinRoom })(RoomList);
88. The Lobby export const joinRoom = (roomName, socket, userName, redirect) => { return (dispatch) => { const channel = socket.channel(`room:${roomName}`, { userName }); channel.join() .receive('ok', () => { dispatch({ type: JOIN_ROOM_SUCCESS, payload: { channel, name } }); }) }; };
89. The Lobby export const joinRoom = (roomName, socket, userName, redirect) => { return (dispatch) => { const channel = socket.channel(`room:${roomName}`, { userName }); channel.join() .receive('ok', () => { dispatch({ type: JOIN_ROOM_SUCCESS, payload: { channel, name } }); }) }; };
90. The Lobby export const joinRoom = (roomName, socket, userName, redirect) => { return (dispatch) => { const channel = socket.channel(`room:${roomName}`, { userName }); channel.join() .receive('ok', () => { dispatch({ type: JOIN_ROOM_SUCCESS, payload: { channel, name } }); }) }; };
91. The Lobby export const joinRoom = (roomName, socket, userName, redirect) => { return (dispatch) => { const channel = socket.channel(`room:${roomName}`, { userName }); channel.join() .receive('ok', () => { dispatch({ type: JOIN_ROOM_SUCCESS, payload: { channel, name } }); }) }; };
92. The Lobby export const joinRoom = (roomName, socket, userName, redirect) => { return (dispatch) => { const channel = socket.channel(`room:${roomName}`, { userName }); channel.join() .receive('ok', () => { dispatch({ type: JOIN_ROOM_SUCCESS, payload: { channel, name } }); }) }; };
93. The Lobby defmodule ChatServer.RoomChannel do use Phoenix.Channel def join("room:lobby", _params, socket) do send self(), :after_join {:ok, socket} end def handle_info(:after_join, socket) do broadcast socket, "rooms_list", %{value: get_rooms()} {:noreply, socket} end end
94. The Lobby defmodule ChatServer.RoomChannel do use Phoenix.Channel def join("room:lobby", _params, socket) do send self(), :after_join {:ok, socket} end def handle_info(:after_join, socket) do broadcast socket, "rooms_list", %{value: get_rooms()} {:noreply, socket} end end
95. The Lobby defmodule ChatServer.RoomChannel do use Phoenix.Channel def join("room:lobby", _params, socket) do send self(), :after_join {:ok, socket} end def handle_info(:after_join, socket) do broadcast socket, "rooms_list", %{value: get_rooms()} {:noreply, socket} end end
96. The Lobby defmodule ChatServer.RoomChannel do use Phoenix.Channel def join("room:lobby", _params, socket) do send self(), :after_join {:ok, socket} end def handle_info(:after_join, socket) do broadcast socket, "rooms_list", %{value: get_rooms()} {:noreply, socket} end end
97. The Lobby const setUpRoomsListHandler = (dispatch, channel) => { channel.on('rooms_list', payload => { const rooms = payload.value; dispatch({ type: NEW_ROOMS_LIST_RECEIVED, payload: rooms }); }); };
98. The Lobby const setUpRoomsListHandler = (dispatch, channel) => { channel.on('rooms_list', payload => { const rooms = payload.value; dispatch({ type: NEW_ROOMS_LIST_RECEIVED, payload: rooms }); }); };
99. The Lobby const setUpRoomsListHandler = (dispatch, channel) => { channel.on('rooms_list', payload => { const rooms = payload.value; dispatch({ type: NEW_ROOMS_LIST_RECEIVED, payload: rooms }); }); };
100. The Lobby const setUpRoomsListHandler = (dispatch, channel) => { channel.on('rooms_list', payload => { const rooms = payload.value; dispatch({ type: NEW_ROOMS_LIST_RECEIVED, payload: rooms }); }); };
101. The Lobby export default (state = INITIAL_STATE, action) => { switch (action.type) { case NEW_ROOMS_LIST_RECEIVED: return { ...state, rooms: action.payload, }; default: return state; } };
102. The Lobby export default (state = INITIAL_STATE, action) => { switch (action.type) { case NEW_ROOMS_LIST_RECEIVED: return { ...state, rooms: action.payload, }; default: return state; } };
103. The Lobby export default (state = INITIAL_STATE, action) => { switch (action.type) { case NEW_ROOMS_LIST_RECEIVED: return { ...state, rooms: action.payload, }; default: return state; } };
104. What’s next? • Adding a room • Adding messages
105. Conclusion
106. Questions? github.com/osagaius @osagaius
107. Code • UI ◦ https://github.com/osagaius/react_native_chatroom/ • Backend ◦ https://github.com/osagaius/chat_server