{"id":7879,"date":"2016-04-28T11:36:36","date_gmt":"2016-04-28T11:36:36","guid":{"rendered":"https:\/\/dev.railscarma.com\/volt-new-framework-ruby\/"},"modified":"2021-06-06T12:32:22","modified_gmt":"2021-06-06T12:32:22","slug":"volt-new-framework-ruby","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/volt-new-framework-ruby\/","title":{"rendered":"Volt \u2013 Ruby \u306e\u65b0\u3057\u3044\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tVolt – 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.\n\nThe Basic Setup for Volt Framework<\/strong>\n\nLet us install Volt and create an empty app. Make sure that you have ruby (>2.1.0) and ruby gems installed.\n\nInstall Volt Gem :<\/strong>\n
gem install volt<\/blockquote>\nWe can create a new project using the volt gem:\n
volt new sample_project<\/blockquote>\nFire up the web server:\n
bundle exec volt server<\/blockquote>\nWe can access the Volt console with:\n
bundle exec volt console<\/blockquote>\nThe Opal Compiler<\/strong>\n\nVolt 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.\n\nCalling a JavaScript alert with Ruby<\/strong>\n
# Calling JavaScript functions in Ruby\nmodule Main\nclass MainController < Volt::ModelController\n# Called from front end when “todos” route loads.\ndef todos\nalert ‘totes amaze’\nend\nend\nend<\/blockquote>\nEasy Syncing via Reactive Models<\/strong>\n\nConcentrate 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 \u201cstores\u201d 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.\n\nLet’s check how to create real-time chat app of Ruby and HTML:<\/strong>\n
# Create a persistent data model. This gets stored in MongoDB.\nclass ChatMessage < Volt::Model\nend<\/blockquote>\nView Code:<\/strong>\n
<:Body>\n<form e-submit=”say”>\n<input class=”form-control”\ntype=”text”\nvalue=”{{ page._input }}” \/>\n<\/form>\n<ul>\n{{ _chat_messages.each do |msg| }}\n<ul>\n<button e-click=”msg.destroy”>X<\/button>\n{{ msg._text }}\n<\/ul>\n{{ end }}\n<\/ul><\/blockquote>\nFull HTTP Endpoint Support<\/strong>\n\nVolt is not only for real-time framework. It also provides workflows for traditional HTTP application development. Checkout an example from GitHub :\n
# Routes for HTTP endpoint\nget ‘\/simple_http’,\ncontroller: ‘simple_http’, action: ‘index’\n\nget ‘\/simple_http\/store’,\ncontroller: ‘simple_http’, action: ‘show’\n\npost ‘\/simple_http\/upload’,\ncontroller: ‘simple_http’, action: ‘upload’\n\n# Example controller\n\nclass SimpleHttpController < Volt::HttpController\ndef index\nrender text: ‘this is just some text’\nend\n\ndef show\nrender text: “You had me at ”\n“#{store._simple_http_tests.first._name}”\nend\n\ndef upload\nuploaded = params[:file][:tempfile]\nFile.open(‘tmp\/uploaded_file’, ‘wb’) do |f|\nf.write(uploaded.read)\nend\nrender text: ‘Thanks for uploading’\nend\nend<\/blockquote>\nSource: Datamelon\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\u6700\u65b0\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3092\u8cfc\u8aad\u3059\u308b<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\t\t\t\t\t