Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BUILDING REAL-TIME
APP
By Steven Yap
Futureworkz Pte. Ltd.
StevenYap
stevenyap@futureworkz.com
https://github.com/stevenyap
• Host Saigon.rb Ruby Meetup
• Co-Founder of Futureworkz
• Ruby on Rails coder
• Agile startup consultant
Awesome Ruby on Rails Development
http://www.futureworkz.com
http://playbook.futureworkz.com/
WHAT IS A REAL-TIME
APP?
“the real-time web consists in making the client
interface (or the web side; or the web layer) of
a web application, to co...
USERS DON'T NEED TO
REFRESH THE APP TO
GET NEW DATA
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 t...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
HOW DO YOU?
Use Cases Development Effort
Build a real time To-do list app in your mind Setup Rails
A husband and wife share...
DIFFICULTIES IN BUILDING REAL TIME APP
➤ Managing a constant connection between client and server (Long polling or
WebSock...
A PROPOSED SOLUTION - R4
➤ Rails 5 ActionCable
➤ RethinkDB
➤ ReactJS
➤ Redux
RAILS 5 - ACTIONCABLE
RAILS 5 - ACTIONCABLE
➤ WebSocket is a bi-directional real-time communication
between client and server
➤ It is a persiste...
RAILS 5 - ACTIONCABLE
$ gem install rails --pre --no-ri --no-rdoc --api
RAILS 5 - ACTIONCABLE
$ gem install rails --pre --no-ri --no-rdoc --api
#	app/channels/todos_channel.rb	
class	TodosChanne...
RAILS 5 - ACTIONCABLE
$ gem install rails --pre --no-ri --no-rdoc --api
#	app/channels/todos_channel.rb	
class	TodosChanne...
RAILS 5 - ACTIONCABLE
//	Javascript	
App.cable.subscriptions.create('TodosChannel',	{	
		received:	(data)	=>	{	
				consol...
RAILS 5 - ACTIONCABLE
# app/channels/todos_channel.rb
class	TodosChannel	<	ApplicationCable::Channel		
		def	subscribed		
...
RAILS 5 - ACTIONCABLE
//	Javascript	
App.cable.subscriptions.create('TodosChannel',	{	
		received:	(data)	=>	{	
				consol...
RAILS 5 - ACTIONCABLE
➤ Two kinds of broadcast:
➤ Operation broadcast (CRUD)
➤ Notification broadcast
➤ Operation broadcast...
RETHINKDB
RETHINKDB
➤ Open Source NoSQL database
➤ Stream changes to server for any changes in data
➤ Instead of finding all the chan...
RETHINKDB SETUP
#	Gemfile	
gem	'nobrainer'	
$	rails	g	nobrainer:install
RETHINKDB SETUP
#	models/todo.rb	
class	Todo	
		include	NoBrainer::Document	
		include	NoBrainer::Document::Timestamps	
		...
RETHINKDB SETUP
#	models/todo.rb	
class	Todo	
		include	NoBrainer::Document	
		include	NoBrainer::Document::Timestamps	
		...
SUBSCRIBE TO CHANGES
#	app/channels/todos_channel.rb	
class	TodosChannel	<	ApplicationCable::Channel		
		def	subscribed		
...
CHANGES STREAM
#	create	a	todo		
{	
		"new_val"	=>	{					
				"id"	=>	"3SGzWZLEdC2D6P",		
				"task"	=>	"buy	oranges",		
	...
CHANGES STREAM
#	update	a	todo		
{	
		"new_val"	=>	{	
				"id"	=>	"3SEIgBkmjHNuNy",		
				"task"	=>	"buy	oranges",		
				"...
CHANGES STREAM
#	destroy	a	todo		
{	
		"new_val"	=>	nil,		
		"old_val"	=>	{	
				"id"	=>	"3SEIgBkmjHNuNy",		
				"task"	=>...
RETHINKDB
➤ Notification broadcasting only occurs in channel subscription
from RethinkDB
➤ Not hidden in Active Record, Act...
REACTJS
REACTJS
➤ Given a set of data, it will render
➤ When the set of data changes, it will automatically re-render
➤ Declarativ...
REACTJS WALKTHROUGH
REACTJS
➤ Given a fixed data, ReactJS will always render correctly
➤ We can make ReactJS deal with rendering only
➤ Can we ...
REDUX
REDUX
➤ Gives the state of entire frontend in a JS Object
➤ When the data changes, it creates a new state and pass to all
...
REDUX
#	Initial	State	
state	=	{	
		todos:	[]	
}	
#	React	Renders	nothing
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SEIgBkmjHNuNy",		
		task:	"buy	apple",		
		completed:	false	
}
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SEIgBkmjHNuNy",		
		task:	"buy	apple",		
		completed:	false	
}	
#	New	State	
s...
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SEIgBkmjHNuNy",		
		task:	"buy	apple",		
		completed:	false	
}	
#	New	State	
s...
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SGzWZLEdC2D6P",		
		task:	"buy	oranges",		
		completed:	false	
}
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SGzWZLEdC2D6P",		
		task:	"buy	oranges",		
		completed:	false	
}	
#	New	State	...
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SGzWZLEdC2D6P",		
		task:	"buy	oranges",		
		completed:	false	
}	
#	New	State	...
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SxIYBkmjUnxms",		
		task:	"buy	pears",		
		completed:	false	
}
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SxIYBkmjUnxms",		
		task:	"buy	pears",		
		completed:	false	
}	
#	New	State	
s...
REDUX
#	New	Message	to	reducers	
{	
		id:	"3SxIYBkmjUnxms",		
		task:	"buy	pears",		
		completed:	false	
}	
#	New	State	
s...
CONNECTING REDUX &
REACTJS
WIRING THEM UP
➤ ReactJS is (almost)
pure functions of view
➤ Redux is the single
source of truth for
frontend data
➤ Rail...
BENEFITS
➤ Separation of concerns
➤ Easier to subscribe to multiple data changes
➤ Increased use of WebSocket
➤ Real-time ...
FOOD FOR THOUGHT
➤ Using Opal for frontend React/Redux
➤ Pure frontend vs monolithic app
➤ Redux + React Native mobile dev...
USING OPAL FOR FRONTEND REACT/REDUX
➤ Ruby everywhere!
➤ Isomorphic app - share code between frontend and backend
PURE FRONTEND (REDUX + REACTJS) VS MONOLITHIC APP
➤ Enjoy the goodness of frontend development
➤ Separation of concern bet...
REDUX + REACT NATIVE MOBILE DEVELOPMENT WITH RAILS + RETHINKDB BACKEND
➤ React = "Learn once, write every where"
➤ ReactJS...
STORING REDUX STATE IN BACKEND VS FRONTEND
➤ Persist frontend state in backend
➤ Write reducers in Ruby!
➤ Faster performa...
WEBSOCKET VS HTTP API
➤ WebSocket is bi-directional
➤ Why do we need to call HTTP API?
➤ Less overhead, faster response
➤ ...
RESOURCES
➤ https://github.com/rails/rails/tree/master/actioncable
➤ https://www.rethinkdb.com/docs/guide/ruby/
➤ https://...
Building Real Time App
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
React on rails v6.1 at LA Ruby, November 2016
Next
Upcoming SlideShare
React on rails v6.1 at LA Ruby, November 2016
Next
Download to read offline and view in fullscreen.

4

Share

Building Real Time App

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Building Real Time App

  1. 1. BUILDING REAL-TIME APP By Steven Yap Futureworkz Pte. Ltd.
  2. 2. StevenYap stevenyap@futureworkz.com https://github.com/stevenyap
  3. 3. • Host Saigon.rb Ruby Meetup • Co-Founder of Futureworkz • Ruby on Rails coder • Agile startup consultant
  4. 4. Awesome Ruby on Rails Development http://www.futureworkz.com http://playbook.futureworkz.com/
  5. 5. WHAT IS A REAL-TIME APP?
  6. 6. “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
  7. 7. USERS DON'T NEED TO REFRESH THE APP TO GET NEW DATA
  8. 8. 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"
  9. 9. 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"
  10. 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 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"
  11. 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" 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"
  12. 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!) 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"
  13. 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 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"
  14. 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" 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"
  15. 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" Find wife, broadcast changes and update the view Wife sees the total number of items is now 2 Wife deletes "Buy oranges"
  16. 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 Broadcast to wife and update the count Wife deletes "Buy oranges"
  17. 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" API delete item, find husband, broadcast item data, broadcast count data and update the view
  18. 18. 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
  19. 19. A PROPOSED SOLUTION - R4 ➤ Rails 5 ActionCable ➤ RethinkDB ➤ ReactJS ➤ Redux
  20. 20. RAILS 5 - ACTIONCABLE
  21. 21. 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
  22. 22. RAILS 5 - ACTIONCABLE $ gem install rails --pre --no-ri --no-rdoc --api
  23. 23. 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
  24. 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 # Send a message to client ActionCable.server.broadcast('todo', {task: 'Buy Apples'})
  25. 25. RAILS 5 - ACTIONCABLE // Javascript App.cable.subscriptions.create('TodosChannel', { received: (data) => { console.log(data) } })
  26. 26. 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
  27. 27. 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 }) } })
  28. 28. 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
  29. 29. RETHINKDB
  30. 30. 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
  31. 31. RETHINKDB SETUP # Gemfile gem 'nobrainer' $ rails g nobrainer:install
  32. 32. 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
  33. 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 # Use it like ActiveRecord! (mostly) todo = Todo.new({task: 'Buy apples', completed: false}) todo.save todo.errors.full_messages
  34. 34. 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
  35. 35. 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 }
  36. 36. 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 } }
  37. 37. 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 } }
  38. 38. 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
  39. 39. REACTJS
  40. 40. 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
  41. 41. REACTJS WALKTHROUGH
  42. 42. 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?
  43. 43. REDUX
  44. 44. 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
  45. 45. REDUX # Initial State state = { todos: [] } # React Renders nothing
  46. 46. REDUX # New Message to reducers { id: "3SEIgBkmjHNuNy", task: "buy apple", completed: false }
  47. 47. REDUX # New Message to reducers { id: "3SEIgBkmjHNuNy", task: "buy apple", completed: false } # New State state = { todos: [ { id: "3SEIgBkmjHNuNy", task: "buy apple", completed: false } ] }
  48. 48. 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>
  49. 49. REDUX # New Message to reducers { id: "3SGzWZLEdC2D6P", task: "buy oranges", completed: false }
  50. 50. 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 } ] }
  51. 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 } ] } # React Renders <p>buy apple</p> <p>buy oranges</p>
  52. 52. REDUX # New Message to reducers { id: "3SxIYBkmjUnxms", task: "buy pears", completed: false }
  53. 53. 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 } ] }
  54. 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 } ] } # React Renders <p>buy apple</p> <p>buy oranges</p> <p>buy pears</p>
  55. 55. CONNECTING REDUX & REACTJS
  56. 56. 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
  57. 57. BENEFITS ➤ Separation of concerns ➤ Easier to subscribe to multiple data changes ➤ Increased use of WebSocket ➤ Real-time app made easy!
  58. 58. 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
  59. 59. USING OPAL FOR FRONTEND REACT/REDUX ➤ Ruby everywhere! ➤ Isomorphic app - share code between frontend and backend
  60. 60. PURE FRONTEND (REDUX + REACTJS) VS MONOLITHIC APP ➤ Enjoy the goodness of frontend development ➤ Separation of concern between frontend and backend
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. 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
  • GunvantSarpate

    Nov. 25, 2017
  • mikepham12

    Jul. 6, 2017
  • Ahmedrebai2

    Jun. 25, 2017
  • TimothyGWenhold

    Oct. 22, 2016

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

Views

Total views

580

On Slideshare

0

From embeds

0

Number of embeds

8

Actions

Downloads

11

Shares

0

Comments

0

Likes

4

×