Volt – 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