1. Assets Pipeline,
или как я перестал боятся Rails 3.1 и
полюбил клиентскую оптимизацию
Андрей Ситник
ai@evilmartians.com
evilmartians.com

2. Языки в Групоне
CoffeeScript 303 КБ
Sass 619 КБ
Ruby 931 КБ
Haml 1021 КБ

3. Хороший front-end
Sass
.icon {
background: inline-image("icons/add.png");
@include border-radius(3px);
}
↓
.icon {
background: url('data:image/png;base64,iVBORw0KGgo…');
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

4. Хороший front-end
Объединить, сжать и закешировать
<script src="core.js"></script>
<script src="flash.js"></script>
<script src="home.js"></script>
↓
<script src="app.js?1314096925"></script>

5. Сейчас — Rails 2.x…3.0
Barista Jammit
app/coffeescripts/core.coffee config/assets.yml
javascripts:
↓ app:
public/javascripts/core.js - public/javascripts/core.js
- public/javascripts/flash.js
- public/javascripts/home.js
app/layouts/application.haml
= include_javascripts :app

6. Проблемы
― Не учитываются зависимости
― Интеграция — сообщения об ошибках
― Сложно расширить функционал
― Cache buster file?timestamp иногда не работает
― Сторонние JS-библиотеки в репозитории
― Плагин не может подключить свои JS или CSS
― JS- и CSS-файлы не в app/

7. Assets Pipeline
Зависимости
В каждом файле указывается от каких
файлов он зависит:
CoffeeScript:
#= require 'user'
SCSS
@import 'user';

8. Assets Pipeline
Сообщения об ошибках

9. Assets Pipeline
Фильтры
app/assets/javascripts/application.js.erb.coffee
Сначала откомпилить CoffeeScript в JS, а потом ERB
Можно добавить свои фильтры:
Rails.application.assets.register_postprocessor(
'application/javascript', Sprockets::SafetyColons)

10. Assets Pipeline
Cache buster
application-25b93845b866436a84154200dd8d05e0.js
↑
хеш от содержимого
вместо времени изменения

11. Assets Pipeline
Сторонние JS и CSS файлы
JS и CSS ищется в
app/assets/ файлы проекта
lib/assets/ свои библиотеки
vendor/assets/ сторонние библиотеки
А так же во всех gem’ах с Rails Engine

12. Как работает Assets Pipeline
Шаг 1. Генерация
Собираем логику всех страниц в этом файле
app/assets/javascripts/application.js.coffee
Логика страницы пользователей:
app/assets/javascripts/user.js.coffee
Собираем стили всех страниц в этом файле
app/assets/stylesheets/application.css.scss
Стили страницы пользователей:
app/assets/stylesheets/user.css.scss

13. Как работает Assets Pipeline
Шаг 2. Подключаем
app/views/layout/application.html.haml
= stylesheet_link_tag :application
= javascript_include_tag :application

14. Как работает Assets Pipeline
Шаг 3. Объединение
app/assets/javascrips/application.js.coffee
#= require 'user'
#= require_tree 'pages'
app/assets/stylesheets/application.css.scss
@import 'user'

15. Как работает Assets Pipeline
Шаг 4. Библиотеки
Gemfile
gem "jquery-rails"
app/assets/javascripts/application.js.coffee
#= require jquery

16. Как работает Assets Pipeline
Шаг 5. Изображения
Путь к изображениям: app/assets/images
В SCSS и SASS все картинки надо указывать через
image-url() вместо url()
.icon {
background: image-url("user/icon.png"); }
В Haml использовать всегда
image_tag("user/icon.png") или
image_path("user/icon.png")

17. Как работает Assets Pipeline
Шаг 6. Фильтры
1. Preprocessor — Смотрим какие файлы от каких зависят
2. Engine — Компилируем (CoffeeScript → JS, SCSS → CSS)
3. Postprocessor — Исправляем файлы.
Например, вставляем ; в JS-файлы
4. Собираем файлы в один
5. Bundle processors — Исправляем файлы-пакеты.
Например, убираем повторы @charset в CSS-файлах
6. Compressor — Убираем лишние символы в JS и CSS.
7. Записываем файлы и сжимает в Gzip,
чтобы веб-серверу было проще

18. Как работает Assets Pipeline
Шаг 7. Отладка
В development файлы идут отдельно:
<script src='/assets/application.js?body=1'></script>
<script src='/assets/user.js?body=1'></script>
<script src='/assets/page/home.js?body=1'></script>
Чтобы выключить объединение в production,
надо добавить ?debug_assets=1 в URL и разрешить
отладку в настройках:
config.assets.allow_debugging = true

19. Как работает Assets Pipeline
Шаг 8. Выкладка
Заранее собираются только application.css и applications.js.
Остальные пакеты нужно добавить в настройках:
config.assets.precompile += %w( admin.js admin.css )
Перед деплоем нужно выполнить:
rake assets:precompile
Для Capistrano 2.8 есть готовые рецепты:
load 'deploy/assets'

20. Как работает Assets Pipeline
Шаг 9. Кеширование
Говорим браузеру кешировать файлы и
не спрашивать нас больше о них:
location ~ ^/(assets)/ {
root /path/to/public;
gzip_static on;
expires max;
add_header Cache-Control public;
}

21. Как выложить свою
JS-библиотеку
1. Стили и JS разместить в vendor/assets/
2. В lib/имя_гема.rb сделать класс,
наследующий ::Rails::Engine
3. Написать имя_гема.gemspec, собрать gem
и выложить на rubygems.org

22. Вопросы?
ai@evilmartians.com
evilmartians.com