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.

— @mistergibsonfrom 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.

— @catmandofrom Gitter, on Dec 1 2018

Overview

Try this code

classUserattr_accessor:namedefinitialize(name)@name=nameenddefadmin?@name=='Admin'endenduser=User.new('Bob')# the output will go to your browser's consoleputsuserputsuser.admin?

Getting Started: Rack

Addopal,rack andrackup to yourGemfile.

bundle add opal rack rackup

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

require'opal'run(Opal::SimpleServer.newdo|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 namedapplication.js.rb toapp/ with your hello world:

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

Then start the server withbundle exec rackup and visithttp://localhost:9292.

Learn more about Opal Sprockets

Getting Started: Rails

Addopal-rails to your Rails app'sGemfile:

bundle add opal-rails

Renameapp/assets/javascripts/application.js toapp/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/railsgeneratecontrollerHelloWorldindex

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

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

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

Learn more about Opal Rails

Getting Started: Command Line Interface (CLI)

Installopal from Rubygems:

geminstallopal

Write this code tohello_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.jsnode hello_world.js# => Hello World from Opal!

For a full list of supported options see:

opal--help

Learn more about the CLI

Resources

Opal ishosted on GitHub.

You can join the community by chatting onSlack.

Ask questions onstackoverflow by using the#opalrb tag.

Discuss on themailing list or onTwitter@opalrb.

Movatterモバイル変換