A look at building real time app using RethinkDB, Rails 5 with ActionCable, Redux and ReactJS.

1. BUILDING REAL-TIME
APP
By Steven Yap
Futureworkz Pte. Ltd.

2. StevenYap
stevenyap@futureworkz.com
https://github.com/stevenyap

4. • Host Saigon.rb Ruby Meetup
• Co-Founder of Futureworkz
• Ruby on Rails coder
• Agile startup consultant

5. Awesome Ruby on Rails Development
http://www.futureworkz.com
http://playbook.futureworkz.com/

6. WHAT IS A REAL-TIME
APP?

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

8. USERS DON'T NEED TO
REFRESH THE APP TO
GET NEW DATA

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

20. A PROPOSED SOLUTION - R4
➤ Rails 5 ActionCable
➤ RethinkDB
➤ ReactJS
➤ Redux

21. RAILS 5 - ACTIONCABLE

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

23. RAILS 5 - ACTIONCABLE
$ gem install rails --pre --no-ri --no-rdoc --api

24. RAILS 5 - ACTIONCABLE
$ gem install rails --pre --no-ri --no-rdoc --api
# app/channels/todos_channel.rb
class TodosChannel < ApplicationCable::Channel
def subscribed
stream_from 'todo'
end
end

25. RAILS 5 - ACTIONCABLE
$ gem install rails --pre --no-ri --no-rdoc --api
# app/channels/todos_channel.rb
class TodosChannel < ApplicationCable::Channel
def subscribed
stream_from 'todo'
end
end
# Send a message to client
ActionCable.server.broadcast('todo', {task: 'Buy
Apples'})

26. RAILS 5 - ACTIONCABLE
// Javascript
App.cable.subscriptions.create('TodosChannel', {
received: (data) => {
console.log(data)
}
})

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

30. RETHINKDB

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

32. RETHINKDB SETUP
# Gemfile
gem 'nobrainer'
$ rails g nobrainer:install

33. RETHINKDB SETUP
# models/todo.rb
class Todo
include NoBrainer::Document
include NoBrainer::Document::Timestamps
field :task, type: String, required: true
field :completed, type: Boolean, required: true
end

34. RETHINKDB SETUP
# models/todo.rb
class Todo
include NoBrainer::Document
include NoBrainer::Document::Timestamps
field :task, type: String, required: true
field :completed, type: Boolean, required: true
end
# Use it like ActiveRecord! (mostly)
todo = Todo.new({task: 'Buy apples', completed:
false})
todo.save
todo.errors.full_messages

35. SUBSCRIBE TO CHANGES
# app/channels/todos_channel.rb
class TodosChannel < ApplicationCable::Channel
def subscribed
stream_from 'todo'
Todo.all.raw.changes.each do |changes|
ActionCable.server.broadcast(@stream, changes)
end
end
# ...
end

36. CHANGES STREAM
# create a todo
{
"new_val" => {
"id" => "3SGzWZLEdC2D6P",
"task" => "buy oranges",
"completed" => false,
"created_at" => 2016 - 06 - 07 07: 31: 47 + 0000,
"updated_at" => 2016 - 06 - 07 07: 31: 47 + 0000
},
"old_val" => nil
}

37. CHANGES STREAM
# update a todo
{
"new_val" => {
"id" => "3SEIgBkmjHNuNy",
"task" => "buy oranges",
"completed" => false,
"created_at" => 2016 - 06 - 07 03: 12: 40 + 0000,
"updated_at" => 2016 - 06 - 07 07: 32: 40 + 0000
},
"old_val" => {
"id" => "3SEIgBkmjHNuNy",
"task" => "buy apples",
"completed" => false,
"created_at" => 2016 - 06 - 07 03: 12: 40 + 0000,
"updated_at" => 2016 - 06 - 07 07: 32: 24 + 0000
}
}

38. CHANGES STREAM
# destroy a todo
{
"new_val" => nil,
"old_val" => {
"id" => "3SEIgBkmjHNuNy",
"task" => "buy oranges",
"completed" => false,
"created_at" => 2016 - 06 - 07 03: 12: 40 + 0000,
"updated_at" => 2016 - 06 - 07 07: 32: 40 + 0000
}
}

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

40. REACTJS

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

42. REACTJS WALKTHROUGH

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?

44. REDUX

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

46. REDUX
# Initial State
state = {
todos: []
}
# React Renders nothing

47. REDUX
# New Message to reducers
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
}

48. REDUX
# New Message to reducers
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
}
# New State
state = {
todos: [
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
}
]
}

49. REDUX
# New Message to reducers
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
}
# New State
state = {
todos: [
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
}
]
}
# React Renders
<p>buy apple</p>

50. REDUX
# New Message to reducers
{
id: "3SGzWZLEdC2D6P",
task: "buy oranges",
completed: false
}

51. REDUX
# New Message to reducers
{
id: "3SGzWZLEdC2D6P",
task: "buy oranges",
completed: false
}
# New State
state = {
todos: [
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
},
{
id: "3SGzWZLEdC2D6P",
task: "buy oranges",
completed: false
}
]
}

52. REDUX
# New Message to reducers
{
id: "3SGzWZLEdC2D6P",
task: "buy oranges",
completed: false
}
# New State
state = {
todos: [
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
},
{
id: "3SGzWZLEdC2D6P",
task: "buy oranges",
completed: false
}
]
}
# React Renders
<p>buy apple</p>
<p>buy oranges</p>

53. REDUX
# New Message to reducers
{
id: "3SxIYBkmjUnxms",
task: "buy pears",
completed: false
}

54. REDUX
# New Message to reducers
{
id: "3SxIYBkmjUnxms",
task: "buy pears",
completed: false
}
# New State
state = {
todos: [
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
},
{
id: "3SGzWZLEdC2D6P",
task: "buy oranges",
completed: false
},
{
id: "3SxIYBkmjUnxms",
task: "buy pears",
completed: false
}
]
}

55. REDUX
# New Message to reducers
{
id: "3SxIYBkmjUnxms",
task: "buy pears",
completed: false
}
# New State
state = {
todos: [
{
id: "3SEIgBkmjHNuNy",
task: "buy apple",
completed: false
},
{
id: "3SGzWZLEdC2D6P",
task: "buy oranges",
completed: false
},
{
id: "3SxIYBkmjUnxms",
task: "buy pears",
completed: false
}
]
}
# React Renders
<p>buy apple</p>
<p>buy oranges</p>
<p>buy pears</p>

56. CONNECTING REDUX &
REACTJS

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

65. RESOURCES
➤ https://github.com/rails/rails/tree/master/actioncable
➤ https://www.rethinkdb.com/docs/guide/ruby/
➤ https://facebook.github.io/react/docs/thinking-in-react.html
➤ http://redux.js.org/index.html
➤ https://egghead.io/courses/getting-started-with-redux