Впервые выпущенный в 2009 году и все еще находящийся в постоянном развитии, CoffeeScript — это альтернативный синтаксис для написания JavaScript, который быстро набирает популярность. Поскольку CoffeeScript компилируется до JavaScript (в отличие от ассемблера или другого байт-кода, такого как многие языки), он уже используется в браузерах, поддерживающих JavaScript, и на платформах, таких как node.js.
Сегодня я покажу вам, как добавить CoffeeScript в приложение Rails — в этом случае мы продолжим работу над нашим «коротким» сокращением URL из моей серии « Построение вашего первого приложения Rails » — чтобы добавить базовый JavaScript-код с использованием CoffeeScript и Barista , жемчужина для добавления бесшовной поддержки CoffeeScript в приложения на Rails.
Начиная
Чтобы начать работу с Barista, нам сначала нужно добавить необходимые гемы в наш Gemfile . Следовательно, откройте указанный файл и добавьте:
gem 'barista'
Если вы используете Ruby 1.8.7 или ниже, вам, вероятно, потребуется также добавить гем JSON в ваш Gemfile как:
gem 'json'
Наконец, вам понадобится интерпретатор JavaScript для запуска компилятора CoffeeScript. Если вы работаете в OSX, оболочка Ruby (поставляется с coffee-script ) будет использовать встроенный системный интерпретатор, но если вы работаете на другой платформе, вы захотите проверить REECME ExecJS, которая просматривает доступные опции. Один простой вариант — встроить v8 в ваше приложение, добавив в ваш Gemfile :
gem 'therubyracer', :require => nil
Затем запустите следующее, что заставит компоновщик обновить гемы, сделав их доступными для вашего приложения Rails, а затем сгенерирует конфигурацию для barista:
bundle install rails g barista:install
Открыв config/initializers/barista_config.rb , вы должны увидеть набор опций, которые позволяют вам настроить работу barista — не стесняйтесь осмотреться. Далее мы начнем использовать Barista для добавления CoffeeScript в наше приложение.
Написание некоторого кода
Для этого поста мы собираемся сделать что-то относительно простое, используя CoffeeScript. Используя jQuery, мы встроим iframe для предварительного просмотра URL-адреса под текстовой записью.
Первое, что нам нужно сделать, это удалить существующие файлы JavaScript и заменить их jQuery. Для этого мы добавим следующее в наш Gemfile :
gem 'jquery-rails'
А затем запустите:
bundle install rails g jquery:install
Если он спрашивает о конфликте, ответьте «да», чтобы существующие файлы были перезаписаны (вы используете SCM, верно?). Это скажет Rails использовать jQuery вместо Prototype для вашего приложения.
Затем откройте app/coffeescripts/shorty.coffee в текстовом редакторе (вам, возможно, придется сначала создать папку) и добавьте следующий код:
$(document).ready -> preview = $("#preview-url") $('#url_url').keyup -> current_value = $.trim @value if current_value is '' preview.hide().attr 'src', '' else preview.show().attr 'src', current_value
Этот код является нашей реализацией. Когда мы изменяем значение текстовых полей URL, он автоматически обновляет iframe . Затем откройте application/views/layouts/application.html.erb и измените:
<%= javascript_include_tag :defaults %>
к
<%= javascript_include_tag :defaults, 'shorty' %>
Это скажет Rails также включить файл коротышки JavaScript (автоматически скомпилированный из вашего файла shorty.coffee на странице).
Наконец, нам нужно добавить фактический iframe на страницу. В новом представлении URL ( app/views/urls/new.html.erb ) добавьте следующий код внизу страницы:
<iframe id='preview-url' style='width: 600px; height: 400px; display: none'></iframe>
Примечание. Для демонстрации мы установили встроенный CSS. Как правило, вы делаете это в обычной таблице стилей CSS.
Наконец, сохраните все файлы и снова запустите веб-сервер, используя rails server .
Открыв браузер, вы теперь сможете посетить http://localhost:3000/ и страница должна загрузиться, как и ожидалось. Начните вводить текст, и вы увидите, что он автоматически показывает / скрывает URL-адрес, когда он пытается загрузить его как можно скорее. Как вы можете видеть, Barista автоматически позаботилась о компиляции файла CoffeeScript в JavaScript-эквивалент для нас в фоновом режиме и будет делать это всякий раз, когда файл изменяется.
Если вы откроете и посмотрите public/javascripts/shorty.js , вы увидите, что с помощью компилятора CoffeeScript Barista автоматически преобразовал приведенный выше код во что-то похожее на:
/* DO NOT MODIFY. This file was compiled Wed, 13 Apr 2011 01:10:20 GMT from * /path/to/your/app/app/coffeescripts/shorty.coffee */ (function() { $(document).ready(function() { var preview; preview = $("#preview-url"); return $('#url_url').keyup(function() { var current_value; current_value = $.trim(this.value); if (current_value === '') { return preview.hide().attr('src', ''); } else { return preview.show().attr('src', current_value); } }); }); }).call(this);
Проблемы отладки
Если вышеупомянутое не сработало для вас, есть несколько вещей, которые нужно проверить. Посмотрите журнал приложений и найдите сообщения об ошибках, связанных с бариста. Наиболее распространенные проблемы, которые вы найдете:
- Компиляция не удалась из-за отсутствия компилятора
- Если вы развертываете в другом месте (например, Heroku), вам, возможно, придется либо встроить интерпретатор, например V8 (через gem
therubyracer), либо зафиксировать сгенерированный JavaScript в своем хранилище.
Возвращаясь к начальным шагам, проверьте ссылку ExecJS еще раз, и вы найдете альтернативные хосты JavaScript.
Продолжая
Теперь, когда вы получили базовую поддержку, я предлагаю поехать самостоятельно и немного поиграть. Как вы можете видеть, поскольку CoffeeScript скомпилирован в JavaScript, мы можем использовать все наши существующие библиотеки, такие как jQuery, с минимальными усилиями, упрощая использование jQuery и вашего собственного JavaScript для:
- Сделайте так, чтобы URL загружались только в том случае, если они «выглядят корректно» (например, текущая версия пытается просмотреть все)
- Используйте таймер / другой метод обнаружения изменений, чтобы избежать его изменения каждый раз, когда мы вводим символ
- Разверните URL-адреса, чтобы использовать что-то вроде Embed.ly для предварительного просмотра содержимого.
Чтобы узнать немного больше о CoffeScript, прочитайте превосходное интерактивное руководство на сайте CoffeeScript, чтобы понять, как он обрабатывает преобразования.
Если вы добавите дополнительные функции, прокомментируйте ниже и дайте нам знать, как вы поступили с этим / как вы нашли процесс.