Opal

Ruby 💛 JavaScript

Opal is a Ruby to JavaScript source-to-source compiler.
It comes packed with the Ruby corelib you know and love.
It is both fast as a runtime and small in its footprint.

Rack tutorial Rails tutorial CLI tutorial Awesome Opal

Praise

Opal is truly amazing and it has taken me in a whole new direction.

— @mistergibson from Gitter, on Jan 22 2018

[about Opal 1.7] Fantastic! No failing specs for [isomorfeus](https://github.com/isomorfeus/isomorfeus-project#readme), asset size reduced, performance a tiny bit improved too :+1:

— @janbiedermann, on Dec 25th 2022

These guys are great. We have a large production app (www.catprint.com) that thanks to opal is 100% RUBY. The UI part is about 17K of opal code, using the hyperstack (www.hyperstack.org) framework.
In practice Opal == MRI Ruby, very reliable and solid.

— @catmando from Gitter, on Dec 1 2018

Overview

Try this code

class User
 attr_accessor :name
 def initialize(name)
 @name = name
 end
 def admin?
 @name == 'Admin'
 end
end
user = User.new('Bob')
# the output will go to your browser's console
puts user
puts user.admin?

Getting Started: Rack

Add opal, rack and rackup to your Gemfile.

bundle add opal rack rackup

Setup the Opal rack-app in your config.ru as follows:

require 'opal'
run(Opal::SimpleServer.new do |s|
 # the name of the ruby file to load. To use more files they must be required from here (see app)
 s.main = 'application'
 # the directory where the code is (add to opal load path )
 s.append_path 'app'
end)

Add a file named application.js.rb to app/ with your hello world:

require 'opal'
require 'native'
$$.alert 'Hello World from Opal!'

Then start the server with bundle exec rackup and visit http://localhost:9292.

Learn more about Opal Sprockets

Getting Started: Rails

Add opal-rails to your Rails app's Gemfile:

bundle add opal-rails

Rename app/assets/javascripts/application.js to app/assets/javascripts/application.js.rb and replace its contents with this code:

require 'opal'
require 'opal_ujs'
require 'turbolinks'
require_tree '.'

Create a "Hello World" controller:

bin/rails generate controller HelloWorld index

Replace the contents of app/assets/javascripts/hello_world.js.rb with:

Document.ready? do
 Element.find('body').html = '<h1>Hello World from Opal!</h1>'
end

Start the server with bin/rails server and visit: http://localhost:3000/hello_world/index.

Learn more about Opal Rails

Getting Started: Command Line Interface (CLI)

Install opal from Rubygems:

gem install opal

Write this code to hello_world.js.rb:

require 'ostruct'
greeting = OpenStruct.new(type: :Hello, target: :World, source: :Opal)
puts "#{greeting.type}#{greeting.target} from #{greeting.source}!"

Run it with Node.js (assuming it's installed):

opal hello_world.js.rb
# => Hello World from Opal!

Compile it to a JavaScript file:

opal -c hello_world.js.rb > hello_world.js
node hello_world.js
# => Hello World from Opal!

For a full list of supported options see:

opal --help

Learn more about the CLI

Resources

Opal is hosted on GitHub .

You can join the community by chatting on Slack.

Ask questions on stackoverflow by using the #opalrb tag.

Discuss on the mailing list or on Twitter @opalrb.