ActionCable, Rails API, and React - Modern Single Page Apps

Presented at RailsPacific 2016(http://www.railspacific.com/).

Transcript

2. ACTIONCABLE, RAILS API AND REACT Modern Single Page Apps
3. Vipul A M @vipulnsward
5. “* The weather in Taiwan is HOT with chances of rain in the afternoon. “ - Rexy Second time in Taiwan
11. Rails App
12. Rails API JSON API ACa Auth JSON React Ember Mobile
13. Rails 5
14. http://blog.bigbinary.com/categories/Rails-5 Rails 5 Blog Series (43+ and counting)
15. API Applications
16. What is an API Application? http://developer.github.com http://dev.twitter.com http://developer.dribbble.com/
17. What is an API Application? https://developer.github.com/v3/emojis/ # GET /emojis
 
 {
 "+1": "https://github.global.ssl.fastly.net/images/icons/emoji/+1.png?v5",
 "-1": "https://github.global.ssl.fastly.net/images/icons/emoji/-1.png?v5",
 "101": "https://github.global.ssl.fastly.net/images/icons/emoji/100.png?v5",
 "1234": "https://github.global.ssl.fastly.net/images/icons/emoji/1234.png?v5",
 "8ball": "https://github.global.ssl.fastly.net/images/icons/emoji/8ball.png?v5",
 "a": "https://github.global.ssl.fastly.net/images/icons/emoji/a.png?v5",
 "ab": "https://github.global.ssl.fastly.net/images/icons/emoji/ab.png?v5"
 }

18. Rails API JSON API ACa Auth JSON React Ember Mobile
19. Why Rails? Rails Development Environment Nifty Testing Inbuilt security Parameter parsing Code Reloads anyone? Header responses Other Rails Goodness: AR, AM, AJ, ACa
20. AP Sweetness URLs and resources Caching Authentication respond_to and content types Generators Plugins- rack-cors, etc.
21. Lets create chatty $ rails new chatty --api
22. --api
23. The End
24. What this does Slimmed down middleware* stack No views & cruft from AV ApplicationController < ActionController::API

25. Default Stack - Rack::Sendfile
 - ActionDispatch::Static
 - ActionDispatch::Executor
 - ActiveSupport::Cache::Strategy::LocalCache::Middleware
 - Rack::Runtime
 - ActionDispatch::RequestId
 - Rails::Rack::Logger
 - ActionDispatch::ShowExceptions
 - ActionDispatch::DebugExceptions
 - ActionDispatch::RemoteIp
 - ActionDispatch::Reloader
 - ActionDispatch::Callbacks
 - ActiveRecord::Migration::CheckPending
 - Rack::Head
 - Rack::ConditionalGet
 - Rack::ETag
26. Extend - config.middleware.use Rack::MethodOverride - config.middleware.delete ::Rack::Sendfile
27. ActionController::API - ActionController::UrlFor
 - ActionController::Redirecting
 - AbstractController::Rendering and ActionController::ApiRendering
 - ActionController::Renderers::All
 - ActionController::ConditionalGet
 - ActionController::BasicImplicitRender
 - ActionController::StrongParameters
 - ActionController::ForceSSL
 - ActionController::DataStreaming
 - AbstractController::Callbacks
 - ActionController::Rescue
 - ActionController::Instrumentation
 - ActionController::ParamsWrapper
28. And more - AbstractController::Translation - ActionController::HttpAuthentication::Basic - ActionView::Layouts - ActionController::Cookies
29. Action Cable
30. What is Action Cable?
31. Pub/Sub
32. Concepts Server Side Components (Connections/Subscriptions) Client Side Components (JS/Coffee) (Consumers) 

33. Server Side Connections Channels Main Channel Subscriptions
34. Server Side Connections Channels Main Channel Subscriptions
35. Connections # app/channels/application_cable/connection.rb
 module ApplicationCable
 class Connection < ActionCable::Connection::Base
 identified_by :current_user
 
 def connect
 self.current_user = find_verified_user
 end
 
 protected
 def find_verified_user
 if current_user = User.find_by(id: cookies.signed[:user_id])
 current_user
 else
 reject_unauthorized_connection
 end
 end
 end
 end
36. Server Side Connections Channels Main Channel Subscriptions
37. Channels # app/channels/application_cable/channel.rb
 module ApplicationCable
 class Channel < ActionCable::Channel::Base
 end
 end # app/channels/update_channel.rb
 class UpdateChannel < ApplicationCable::Channel
 end # app/channels/chat_channel.rb
 class ChatChannel < ApplicationCable::Channel
 end
 

38. Server Side Connections Channels Main Channel Subscriptions
39. Channels # app/channels/chat_channel.rb
 class ChatChannel < ApplicationCable::Channel
 # Called when the consumer has successfully
 # become a subscriber of this channel.
 def subscribed
 end
 
 def my_custom_action
 end
 
 def user_posted_something
 end
 end

40. Client Side Consumer Connection Subscriber
41. Consumer Connection // app/assets/javascripts/cable.js
 //= require action_cable
 //= require_self
 //= require_tree ./channels
 
 (function() {
 this.App || (this.App = {});
 
 App.cable = ActionCable.createConsumer();
 }).call(this);
42. Subscription // app/assets/javascripts/cable/subscriptions/ chat.coffee App.cable.subscriptions.create({ channel: "ChatChannel", room: "Best Room" });
43. Tying them up together Streams Broadcasting
44. Streams # app/channels/chat_channel.rb
 class ChatChannel < ApplicationCable::Channel
 def subscribed stop_all_streams
 stream_from "chat_#{params[:room]}"
 end
 end # app/channels/comments_channel.rb class CommentsChannel < ApplicationCable::Channel
 def subscribed
 post = Post.find(params[:id])
 stream_for post
 end
 end

45. Broadcasts PingsChannel.broadcast_to(
 current_user,
 title: ‘Hey Mark!',
 body: ‘Joey is looking for you.’
 ) 
 CommentsChannel.broadcast_to(@post, @comment)
46. Client Side Subscription App.chatChannel = App.cable.subscriptions.create({ channel: "ChatChannel", room: "Best Room" }, {
 //Entry point when some data will be received received: function (data) {
 return this.appendLine(data);
 }, 
 appendLine: function (data) {
 var html;
 html = this.createLine(data);
 return $("[data-chat-room='Best Room']").append(html);
 }, 
 createLine: function (data) {
 return "data[ "sent_by" ] + “: "+ data[ "body" ];
 }
 });
47. this.perform('follow', { message_id: this.message_id }); App.chatChannel.send({ sent_by: "Vipul", body: "ACa is a bliss." }) Client Side Subscription
48. Somethings to take care of config.action_cable.allowed_request_origins = ['http://rubyonrails.com', %r{http://ruby.*}]
 
 config.action_cable.disable_request_forgery_protection = true

49. Running ACa puma
50. React JS
51. React A Simple Component state/props Life Cycle react-rails
52. A Simple Component var HelloMessage = React.createClass({
 render: function() {
 return <div>Hello {this.props.name}</div>;
 }
 });
 
 ReactDOM.render(<HelloMessage name="John" />, mountNode);

53. A Simple Component var Timer = React.createClass({
 getInitialState: function() {
 return {secondsElapsed: 0};
 },
 tick: function() {
 this.setState({secondsElapsed: this.state.secondsElapsed + 1});
 },
 componentDidMount: function() {
 this.interval = setInterval(this.tick, 1000);
 },
 componentWillUnmount: function() {
 clearInterval(this.interval);
 },
 render: function() {
 return (
 <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
 );
 }
 });
 
 ReactDOM.render(<Timer />, mountNode);

54. Life Cycle
55. console.log('Start')
 var App = React.createClass({
 componentWillMount: function(){
 console.log('componentWillMount');
 },
 
 componentDidMount: function(){
 console.log('componentDidMount');
 },
 
 getInitialState: function(){
 return { status: true}
 },
 
 getDefaultProps: function(){
 return {name: 'John'};
 },
 
 …

56. …
 
 render: function() {
 console.log('render');
 return <h1 onClick={this.toggleState}>
 {this.state.status.toString()}
 </h1>
 },
 
 componentWillUnmount: function(){
 console.log('componentWillUnmount')
 },
 
 toggleState: function() {
 this.setState({status: !this.state.status})
 }
 });
57. https://www.packtpub.com/web-development/reactjs-example- building-modern-web-applications-react
58. Demo https://github.com/vipulnsward/actioncable-examples https://github.com/vipulnsward/chatty-node
59. spec "it works!”
60. … componentDidMount() {
 this.setupSubscription();
 }
 … setupSubscription() {
 
 App.comments = App.cable.subscriptions.create("CommentsChannel", {
 message_id: this.state.message.id,
 
 connected: function () {
 setTimeout(() => this.perform('follow', { message_id: this.message_id }), 1000);
 },
 
 received: function (data) {
 this.updateCommentList(data.comment);
 },
 
 updateCommentList: this.updateCommentList.bind(this)
 
 });
 
 }
61. class CommentsChannel < ApplicationCable::Channel
 def follow(data)
 stop_all_streams
 stream_from "messages:#{data['message_id'].to_i}:comments"
 end
 
 def unfollow
 stop_all_streams
 end
 end

62. Rails API JSON API ACa Auth JSON React Ember Mobile
63. Fin.
64. Images: flickr.com/search/? text=taiwan&license=2%2C3%2C4%2C5%2C6%2C9 http://blog.bigbinary.com/categories/Rails%205 https://www.packtpub.com/web-development/reactjs-example-building- modern-web-applications-react https://github.com/vipulnsward/actioncable-examples https://github.com/vipulnsward/chatty-node References