29.03.2017 10:22
HedgeSky 13 2100 Источник

ERb — стандартный язык разметки в мире Ruby. Это html со вставками на Ruby. В мире Elixir ту же роль выполняет EEx. Такой же синтаксис, только вместо Ruby — Elixir. Вот как это выглядит:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок</title>
    <meta name="keywords" content="template <%= language_name %>">
    <meta name="author" content="<%= user_name %>">
  </head>
  <body>
    <h1 class="page-header"><%= page_header %></h1>
    <div id="content">
      <p><%= page_content %></p>
      Дополнительный текст.
    </div>
  </body>
</html>

То же самое можно написать в 1.5 раза короче без потери читаемости.


Встречайте: язык разметки Slim и его Elixir-аналог Slime:



Прошу прощенья за картинку вместо текста, Хабр неправильно подсвечивает Slim.


Особенности


  • Вложенность управляется отступами. Всё равно ведь форматируете код;
  • Сокращённый синтаксис для айдишников и классов;
  • Если название тега не указано, подставится div;

  • Атрибуты можно по желанию обрамлять либо не обрамлять скобками:


    meta name="author"
meta[name="author"]
meta(name="author")
meta{name="author"}

  • Поддерживается текстовыми редакторами. Вообще, без подсветки синтаксиса slim'ом было бы невозможно пользоваться: названия тегов и их содержимое сливались бы. А с подсветкой всё ок.
  • Есть интеграция с популярными фреймворками (Rails, Sinatra, Phoenix);
  • Работает быстро. Здесь бенчмарк от 2014 года. Показывается, что Slim чуть медленнее Erb (Slime работает со скоростью EEx).

Как перевести проект на Slim?


Есть онлайн-конвертер; подойдёт, если темплейтов не много. Есть гем html2slim, который сконвертирует все темплейты проекта:


$ gem install html2slim
$ erb2slim app/views

Как перевести проект на Slime?


Программистов на Elixir'е меньше, чем рубистов (кстати, как их называть, «эликсиристы»?). Slime используется и того реже. В общем, когда я, поплевавшись часик на EEx, пошёл искать реализацию Slim, обнаружил экосистему Slime в незрелом состоянии. Т.е. сам язык работал, с фениксом отлично интегрировался, но общее впечатление было как от клавиатуры с западающей клавишей.


Что ж, это opensource. Закатив рукава, я добавил поддержку Slime в Sublime Text, улучшил официальный сайт языка (slime-lang.com) и сделал утилиту eex2slime для конвертирования. Проверял её на опенсорсных исходниках hex.pm и changelog.com: из-за небольших ограничений Slime исходные шаблоны пришлось немного подготовить, но в целом конвертация происходит успешно. Эта утилита — адаптация гема html2slim, поэтому для работы нужен Ruby >= 1.9.3. Использование:


$ gem install eex2slime
$ eex2slime lib/web/templates/

Ещё сделал онлайн-конвертер. Пока что он работает только в режиме slime->eex. Полезен для проверки того, как именно отработает конкретный Slime-темплейт.


Оно того стоит?


Писать и редактировать код на Slim'е быстрее, чем на Erb. Из минусов: не все его знают; кому-то синтаксис кажется плохо читаемым. Впрочем, выучить его просто, а подсветка синтаксиса избавляет от возможных проблем с читаемостью.


Eсли команда вашего проекта небольшая и коллеги не против — попробовать Slim/Slime стоит.


P.S. Если писать горы тегов неудобно, а синтаксис Slim не нравится, можете попробовать Emmet.

Поделиться с друзьями
-->

Комментарии (13)


  1. neenik
    29.03.2017 14:08
    #10142576
    +3

    Заиспользовали немного HAML (практически, аналог описываемого вами шаблонизатора).
    Потом плевались — переписывали.

    Достоинства шаблонизаторов на базе HTML — его знают все и он читаем.

    Недостатки шаблонизатора на отступах: в идеальном мире (когда шаблон того же размера, что вы привели — десяток строк) — все замечательно читается/правится. В реальном мире — страницы большие и они плохо читаемы/дорабатываемы.


    1. develop7
      29.03.2017 15:20
      #10142836

      лично я в HAML всё время спотыкался об %


      В реальном мире — страницы большие и они плохо читаемы/дорабатываемы.

      ну, я распиливал такие страницы на partials где возможно, выходило приемлемо


      1. HedgeSky
        29.03.2017 15:30
        #10142858
        +1

        Я раньше тоже использовал HAML, и тоже недолюбивал постоянные знаки процента: неудобно было их набирать, с зажатым шифтом до пятёрки тянуться. В slim такой проблемы нет.


  1. Dreyk
    29.03.2017 15:04
    #10142788
    +1

    не перешел на слим, так как верстает у нас верстальщик, а программист потом "оживляет" html. Копировать из хрома готовую верстку и разбавлять erb гораздо проще и быстрее, чем переписывать все на slim =)


    зато слим/хамл и т.д. умеют нормально минифицировать хтмл


    1. develop7
      29.03.2017 15:12
      #10142814

      у меня верстальщик очень проникся и верстает сразу в slim :)


      1. Dreyk
        29.03.2017 15:17
        #10142830

        тут такое дело, что верстальщик чтобы много не фигачить и не копипастить использует простенькие пхп-конструкции и инклюды, поэтому я копирую готовый хтмл прям из хрома


        1. Fedcomp
          29.03.2017 15:52
          #10142898
          +2

          https://html2haml.herokuapp.com/
          https://html2slim.herokuapp.com/


          1. Dreyk
            29.03.2017 16:46
            #10143026

            ну да ну да… но это все равно неудобно, надо действительно пересаживать верстальщика, чтобы на мой вопрос "так а что это тут вот такое" мне не отвечали "это ваще че такое? где мой хтмл?" :D


        1. printercu
          29.03.2017 16:20
          #10142966
          +1

          Можете попробовать предложить ему middleman. Live-reload из коробки может его заинтересовать.


  1. tomgif
    30.03.2017 09:07
    #10144188

    Jade/pug в новой упаковке?


    1. HedgeSky
      30.03.2017 10:14
      #10144364

      Синтаксис схож, но pug нацелен на исполнение в среде node.js.
      Ну и не такая уж и новая упаковка: первая версия slim опубликована в сентябре 2010.


    1. printercu
      30.03.2017 10:55
      #10144434
      +3

      Ага. Ещё sass сделали из less, sinatra из express, rails из sails и rspec из mocha :)


      1. develop7
        30.03.2017 13:11
        #10144852

        И ни в коем случае не наоборот! :)