by Hubert Łępicki

Opal.rb ? Opal.js ?

  • Opal is Ruby to JavaScript compiler
  • Opal is written in Ruby
  • Opal is dialect of Ruby itself
  • Files writtein in Opal have extension .rb or .opal
  • Files written in Opal are compiled server-side
  • On the client-side pure JavaScript is executed


  • JavaScript sucks big time
  • No, seriously
  • It was written in 10 days
  • The author is homophobic (related?)
  • "JavaScript - The good parts" has ~115 pages
  • It is a fucking joke NaNNaNNaNNaNNaN
  • People do not want to deal with it anymore

Seriously it's bad

  • Google started Dart
  • Google has Java to JavaScript compiler
  • JavaScript has been generated by many frameworks just that the developers do not need to touch it
  • Coffeescript is popular
  • Over 50 other languages that compile to JavaScript were developed 

Opal + Rails

 # Gemfile
 gem 'opal-rails'

 # app/assets/javascripts/application.js
 //= require opal
 //= require opal_ujs
 //= require_tree .

 # app/asset/javascripts/my_app.js.opal
 puts "Hello, good sirs!" # check the console!

 require 'opal-jquery'

 Document.ready? do
   Element.find('h1').html = 'Manipulating DOM like a sir!'


  • In your template you include application.js
  • Request goest to Sprockets
  • Sprockets processes application.js and includes Opal-to-JavaScript DOM bindings
  • Sprockets processes my_app.js.opal and compiles it's contents to JavaScript
  • Pure JavaScript is served to the client

Browser API and Bindings

  • Opal comes with DOM API built-in, classes as Document, Element are pre-defined
  • Opal wraps standard JavaScript classes into more Ruby-esque API, i.e. Array implements Enumerable
  • opal-jquery provides simple jQuery bindings
  • It is possible to call other JavaScript in-line with something like `window.alert('foo');`

What works

  • a lot!
  • classes, inheritance, modules
  • instance/class variables, attr_accessor, super
  • method_missing
  • reflection - is_a? kind_of? etc.
  • basic Ruby interfaces are implemented (i.e. Enumerable, Hash, Array, Proc)
  • procs and lambdas
  • self and method execution context is fixed
  • blocks

In Action

class User
  attr_accessor :name

  def initialize(name)
    @name = name

  def admin?
    @name == 'Admin'

user = User.new('Bob')
m = user.method(:admin?)
puts m
puts m.call
puts m.is_a?(Array)

The Cool Stuff

  • Opal is best used with Rails
  • Support for ERB and Haml on client-side (one-way bindings only)
  • Some client-side MVC frameworks start to emerge (Vienna)
  • Some client-and-frontend side frameworks start to appear (https://github.com/voltrb/volt)
  • Bi-directional calls: Opal to JavaScript (``) and JavaScript to Opal (Opal.Foo.$new().$bar() etc.)
  • RSpec implementation in browser
  • It works!

What Is missing

  • Thread and stuff
  • File/IO
  • rubygems
  • DRB
  • Major parts of Ruby STD lib

What I THink of it

  • cool
  • useful already for small projects
  • needs better client-side MVC framework
  • would be much cooler if was compiled on client-side (like Amber Smalltalk)
  • could be compiled to asm.js instead of JavaScript

Try iT




By Hubert Łępicki


  • 1,589