Загрузка...

Ruby & Rails: веб-разработка с удовольствием

Ruby on Rails — фреймворк для создания веб-приложений. Является открытым программным обеспечением (лицензия MIT). Здесь мы обсуждаем новости RoR, делимся учебными материалами и интересными находками С RoR даже сложные веб-приложения могут быть написаны за считанные дни. Это действительно разработка с удовольствием!
     

От ERb к Haml

05.05.09, 19:11
Автор Иван

От ERb к Haml

Всем хорошо известно, что родным способом генерации всевозможных HTML страничек в рельсах является использование Ruby Templating, ERb. Честно признаюсь, до недавнего времени считал его единственным и вполне приемлемым. Но все изменилось, когда я познакомился с Haml. В данной статье я собираюсь рассказать об этом знакомстве.

Идея ERb достаточно проста – вы пишите HTML-код, попутно включая в него Ruby-вставки, которые в последствии будут заменены на результат вычисления выражения во вставке. Рассмотрим небольшой пример. Пусть у нас есть модель статей (Article). Код для вывода списка статей традиционно содержится в файле index.html.erb. Файл может выглядеть следующим образом:

Copy Source | Copy HTML
  1. < %- @articles.each do |article| -%>
  2.   < div class="article">
  3.     < div class="date">< %= l article.created_at.to_date -%>< /div>
  4.     < h2>< %= link_to h(article.title), article_path(article) -%>< /h2>
  5.     < div class="summary">< %= h article.summary -%>< /div>
  6.   < /div>
  7. < %- end -%>

Если у вас какой-нибудь более-менее продвинутый дизайн, например, если вы задумали выводить красивую рамочку с закругленными краями при наведении на статью, то код может раздуться еще сильнее – могут появиться пустые DIV'ы для вывода каждой стороны этой самой рамочки (естественно, что к этому всему еще должен подключаться соответствующий CSS). В итоге код будет захламлен бесконечными открывающимися и закрывающимися HTML-тегами. Да и чем больше текста, тем сложнее его обрабатывать различным процессорам, вроде того же ERb. Еще один момент, который мне не очень нравится, – это то, что без ужаса на код конечной HTML-страницы смотреть невозможно. Когда какой-нибудь шаблон содержит другие, например, перебирает какую-нибудь коллекцию объектов и отображает соответствующий partial для каждого ее элемента (render :partial => 'article', :collection => @articles), а потом это все еще и в лэйаут заворачивается, то в итоге код странички превращается в полную кашу – пустые строки, разные уровни выравнивания, скачущие теги, лишние пробелы. Некоторых проблем можно избежать, но для этого разработчику нужно тщательно следить за расстановкой минусов в Ruby-вставках (< %- @articles.each do | article| -%>, < %= h article.summary -%>), что тоже не доставляет большого удовольствия.

Ладно, хватит о грустном, пора переходить в более лаконичному и красивому способу построения шаблонов – Haml. Постоянно натыкался на это поначалу непонятное слово в сети, много чего слышал о нем хорошего, но как-то все не доходило до дела. И вот совсем недавно в связи с наличием свободного времени все же решил с ним познакомиться поближе. Все, что необходимо сделать, чтобы втянуться в этот замечательный язык построения шаблонов, – это пройти пятиминутный обучающий курс на сайте.

Давайте попробуем перевести приведенный выше файл index.html.erb в Haml. Для этого переименуем его расширение в haml, получим index.html.haml. Немножко отвлекусь и скажу для яблочных ребят и любителей TextMate, что для комфортной работой с Haml-файлами необходимо установить соответствующий пакет:

Copy Source | Copy HTML
  1. cd ~/"Library/Application Support/TextMate/Bundles/"
  2. svn co "http://macromates.com/svn/Bundles/trunk/Bundles/Ruby&nbsp;Haml.tmbundle"

В VIM'е у меня соответствующий синтаксический файл уже был, так что с ним проблем не было. Идем дальше, теперь давайте установим gem:

Copy Source | Copy HTML
  1. $ sudo gem install --no-ri haml

Ну и наконец Haml-ализуем наше рельсовое приложение:

Copy Source | Copy HTML
  1. $ haml --rails /path/to/our/rails/application

Ничего страшного данная команда не делает, а просто устанавливает маленький плагин в папку vendor/plugins. Итак, дело сделано. Теперь все шаблоны с расширением haml будут обрабатываться процессором Haml. Стоп. Но ведь пока наш единственный Haml-шаблон содержит код для ERb, давайте это исправим:

Copy Source | Copy HTML
  1. - @articles.each do |article|
  2.   %div{:class => "article"}
  3.     %div{:class => "date"}= l article.created_at.to_date
  4.     %h2= link_to h(article.title), article_path(article)
  5.     %div{:class => "summary"}= h article.summary

Согласитесь, уже сейчас код выглядит намного симпатичнее. Это особо ощутимо на больших шаблонах вроде того же лэйаута. Чуть ниже мы перепишем его в еще более короткой форме, а пока расскажу о том, что же мы сделали (для полного овладения всеми фишками Haml настоятельно советую прочитать небольшую и такую же лаконичную, как и сам Haml, документацию на сайте проекта). Первая строчка начинается со знака минус. Как вы наверное уже догадались, данная строчка аналогична < % %>, она не генерирует никакого HTML, а служит для выполнения различного рода вспомогательного Ruby-кода, в данном случае для организации цикла.

Хочу заметить, что для Haml очень важны уровни выравнивания кода, именно по ним Haml-процессор определяет, где заканчивается соответствующие выражение или HTML-тег. Благодаря этой замечательной особенности Haml в коде пропадают закрывающиеся конструкции вроде ключевого слова end.

Все последующие строки нашего шаблона начинаются со знака процента, который предназначен для генерации тегов. Имя тега может быть абсолютно любым. После имени в фигурных скобкам может идти определение атрибутов тега в нотации схожей с Ruby-хешами. Ну и завершает все это дело знак равенства, сигнализирующий о начале Ruby-кода. Есть еще множество других вариантов вместо знака равенства, например, если добавить еще один знак равенства, после этого весь оставшийся хвост будет восприниматься как Ruby-строка в двойных кавычках, которые теперь писать уже не надо.

Перейдем к обещанному сокращению кода. Поскольку такие атрибуты тега как class и id используются достаточно часто, Haml позволяет задавать их следующим образом (очень похоже на задание классов и идентификаторов CSS):

Copy Source | Copy HTML
  1. - @articles.each do |article|
  2.   %div.article
  3.     %div.date= l article.created_at.to_date
  4.     %h2= link_to h(article.title), article_path(article)
  5.     %div.summary= h article.summary

Аналогично будет с атрибутом id, только вместо точки будет решетка. Если необходимо указать несколько классов у одного тега, то их смело можно перечислять через точку, как это мы обычно делаем в CSS. Но и это еще не все! Не побоюсь заявить, что тег DIV является самым распространенным средством верстки современных сайтов, поэтому он встречается довольно часто. В связи с этим Haml позволяет его опускать. Вот, что из этого может выйти:

Copy Source | Copy HTML
  1. - @articles.each do |article|
  2.   .article
  3.     .date= l article.created_at.to_date
  4.     %h2= link_to h(article.title), article_path(article)
  5.     .summary= h article.summary

Предлагаю прокрутить страничку выше и сравнить с тем, с чего мы начали. Не знаю как у вас, но у меня после такого знакомства сразу же появилось желание отучить один из небольших проектов нашей компании от ERb и подсадить его на Haml, что я успешно и сделал, при этом получил массу эстетического удовольствия от сокращения кода и приведения его к лаконичному и красивому виду. Планирую все последующие проекты разрабатывать с использованием этого замечательного языка.

Ну и напоследок хочется сказать, что и для построения CSS есть такая штука как Sass, причем она уже у вас установлена, так как идет в комплекте с Haml, синтаксис очень схож. Теперь можно поместить шаблоны с расширением sass в директорию public/stylesheets/sass, после чего соответствующие CSS-файлы будут созданы и положены в папку на уровень выше, где им и место. Честно говоря, с Sass я поиграться не пробовал, так что за примерами сразу отсылаю вас к соответствующей документации.

ключевые слова

Комментарии

Постоянно думал о том, чтобы превращать erb файлы в haml, но до сих пор сдерживал себя. Сейчас прямо не знаю. После этой статьи не смогу уже сдерживаться :)

да, выглядит это дело очень заманчиво…

Sass меня в своё время даже больше впечатлил чем собственно Haml – из-за наличия вложенных правил CSS можно существенно сократить. Могу лишь отметить, что поддержка со стороны редактора/IDE тут достаточно важна – иначе пользоваться неудобно. Когда-то это стало решающим фактором :). Ну и были проблемы со скоростью, которые к настоящему моменту исправлены.

Молодец, Иван! Всё никак не мог себя уговорить познакомиться с этим Haml’ом, теперь точно познакомлюсь:)

Как установить haml ?
Я так понял, что он онлайн устанавливается, а если нету интернета, то как его установить? Я скачал этот архив (haml-2.2.16.zip), теперь куда его распаковать? Подскажите, пожалуйста новичку (судя по нику).
Заранее благодарен.

можно установить gem без доступа в сеть. распаковываешь архив, в нем должен быть файл с расширением gem, в консоли выполни команду gem install /path/to/extracted/file.gem, соответственно подставляя путь к распакованному файлу, вроде должно помочь =)

Спасибо большое за ответ, но, я не нашёл файла с расширением gem, вот сделал скрин содержимого всех файлов архива: (webfile.ru/4244960)

попробуй распаковать содержимое в vendor/gems/haml, и пропиши в config/environment.rb зависимость config.gem ‘haml’

и папок “vendor” и “config” у меня нет (см. скрин).http://webfile.ru/4245894

имеется ввиду, что джемы можно ставить не только в систему, но и прямо в приложение, как плагины. у тебя в приложении есть папка vendor, в ней можно создать gems и положить туда джем.
не знаю, что ты там скачал, но с таким же успехом можно слить *.gem файл (например отсюда http://rubyforge.org/frs/?group_id=2760) и выполнить gem install /path/to/file.gem

HAML и SASS просто прекрасны… Кстати, html2haml вполне вменяем, даже с <% … %> конструкциями. Есть баги, но руками реально почти ничего делать не надо.

Интересная вещь, вот бы у нас проекты писались на рельсах…
Спасибо за статью

Спасибо! С HAML’ом кое-как разобрался, работает!
Ну, а как же с SASS’ом ? Не пойму как его задействовать и использовать в проекте? Догадываюсь, что по логике надо бы расширение файла поменять на .sass, но, вот, где этот стилевой файл (*.css) будет находиться, как генерируется и связывается с проектом?
Подскажите, пожалуйста.

public/stylesheets/sass/application.sass, в результате будет генерироваться public/stylesheets/application.css

Спасибо! Заработало! Он формирует css файл без ошибок здесь: public/stylesheets/, но, как мне его подключить? На сгенерированной html-странице нет стилевых изменений, которые указаны в файле css, т. е. файл сгенерированный sass’ом не подключился. Как его подключить?

абсолютно аналогично как и любой другой css файл, например через stylesheet_link_tag

1) А имеет смысл сразу осваивать HAML если только начинаешь изучать рельсы и свои новичковые проекты писать на нем или все же побольше поработать с CSS/eRB в контексте рельс?

2) Насколько трудоемко переписывать готовый проект среднего размера (напр: новости, гостевуха, паста, авторизации) к HAML?

3) Я правильно понимаю, что проблем с jQuery не предвидится при использовании HAML?

Войдите, чтобы оставить комментарий