Во-первых, давайте установим гем opal-rails:

$ gem install opal-rails

Этот гем позволяет нам генерировать новое приложение Rails с поддержкой Opal (обратите внимание на опцию — javascript=opal):

$ rails new opal-on-rails --javascript=opal

Когда пакет готов, мы готовы начать. Давайте создадим контроллер для управления цветами:

$ cd opal-on-rails
$ rails g controller Colors

Затем добавьте его в config/routes.rb как корень:

Rails.application.routes.draw do
  root 'colors#index'
end

Теперь пришло время немного HTML. Создайте представление app/views/colors/index.erb:

<h1>Hello Opal</h1>
<p>This is simple Opal application</p>

Запустите сервер и откройте в браузере http://localhost:3000.

$ rails s

Первая встреча

До сих пор мы не видели ничего особенного, ничего, кроме стандартного загрузочного приложения Rails. Но взгляните, что создал генератор контроллера в app/assets/javascripts/colors_view.js.rb!

class ColorsView
  def initialize(selector = 'body.controller-colors', parent = Element)
    @element = parent.find(selector)
    setup
  end
  attr_reader :element
def setup
    # Put here the setup for the view behavior
    say_hello_when_a_link_is_clicked
  end
def say_hello_when_a_link_is_clicked
    all_links.on :click do |event|
      # Use prevent_default to stop default behavior (as you would do in jQuery)
      # event.prevent_default
puts "Hello! (You just clicked on a link: #{event.current_target.text})"
    end
  end
private
def all_links
    @all_links ||= element.find('a')
  end
end

Это хороший кусок чистого кода Ruby, который регистрирует все клики по ссылкам в консоли браузера. Ага, настоящий скрипт Ruby, который работает в браузере!

Чтобы увидеть, что Opal сгенерирует из этого кода Ruby, ознакомьтесь с онлайн-компилятором Opal-JS Попробуйте Opal.

Чтобы скрипт заработал, нам нужно отредактировать наш шаблон. Откройте app/views/layouts/application.html.erb, найдите тег body и отредактируйте его:

<body class="controller-<%= controller_name %>">

Мы также хотим инициализировать ColorsView при загрузке документа. Помните jQuery? rails-opal поддерживает это. В конце файла просто добавьте:

Document.ready? do
  ColorsView.new
end

Выглядит знакомо, правда?

Последнее, что нужно сделать, это добавить несколько ссылок в наш шаблон, и мы готовы протестировать скрипт. Изменить app/views/colors/index.erb:

<a href="#">Click me!</a>

Это работает? Конечно, это так. Это Ruby :) После перехода по ссылке мы увидим, что наша консоль JavaScript заполнена Hello! (You just clicked on a link: Click me!) сообщениями. Идеально.

Копать глубже

Хочу больше? Давайте создадим более причудливую клиентскую часть Ruby: добавим ссылки, которые будут менять цвет заголовка при нажатии.

Добавьте раздел ссылок в шаблон:

<section>
  <h3>Change header color to:</h3>
  <ul>
    <li><a href="#" data-color="red">red</a></li>
    <li><a href="#" data-color="green">green</a></li>
    <li><a href="#" data-color="blue">blue</a></li>
  </ul>
</section>

Создайте еще один метод в ColorsView:

def change_header_color_when_a_link_is_clicked
    all_links.on :click do |event|
      event.prevent_default
      Element['h1'].css 'color', event.current_target.data('color')
    end
  end

Изменить метод настройки:

def setup
    # Put here the setup for the view behavior
    # say_hello_when_a_link_is_clicked
    change_header_color_when_a_link_is_clicked
  end

И мы закончили. Обновите браузер и получайте удовольствие, играя с вашим изоморфным приложением Ruby :)

Любой цвет, который вам нравится, если это рубин

Opal — это полнофункциональная реализация Ruby, включающая в себя как corelib, так и stdlib. У вас есть ваши любимые блоки, итераторы, даже method_missing здесь! Чем больше я его использую, тем больше он мне нравится. Это как снова открыть для себя Ruby!

Сам проект продвигается довольно быстро. Кодовая база тестируется на RubySpec, чтобы сделать Opal максимально совместимым с MRI. Есть еще некоторые ошибки и глюки, но все же попробовать стоит. Версия 0.8 не за горами, с работающими исходными картами и множеством исправлений ошибок.

Как насчет поддержки нативных библиотек JavaScript? Ну, это не так просто, как с CoffeeScript. Вы должны написать оболочку или включить чистый код JavaScript в обратные кавычки (так же, как executing shell commands в Ruby), хотя самый популярный код jQuery работает из коробки.

Как вам идея написания клиентской части Ruby? Как вы думаете, может ли Opal заменить CoffeeScript? Должен ли?