Volt – A New Framework for Ruby

Volt – a new Framework for Ruby where both the server and client sides are written in Ruby via OPAL (a ruby to JavaScript compiler) so developer can write dynamic applications without writing a single JavaScript code. Volt is similar to Meteor but it doesn’t have all the portions of Meteor.

The Basic Setup for Volt Framework

Let us install Volt and create an empty app. Make sure that you have ruby (>2.1.0) and ruby gems installed.

Install Volt Gem :

gem install volt

We can create a new project using the volt gem:

volt new sample_project

Fire up the web server:

bundle exec volt server

We can access the Volt console with:

bundle exec volt console

The Opal Compiler

Volt applications run Ruby on both frontend and backend. So the puts statement in a controller action appears in browser window and not in terminal console. And also writing Ruby code for the front end with Volt is very easy. The opal compiler translates Ruby to JavaScript. Amazing thing about it is that there is no compilation process to follow and no build tools to install. When you run volt server, everything takes place in the background. No refresh or restart is needed when you do changes to code and data.

Calling a JavaScript alert with Ruby

# Calling JavaScript functions in Ruby
module Main
class MainController < Volt::ModelController
# Called from front end when “todos” route loads.
def todos
alert ‘totes amaze’
end
end
end

Easy Syncing via Reactive Models

Concentrate more on this part when learning volt. Volt::Model acts as hash-like Ruby objects that sync between the front end and back end simultaneously. Usually, updates to the model happens automatically. The concept of “stores” in Volt is used to sync application data in persistent and non-persistent forms. And also a uniform means of syncing data between local storage, MangoDB, cookies, sessions and URL params.

Let’s check how to create real-time chat app of Ruby and HTML:

# Create a persistent data model. This gets stored in MongoDB.
class ChatMessage < Volt::Model
end

View Code:

<:Body>
<form e-submit=”say”>
<input class=”form-control”
type=”text”
value=”{{ page._input }}” />
</form>
<ul>
{{ _chat_messages.each do |msg| }}
<ul>
<button e-click=”msg.destroy”>X</button>
{{ msg._text }}
</ul>
{{ end }}
</ul>

Full HTTP Endpoint Support

Volt is not only for real-time framework. It also provides workflows for traditional HTTP application development. Checkout an example from GitHub :

# Routes for HTTP endpoint
get ‘/simple_http’,
controller: ‘simple_http’, action: ‘index’

get ‘/simple_http/store’,
controller: ‘simple_http’, action: ‘show’

post ‘/simple_http/upload’,
controller: ‘simple_http’, action: ‘upload’

# Example controller

class SimpleHttpController < Volt::HttpController
def index
render text: ‘this is just some text’
end

def show
render text: “You had me at ”
“#{store._simple_http_tests.first._name}”
end

def upload
uploaded = params[:file][:tempfile]
File.open(‘tmp/uploaded_file’, ‘wb’) do |f|
f.write(uploaded.read)
end
render text: ‘Thanks for uploading’
end
end

Source: Datamelon