Erb vs haml vs slim

ERB vs HAML vs SLIM

Так ли хорош старый добрый ERB
(HTML), если есть что-то получше?

А если серьезно…
Преимущества HAML и SLIM перед ERB

• Более читабельный код представлений.
• Теги автоматически закрываются, нельзя пропустить закрывающий тег.
• Вывод ошибок.

Недостатки HAML и SLIM перед ERB

• Один тег на строку. Большая длина строк при большой вложенности
элементов.
• Ниже производительность.
• Дополнительные зависимости.

Пример SLIM

doctype html
html
head
title Rubydev
= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"
= csrf_meta_tags

body
header
.center
h1 Development with Rails
h5 and other technologies
= render partial: "devise/devise_links"
= render partial: "layouts/navigation"
section{width=“720px”}
.center
= yield

footer
| © RubyDev 2012-2013

Пример HAML
!!! 5
%html
%head
%title Rubydev
= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"
= csrf_meta_tags

%body
%header
.center
%h1 Development with Rails
%h5 and other technologies
= render partial: "devise/devise_links"
= render partial: "layouts/navigation"
%section(:width => “720px”)
.center
= yield

%footer
| © RubyDev 2012-2013

Великий и ужасный ERB
<!DOCTYPE html>
<html>
<head>
<title>Rubydev</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<header>
<div class="center">
<h1>Development with Rails</h1>
<h5>and other technologies</h5>
<%= render partial: "devise/devise_links" %>
<%= render partial: "layouts/navigation" %>
</header>

<section width="720px">
<%= yield %>
</div>
</section>

<footer>
© RubyDev 2012-2013
</footer>
</body>
</html>

Заметили ошибку?
<header>
<h1>Development with Rails</h1>
<h5>and other technologies</h5>
<%= render partial: "devise/devise_links" %>
???
<%= render partial: "layouts/navigation" %>
</header>

Синтаксический сахар. Такой сладкий-
сладкий.
#articles
<div id="articles">
</div>

.article
<div class="article">
</div>

P (Slim)
<p></p>

%P (HAML)
<p></p>

Интерполяция

p Hello #{@user.name}! или %p Hello #{@user.name}!
Вместо:
<p>Hello <%= @user.name %>!</p>

Фильтры

javascript:
alert(“Welcome to rubydev.ru");

markdown:
#Hello #{“@user.name"} !

… textile, ruby, coffeescript, plain, sass, scss, lesscss, RedCloth, Haml, etc.
(thanks to Tilt)

… и много других улучшений
синтаксиса в сравнении с ERB
(HTML)

Haml, Slim = быстрая разработка

HAML vs SLIM
Преимущества HAML

• Более распространен.
• Теги четко выделены.
• Лучше документация.
• Есть возможность создавать собственные фильтры.

Преимущества SLIM

• Больше фильтров благодаря Tilt.
• Больше производительность.
• Позволяет писать несколько тегов в одну строку (лучше не злоупотреблять)

Мнения разработчиков
Мое мнение:

Я использовал и Haml и Slim. Первым был Haml, затем Slim. Разница не
велика. Haml/Slim позволяют мне писать более чистый код, код, который
легче читать и поддерживать, код, который просто из-за того, что лишнее
выброшено быстрее писать. В HTML легко можно допустить ошибку,
Haml/Slim не дают разработчику ошибаться, 100% тегов будут закрыты!

По поводу альтернатив HTML/CSS могу сказать следующее:

В своей работе я использую Haml и SCSS и они меня вполне устраивают.
Работать с шаблонизаторами альтернативными ERB – Haml или Slim очень
удобно. Работа с ними становится гораздо приятнее. Помню как в первый
свой раз, используя Haml, я верстал и наслаждался процессом, не чувствовал
усталости от разработки. С Haml и SCSS работа как отдых.

-- Евгений Жлобо, front-end разработчик, фрилансер

ERB меня совсем огорчает, а вот HAML радует. Для себя я выделяю
несколько причин, почему HAML лучший выбор:

• Закрывать теги давно уже не модно,
• структура хамл исключает ошибки вложенности html тегов,
• скорость разработки,
• гибкость оформления кода и параметров,
• легкость парсинга мозгом тегов и текстовой информации (в отличие от
Slim, где теги и текст очень тяжело отличить друг от друга)

-- Илья Зыкин – фронтэнд разработчик из kupibilet.ru

Все новые проекты Hashrocket мы разрабатываем используя HAML и мы
собираемся перенести все существующие в нашем портфолио проекты на
HAML как можно быстрее. Разметка кода основанная на отступах работает
просто замечательно для генерации чистого и семантичного кода в такой
способ, когда вы можете ясно видеть разметку и ее связь с CSS кодом. Это
очень круто!

-- Оби Фернандез (http://blog.obiefernandez.com/content/2008/01/are-you-using-
h.html)

Хорошо, но как перевести существующий код
на Haml/Slim? Это ведь очень долго!

Нет, не долго!
https://github.com/dhl/erb2haml,
https://github.com/fredwu/haml2slim,
etc.

Вывод
Используйте Haml/Slim

Все еще хочется поспорить?
ERB HAML/SLIM

Erb vs haml vs slim

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Erb vs haml vs slim

Semelhante a Erb vs haml vs slim (20)

Erb vs haml vs slim