[Awesome Ruby Gem] Use opal-rails gem to compile Ruby code to JavaScript

Posted on Edited on In , , Views: Word count in article: 3.8k Reading time ≈ 3 mins.

Opal

Opal is a Ruby to JavaScript source-to-source compiler. It also has an implementation of the Ruby corelib and stdlib.

It comes packed with the Ruby corelib you know and love. It is both fast as a runtime and small in its footprint.

Installation

You can install it as a gem:

1
$ gem install opal-rails

or add it into a Gemfile (Bundler):

1
2
3
4
5
# Gemfile

# opal/opal: Ruby ♥︎ JavaScript
# https://github.com/opal/opal
gem 'opal-rails', `2.0.1'

Then, run bundle install.

1
$ bundle install

Usage

See the website for more detailed instructions and guides for Rails, jQuery, Sinatra, rack, CDN, etc.
Opal: Ruby ♥︎ JavaScript - https://opalrb.com/.

Compiling Ruby code with the CLI (Command Line Interface)

Contents of app.rb:

1
puts 'Hello world!'

Then from the terminal

1
2
$ opal --compile app.rb > app.js # The Opal runtime is included by default
                                 # but can be skipped with the --no-opal flag

The resulting JavaScript file can be used normally from an HTML page:

1
<script src="app.js"></script>

Be sure to set the page encoding to UTF-8 inside your tag as follows:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="app.js"></script>
    …
  </head>
  <body>
    …
  </body>
</html>

Just open this page in a browser and check the JavaScript console.

Compiling Ruby code from Ruby

Opal.compile is a simple interface to just compile a string of Ruby into a string of JavaScript code.

1
Opal.compile("puts 'wow'")  # => "(function() { ... self.$puts("wow"); ... })()"

Running this by itself is not enough; you need the opal runtime/corelib.

Using Opal::Builder

Opal::Builder can be used to build the runtime/corelib into a string.

1
Opal::Builder.build('opal') #=> "(function() { ... })()"

or to build an entire app including dependencies declared with require:

1
2
3
builder = Opal::Builder.new
builder.build_str('require "opal"; puts "wow"', '(inline)')
File.write 'app.js', builder.to_s

Compiling Ruby code from HTML (or using it as you would with inline JavaScript)

opal-parser allows you to eval Ruby code directly from your HTML (and from Opal) files without needing any other building process.

So you can create a file like the one below, and start writing ruby for your web applications.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.opalrb.com/opal/current/opal.js" onload="Opal.load('opal')"></script>
    <script src="https://cdn.opalrb.com/opal/current/opal-parser.js" onload="Opal.load('opal-parser')"></script>

    <script type="text/ruby">
      puts "hi"
    </script>

  </head>
  <body>
  </body>
</html>

Just open this page and check the JavaScript console.

NOTE: Although this is possible, this is not really recommended for production and should only be used as a quick way to get your hands on opal.

Getting Started: Rails

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

1
gem 'opal-rails'

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

1
2
3
4
require 'opal'
require 'opal_ujs'
require 'turbolinks'
require_tree '.'

Create a “Hello World” controller:

1
$ bin/rails generate controller HelloWorld index

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

1
2
3
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.

References

[1] opal/opal: Ruby ♥︎ JavaScript - https://github.com/opal/opal

[2] opal-rails | RubyGems.org | your community gem host - https://rubygems.org/gems/opal-rails/

[3] Opal: Ruby ♥︎ JavaScript - https://opalrb.com/

[4] Try Opal: Browser compiler and REPL - https://opalrb.com/try/

[5] Opal: Ruby ♥︎ JavaScript - https://opalrb.com/#getting-started-rails