Во-первых, давайте установим гем 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? Должен ли?