Let's try Opal. I don't want to setup a Rails application. Just static html with javascript written in Opal, stylesheets in SASS, and HTML in Slim. Also we want to use JQuery like methods to select DOM elements. We use sprockets, an assets pipeline from rails, and rails-assets to manage javascript libraries.

Let's set this thing up!

$ mkdir opal-playground $ cd opal-playground $ bundle init

Bundler initialized, lets add some gems, edit Gemfile :

source "https://rubygems.org" source 'https://rails-assets.org' do gem 'rails-assets-jquery' end gem 'opal' gem 'opal-jquery' gem 'slim' gem 'sass'

and install gems

$ bundle

We need to create four folders:

app - for opal files (compiled to javascript)

views - for slim templates

styles - for sass stylesheets

Sprockets uses rack to serve compiled assets, lets make a config.ru for that:

require 'bundler' Bundler.require sprockets = Sprockets::Environment.new.tap do |s| # register slim s.register_engine '.slim', Slim::Template # register opal s.register_engine '.rb', Opal::Processor # add folders s.append_path 'app' s.append_path 'views' s.append_path 'styles' # add paths from opal Opal.paths.each do |p| s.append_path p end # add paths from rails-assets RailsAssets.load_paths.each do |p| s.append_path p end end Opal::Processor.source_map_enabled = false map '/' do run sprockets end

Let start with views/index.html.slim file:

doctype html html head title Hello link href='style.css' rel='stylesheet' type='text/css' script src='app.js' body h2#element button#button ClickMe

Simple, include style.css stylesheet, and app.js for javascriptis. Create a styleshet styles/style.css.sass :

body h2 color: red

Finally we can create ruby (opal) file app/app.js.rb :

# use sprockets directive to include jquery #= require 'jquery' require 'opal' require 'opal-jquery' Document.ready? do # checkout browser console puts "Message from opal" # add some text to h2 Element.find('#element').text = "Setting header with Opal" # onclick event Element.find('#button').on :click do Element.find('#element').text = "Button Clicked!" end end

We're done, is this working ?

$ rackup

And open http://localhost:9292/index.html! Happy?

You're lazy ? Check out github repository or simply: