7. “the real-time web consists in making the client
interface (or the web side; or the web layer) of
a web application, to communicate
continuously with the corresponding real-time
server, during every user connection.
wikipedia.org/wiki/Real-time_web
9. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind
A husband and wife shares the same to-do list
Wife creates a to-do item "Buy fruits"
Husband sees the new item (without refreshing!)
Husband sees the total number of
items of the list is now 1
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Wife sees the total number of items is now 2
Wife deletes "Buy oranges"
10. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list
Wife creates a to-do item "Buy fruits"
Husband sees the new item (without refreshing!)
Husband sees the total number of
items of the list is now 1
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Wife sees the total number of items is now 2
Wife deletes "Buy oranges"
11. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list Setup WebSocket
Wife creates a to-do item "Buy fruits"
Husband sees the new item (without refreshing!)
Husband sees the total number of
items of the list is now 1
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Wife sees the total number of items is now 2
Wife deletes "Buy oranges"
12. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list Setup WebSocket
Wife creates a to-do item "Buy fruits" API create item
Husband sees the new item (without refreshing!)
Husband sees the total number of
items of the list is now 1
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Wife sees the total number of items is now 2
Wife deletes "Buy oranges"
13. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list Setup WebSocket
Wife creates a to-do item "Buy fruits" API create item
Husband sees the new item (without refreshing!)
Find husband, broadcast item data and update
view
Husband sees the total number of
items of the list is now 1
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Wife sees the total number of items is now 2
Wife deletes "Buy oranges"
14. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list Setup WebSocket
Wife creates a to-do item "Buy fruits" API create item
Husband sees the new item (without refreshing!)
Find husband, broadcast item data and update
view
Husband sees the total number of
items of the list is now 1
Find husband, broadcast count data and update
view
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Wife sees the total number of items is now 2
Wife deletes "Buy oranges"
15. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list Setup WebSocket
Wife creates a to-do item "Buy fruits" API create item
Husband sees the new item (without refreshing!)
Find husband, broadcast item data and update
view
Husband sees the total number of
items of the list is now 1
Find husband, broadcast count data and update
view
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
API update item and create item
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Wife sees the total number of items is now 2
Wife deletes "Buy oranges"
16. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list Setup WebSocket
Wife creates a to-do item "Buy fruits" API create item
Husband sees the new item (without refreshing!)
Find husband, broadcast item data and update
view
Husband sees the total number of
items of the list is now 1
Find husband, broadcast count data and update
view
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
API update item and create item
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Find wife, broadcast changes and update the
view
Wife sees the total number of items is now 2
Wife deletes "Buy oranges"
17. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list Setup WebSocket
Wife creates a to-do item "Buy fruits" API create item
Husband sees the new item (without refreshing!)
Find husband, broadcast item data and update
view
Husband sees the total number of
items of the list is now 1
Find husband, broadcast count data and update
view
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
API update item and create item
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Find wife, broadcast changes and update the
view
Wife sees the total number of items is now 2
Broadcast to wife and update the count
Wife deletes "Buy oranges"
18. HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife shares the same to-do list Setup WebSocket
Wife creates a to-do item "Buy fruits" API create item
Husband sees the new item (without refreshing!)
Find husband, broadcast item data and update
view
Husband sees the total number of
items of the list is now 1
Find husband, broadcast count data and update
view
Husband refactor the item from "Buy fruits"
to "Buy apples" and "Buy oranges"
API update item and create item
Wife sees the "Buy fruits" is changed to
"Buy apples" and sees a new item "Buy oranges"
Find wife, broadcast changes and update the
view
Wife sees the total number of items is now 2
Broadcast to wife and update the count
Wife deletes "Buy oranges"
API delete item, find husband, broadcast item
data, broadcast count data and update the view
19. DIFFICULTIES IN BUILDING REAL TIME APP
➤ Managing a constant connection between client and server (Long polling or
WebSocket)
➤ Messy code to update view via DOM manipulation (prepend, append, change
HTML content, remove element)
➤ Messy code to push new changes to the correct clients
➤ Finding the correct clients and WebSocket channels
➤ Detect changes in item count
➤ If a model can update another model, then a view can update a model, which
updates another model, and this, in turn, might cause another view to update.
➤ Total number of items in a list
➤ Total number of items by husband
➤ Total number of items by wife
➤ New item created by mistress in a shared list with husband
22. RAILS 5 - ACTIONCABLE
➤ WebSocket is a bi-directional real-time communication
between client and server
➤ It is a persistent connection between server and browser
➤ Server can send data to browser
➤ Browser can send data back to server
➤ Rails 5 ActionCable makes it "easy" to setup WebSocket
27. RAILS 5 - ACTIONCABLE
# app/channels/todos_channel.rb
class TodosChannel < ApplicationCable::Channel
def subscribed
stream_from 'todo'
end
def create(data)
todo = Todo.new(data)
if todo.save
ActionCable.server.broadcast('todo', todo)
else
ActionCable.server.broadcast('todo', 'Save failed')
end
end
end
28. RAILS 5 - ACTIONCABLE
// Javascript
App.cable.subscriptions.create('TodosChannel', {
received: (data) => {
console.log(data)
},
onSubmit: (task) => {
// send data back to server
// calls TodosChannel#create
// with data = { task: task }
this.perform('create', { task: task })
}
})
29. RAILS 5 - ACTIONCABLE
➤ Two kinds of broadcast:
➤ Operation broadcast (CRUD)
➤ Notification broadcast
➤ Operation broadcast is easy - simply broadcast back the result
➤ Notification broadcast is messy
➤ A todo item created
➤ Broadcast to wife/husband - which channel? which stream?
➤ Broadcast the new count - which channel? which stream?
➤ Broadcast to others - which channel? which stream?
➤ Code found in Channel/Controller/Model/Job/etc
31. RETHINKDB
➤ Open Source NoSQL database
➤ Stream changes to server for any changes in data
➤ Instead of finding all the channels to broadcast to, we simply
put all notification broadcasting in our channel#subscribed
39. RETHINKDB
➤ Notification broadcasting only occurs in channel subscription
from RethinkDB
➤ Not hidden in Active Record, Active Job, controllers, channel
subscriptions, etc
➤ Single source of notification broadcast
41. REACTJS
➤ Given a set of data, it will render
➤ When the set of data changes, it will automatically re-render
➤ Declarative style, easy to see how the view will turn out
➤ Easy to reason how data is transformed into view
43. REACTJS
➤ Given a fixed data, ReactJS will always render correctly
➤ We can make ReactJS deal with rendering only
➤ Can we extract all data/state management to another place?
45. REDUX
➤ Gives the state of entire frontend in a JS Object
➤ When the data changes, it creates a new state and pass to all
the React components to re-render (if necessary)
➤ Extracts away all data logic from React
➤ React renders purely based on the state from Redux
➤ Single source of truth for React
57. WIRING THEM UP
➤ ReactJS is (almost)
pure functions of view
➤ Redux is the single
source of truth for
frontend data
➤ Rails provides the
business logic and
WebSocket connection
➤ RethinkDB is the
single source of
broadcast
RethinkDB
Rails
Redux
ReactJS
dispatch
perform
broadcast
58. BENEFITS
➤ Separation of concerns
➤ Easier to subscribe to multiple data changes
➤ Increased use of WebSocket
➤ Real-time app made easy!
59. FOOD FOR THOUGHT
➤ Using Opal for frontend React/Redux
➤ Pure frontend vs monolithic app
➤ Redux + React Native mobile development
with Rails + Rethinkdb backend
➤ Storing Redux state in backend vs frontend
➤ Websocket vs HTTP
60. USING OPAL FOR FRONTEND REACT/REDUX
➤ Ruby everywhere!
➤ Isomorphic app - share code between frontend and backend
61. PURE FRONTEND (REDUX + REACTJS) VS MONOLITHIC APP
➤ Enjoy the goodness of frontend development
➤ Separation of concern between frontend and backend
62. REDUX + REACT NATIVE MOBILE DEVELOPMENT WITH RAILS + RETHINKDB BACKEND
➤ React = "Learn once, write every where"
➤ ReactJS is very similar to React Native
➤ Easy to onboard web developers onto mobile developments
➤ Enjoy hot reloading, code push, etc
63. STORING REDUX STATE IN BACKEND VS FRONTEND
➤ Persist frontend state in backend
➤ Write reducers in Ruby!
➤ Faster performance in calculating new state
➤ Stream state diff to frontend
64. WEBSOCKET VS HTTP API
➤ WebSocket is bi-directional
➤ Why do we need to call HTTP API?
➤ Less overhead, faster response
➤ HTTP - fetch and wait and response
➤ WebSocket - push to server and react on response