• Like
Erb vs haml vs slim
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Erb vs haml vs slim

  • 4,378 views
Published

Erb vs haml vs slim

Erb vs haml vs slim

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,378
On SlideShare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
5
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ERB vs HAML vs SLIM Так ли хорош старый добрый ERB(HTML), если есть что-то получше?
  • 2. ERB vs HAML или SLIM
  • 3. А если серьезно…Преимущества HAML и SLIM перед ERB• Более читабельный код представлений.• Теги автоматически закрываются, нельзя пропустить закрывающий тег.• Вывод ошибок.Недостатки HAML и SLIM перед ERB• Один тег на строку. Большая длина строк при большой вложенности элементов.• Ниже производительность.• Дополнительные зависимости.
  • 4. Пример SLIMdoctype htmlhtml 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
  • 5. Пример 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
  • 6. Великий и ужасный 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"> <div class="center"> <%= yield %> </div> </section> <footer> &copy; RubyDev 2012-2013 </footer> </body></html>
  • 7. Заметили ошибку?<header> <div class="center"> <h1>Development with Rails</h1> <h5>and other technologies</h5> <%= render partial: "devise/devise_links" %> ??? <%= render partial: "layouts/navigation" %></header>
  • 8. Синтаксический сахар. Такой сладкий- сладкий.#articles<div id="articles"></div>.article<div class="article"></div>P (Slim)<p></p>%P (HAML)<p></p>
  • 9. Интерполяция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)
  • 10. … и много других улучшенийсинтаксиса в сравнении с ERB (HTML)
  • 11. Haml, Slim = быстрая разработка
  • 12. HAML vs SLIMПреимущества HAML• Более распространен.• Теги четко выделены.• Лучше документация.• Есть возможность создавать собственные фильтры.Преимущества SLIM• Больше фильтров благодаря Tilt.• Больше производительность.• Позволяет писать несколько тегов в одну строку (лучше не злоупотреблять)
  • 13. Мнения разработчиковМое мнение:Я использовал и Haml и Slim. Первым был Haml, затем Slim. Разница невелика. Haml/Slim позволяют мне писать более чистый код, код, которыйлегче читать и поддерживать, код, который просто из-за того, что лишнеевыброшено быстрее писать. В HTML легко можно допустить ошибку,Haml/Slim не дают разработчику ошибаться, 100% тегов будут закрыты!
  • 14. Мнения разработчиковПо поводу альтернатив HTML/CSS могу сказать следующее:В своей работе я использую Haml и SCSS и они меня вполне устраивают.Работать с шаблонизаторами альтернативными ERB – Haml или Slim оченьудобно. Работа с ними становится гораздо приятнее. Помню как в первыйсвой раз, используя Haml, я верстал и наслаждался процессом, не чувствовалусталости от разработки. С Haml и SCSS работа как отдых.-- Евгений Жлобо, front-end разработчик, фрилансер
  • 15. Мнения разработчиковERB меня совсем огорчает, а вот HAML радует. Для себя я выделяюнесколько причин, почему HAML лучший выбор:• Закрывать теги давно уже не модно,• структура хамл исключает ошибки вложенности html тегов,• скорость разработки,• гибкость оформления кода и параметров,• легкость парсинга мозгом тегов и текстовой информации (в отличие от Slim, где теги и текст очень тяжело отличить друг от друга)-- Илья Зыкин – фронтэнд разработчик из kupibilet.ru
  • 16. Мнения разработчиковВсе новые проекты Hashrocket мы разрабатываем используя HAML и мысобираемся перенести все существующие в нашем портфолио проекты наHAML как можно быстрее. Разметка кода основанная на отступах работаетпросто замечательно для генерации чистого и семантичного кода в такойспособ, когда вы можете ясно видеть разметку и ее связь с CSS кодом. Этоочень круто!-- Оби Фернандез (http://blog.obiefernandez.com/content/2008/01/are-you-using-h.html)
  • 17. Хорошо, но как перевести существующий код на Haml/Slim? Это ведь очень долго! Нет, не долго! https://github.com/dhl/erb2haml, https://github.com/fredwu/haml2slim, etc.
  • 18. ВыводИспользуйте Haml/Slim
  • 19. Все еще хочется поспорить? ERB HAML/SLIM