Supercharge your Ruby on Rails app with ActionCables and Vue.js!

Reactive programming

Websockets

What are ActionCables?

Simple ActionCable with Vue.js example

  • Client post Message through Vue.js
  • Vue.js will send the Message through ActionCable to the backend (Rails)
  • Backend will broadcast Message to all connected clients
  • Vue.js pickups the broadcasted Message and render the change.

Gossip example

Adding Vue.js awesomeness to our Rails app

gem 'vuejs-rails' gem 'jquery-rails'
//= require jquery //= require jquery_ujs //= require rails-ujs //= require vue //= require_tree .
<!DOCTYPE html> <html>    <head>      <title>Gossip</title>      <%= csrf_meta_tags %>      <%= action_cable_meta_tag %>      <%= stylesheet_link_tag       'application', media: 'all' %>    </head>    <body>      <%= yield %>    </body>    <%= javascript_include_tag 'application' %> </html>

Connecting to the backend

Implementing the frontend

Implementing the backend

Deploy to Cloud 66

Reference

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store