Введение в тонкие шаблоны

Почему Слим?

Если вы живете и дышите на земле Руби и ранее делали попытку Хамлу, вы, вероятно, уже знаете пару аргументов, которые я собираюсь привести. Тем не менее, я думаю, что это хорошая идея, потому что вы, возможно, уже решили использовать более минималистичный шаблонизатор, и я хотел бы, чтобы вы также увидели преимущества, которые предлагает Slim.

Прежде чем мы углубимся в то, почему Slim — это круто, я хочу рассказать, что такое Slim на самом деле и что он делает для вас. Документация подытоживает это довольно красиво:

«Slim — быстрый и легкий шаблонизатор с поддержкой Rails 3 и 4».

Вы также можете использовать его с Sinatra и даже с обычной стойкой. Так что, если вы немного устали от использования ERB для написания ваших шаблонов или не очень довольны тем, что может предложить Haml, то Slim — это именно то, что нужно для лая.

Что касается его синтаксиса, люди, стоящие за Slim, пытались найти ответ на следующий вопрос: «Какой минимум требуется, чтобы сделать эту работу?». Для написания минимально возможного количества кода переднего плана это, безусловно, звучит как правильный вопрос задать.

Slim предлагает идеальное решение для всех ваших проблем шаблонов? Наверное, нет, но, откровенно говоря, он может предложить лучшее! Легко ли учиться? Я так думаю, но трудно понять, что другие люди считают легким. Хотя я бы сказал, что к этому нужно привыкнуть, но это определенно не ракетостроение. Так что не нужно пугаться, если вы немного новичок в программировании. Вы хорошо проведете время с этим? Абсолютно!

Итак, почему Слим? Ответ довольно прост, я думаю. Ваша разметка должна быть максимально читаемой и красивой! Вы должны хорошо поработать с ним, и чем меньше времени вам придется потратить на изучение тонны меток, тем лучше.

Что прекрасного, спросите вы? Конечно, это не тот ответ, который я постараюсь решить, но быть минимальным в этом отношении редко бывает больно. Как насчет того, чтобы стать супер загадочным, потому что шаблонизатор пытается быть супер умным, будучи минимальным? Это справедливое беспокойство, и вы будете рады услышать, что команда Слима относится к этому очень серьезно. Они хотят удалить как можно больше из простого старого HTML и раскрыть только основные части, и все это не станет слишком загадочным. Их основная команда пытается пойти даже дальше, и они действительно обеспокоены эстетикой кода Slim. Довольно хорошая сделка, тебе не кажется?

Разве не намного приятнее, если вы можете просто взглянуть на шаблон и легко понять, что происходит? Шаблоны могут стать очень «многолюдными», даже если вы разумно используете частичные функции, и, как следствие, вы хотите уменьшить количество шума до абсолютного минимума.

Возможно, вы пробовали использовать синтаксис Sass (.sass) с отступом? Я надеюсь, что у вас есть, потому что это просто допинг! Если это так, вы, вероятно, будете иметь аналогичную оценку того, что может предложить Слим. Он также чувствителен к пробелам, что приводит к действительно сжатому и читабельному коду. Давайте возьмем этот фрагмент кода HTML / ERB и сравним его с Slim.

Давайте посмотрим на эквивалент Slim:

Первое, что люди часто узнают, это «Эй, никаких закрывающих тегов!» Круто? Конечно, вы еще не привыкли к синтаксису, поэтому поначалу он может выглядеть немного чуждо, но я уверен, что вы сможете оценить, насколько лаконично он читается. Нет левых / правых угловых скобок, и нет необходимости писать div и минималистичные селекторы, поэтому вместо этого мы можем сосредоточиться на имени, которое имеют идентификаторы и классы. Вы чувствуете себя намного менее грязным и более организованным, не так ли?

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

Почему так мало, но я все равно заставляю печатать знак % повсюду? У моего указательного пальца нет особой мотивации постоянно захватывать Shift-5. Можете ли вы настроить это поведение? Почти уверен, или, по крайней мере, я на это надеюсь! Но дизайн кажется немного испорченным в этом отношении и менее спартанским по сравнению со Slim. Я понимаю, что это также вопрос вкуса, поэтому я оставлю это на этом.

Haml

Прежде чем мы перейдем к мясистым деталям, позвольте мне немного набухнуть и подытожить то, что, по моему мнению, делает изучение Слима достойным вложением вашего времени:

• Это быстро.
• Супер читаемый.
• У этого есть умный синтаксис.
• Его эстетика минимальна.
• Это легко настраивается
• Это дружественный указательный палец.
• Это шаблон на уровне босса.
• Весело писать и выглядит допингом.
• Автоматическое экранирование HTML по умолчанию.
• Супер хорошая интеграция с Rails и Sinatra.
• Очень минимальные шаблоны, которые просты в обслуживании.
• Он обширный и позволяет писать плагины и расширения.
• Существует режим без логики, когда вы хотите выводить HTML, но у вас нет причин включать код Ruby.
• Он имеет настраиваемые ярлыки для тегов, что является довольно приятной функцией для настройки движка под ваши нужды.
• И, наконец, потому что синтаксис Слима руководствуется одним очень классным девизом: «Какой минимум необходим, чтобы это работало». Это очень трудно не любить.

Что такое шаблоны?

С точки зрения опыта программирования, если вы считаете себя более склонным к новичкам, я постараюсь дать вам краткий обзор, прежде чем мы начнем использовать Slim. Когда люди говорят о шаблонах, они в основном имеют в виду простую разметку HTML с динамическим кодом, который часто используется для управления потоком, внедрения объекта или частичного отображения шаблона (частичных). Например, когда контроллер предоставляет вам переменные экземпляра, которые могут использоваться представлением через (переменную) подстановку переменных для отображения атрибутов этого объекта. Все это происходит с помощью процессора шаблонов по вашему выбору — ERB, Haml, Slim и т. Д. — который объединяет все ваши веб-шаблоны в конечную веб-страницу. Шаблоны также могут быть использованы для создания XML и RSS-каналов, а также других форм структурированных текстовых файлов.

С помощью шаблонов вы можете определять различные «макеты», которые обрабатывают определенные части вашего веб-сайта, а также данные, которые должны систематически отображаться с наименьшим количеством повторений. С тех пор как вы начали играть с Rails, вы наверняка использовали ERB именно для таких сценариев. ERB берет части открытого текста, передает их в конечный документ и обрабатывает только код, помеченный как таковой. Я не буду вдаваться в подробности того, как работает ERB, и предположим, что у вас есть базовое понимание, прежде чем вы погрузитесь в Slim. Я бы не рекомендовал использовать Slim, если вы еще не знакомы со стандартным способом шаблонизации Rails, поскольку вам будет намного легче играть со Slim, если вы поймете, как это работает из коробки в Rails.

Ниже приведен базовый пример ERB шаблона, который отображает коллекцию миссий, связанных с объектом @agent . Непосредственно ниже он также использует метод из Ruby Gem для @missions на страницы коллекции @missions .

Это небольшой раздел шаблона, который хорошо показывает, что это не что иное, как статическая HTML-часть, которая имеет некоторые динамические инъекции из некоторого кода Ruby. Если бы мы не использовали такие шаблоны, нам пришлось бы вручную писать код для каждого нового объекта, который мы хотим видеть отображенным на странице. Не уверен насчет тебя, но я не могу представить себе больший кошмар или пустую трата времени, чем это. Шаблоны дают нам удобный инструмент для создания интеллектуального и динамического слоя представления без повторения.

Как вы можете видеть из этого примера, шаблоны позволяют нам использовать частичные шаблоны, которые мы можем отображать при необходимости. Здесь у нас где-то _mission.html.erb частичное _mission.html.erb , которое поможет нам @mission коллекцию объектов @mission , которые, в свою очередь, будут перечислены внутри нашего класса missions .

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

Как насчет ERB & Haml?

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

Начиная

Тонкий с рельсами

Не удивительно, для этого есть жемчужина.

Gemfile

Ракушка

Вот и все, у нас все готово. Поскольку вы установили этот гем, Slim будет загружаться и инициализироваться при загрузке вашего приложения. Кроме того, для вашего удобства, когда вы генерируете контроллеры с помощью rails generate controller , вы автоматически получаете файлы .slim для вашего .html.erb файлы .html.erb . Это работает так же с эшафотами, но я надеюсь, что вы не используете их на самом деле!

Чтобы продемонстрировать это поведение для людей, которые плохо знакомы с генераторами Rails, я создам контроллер для сотрудников секретной службы, который имеет все стандартные действия контроллера REST:

Ракушка

Среди прочего вы получите все .slim файлы .slim . Rails также добавляет дополнительный .html — вы можете избавиться от этого, если это вас беспокоит, конечно. Все, что имеет значение, — это то, что расширение Slim-файла уже существует и оно готово для предварительной обработки вашего Slim-кода. Ура!

Следующим шагом будет открытие макета вашего приложения и замена стандартного кода на что-нибудь Slim. Кроме того, не забудьте переименовать файл application.slim в application.slim (или application.html.slim если хотите). Мы уже немного похудели — даже имя файла немного похудело.

приложение / просмотров / макеты / application.slim

Ничего особенного, но хорошее начало — и так легко, как я думаю.

Скриншот

В качестве дополнительного примечания: если вам когда-нибудь станет интересно, какую версию установленного вами драгоценного камня, эта маленькая команда скажет вам — конечно, это удобно и для любого драгоценного камня:

Ракушка

Он говорит вам, где он хранится и какая версия этого драгоценного камня в настоящее время. Вывод выглядит так:

Тонкий С Синатрой

Для любителей Синатры среди вас я хотел бы упомянуть, как начать. Сначала нам нужно установить самоцвет, конечно.

Ракушка

И после этого вы почти закончили. В вашем приложении Sinatra вам просто нужен Slim, и вы готовы к работе.

some_sinatra_app.rb

Здесь я использовал встроенный шаблон для записи разметки Slim в том же файле и сказал Sinatra, что я хочу использовать Slim для индексного файла, когда он выполняет запрос get к корневому пути. Мне просто нужно сослаться на встроенный шаблон внутри блока фигурных скобок. То, что вы видите под @@ index что обозначает шаблон индекса, — это весь синтаксис Slim, чувствительный к пробелам.

Скриншот

Время показать вам, как написать Слима.

Синтаксис

HTML-теги

HTML <! DOCTYPE> Объявление

Давайте начнем с самого простого, объявления doctype. Как вы, наверное, знаете и уже забыли, это должно быть объявлено в верхней части вашего HTML-документа, до фактического <html> . К вашему сведению, это не HTML-тег, и он сообщает браузеру о версии HTML-страницы.

Среди различных версий для <!DOCTYPE> есть только одна для HTML5: <!DOCTYPE html> спасибо Богу!

Идентификатор ярлыка # и класс ярлыка .

Написание кода переднего конца означает массу классов и очень мало идентификаторов — я надеюсь. Чтобы не писать их снова и снова, Слим встречает вас более чем на полпути и позволяет вам в принципе замкнуть весь процесс. Позвольте мне показать вам, что я имею в виду. Возьмите следующий код Slim:

Это скомпилировано в этот HTML-вывод:

Как видите, точка предлагает Slim, чтобы вы хотели использовать класс, а имя, которое следует за ним, — это то, что вы хотите назвать. То же самое относится и к идентификаторам — вы просто используете хеш-символ (он же знак фунта), который делает свое дело. Проницательные читатели наверняка поняли, что версии без начального тега инициируют создание div с соответствующим классом или идентификатором, что можно увидеть для <div id="logo"></div> и <div class="evil-wrapper"></div> . Довольно удобно, тебе не кажется?

Вы также можете быть более выразительными в своем коде Slim, если хотите. Никто не мешает вам писать свои хорошие старые классы и идентификаторы от руки. Если вы как-то чувствуете привязанность к этому, дерзайте! Мне нравится более лаконичная версия, потому что она также позволяет мне не вводить кавычки и повторяющийся текст все время. Это зависит от вас — все, что делает вас счастливыми! Код ниже является немного более подробным, но отображает тот же HTML, что и выше:

Стройное:

Разве это не красота? Представьте себе все эти страшные HTML-теги, которые вам не нужно писать самостоятельно, а также избавьтесь от лишних угловых скобок. Конечно, ваш редактор кода может сделать большую часть этой работы для вас, но ваш редактор также читает код для вас? Точно!

Когда вы вернетесь, чтобы прочитать свой код, вам также понадобится сжатый документ, который очень легко переварить визуально. Я думаю, что этот простой пример лучше всего показывает то, что может предложить такой инструмент, как Slim. Это мелочи, которые в конечном итоге становятся отличным инструментом и экономят время. Даже если вы используете его только для этих функций и игнорируете другие более продвинутые функции, переход на Slim уже окупится.

Встроенные теги

Допустим, у вас есть несколько тегов, которые вы хотите иметь встроенными для большей компактности или чего-то еще. Таким образом, вместо перехода на новую строку, вы можете связать их, разделив эти теги двоеточием : Оба примера ниже показывают один и тот же результат.

Стройное:

HTML-вывод:

Вторая версия является более минимальной из-за встроенных тегов и будет моим предпочтением. В конце концов, компакт это хорошо, нет? Я думаю, что этот случай хорошо показывает, что Slim равномерно балансирует между компактным и загадочным. Да, это требует некоторого привыкания, и в некоторых случаях полезны дополнительные атрибутные обертки (подробнее об обёртках ниже). Назовите меня сумасшедшим, но я уверен, что вы прочитаете Slim как обычную HTML-разметку в один миг.

Текстовое содержимое

Конечно, писать текст так же легко, как и следовало ожидать. Просто добавьте его после тегов.

Стройное:

HTML-вывод:

Больше нечего добавить, это просто!

Атрибуты

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

Стройное:

HTML-вывод:

Вы можете в основном связать их в цепочку, и Slim отделит их от текстового содержимого — если оно присутствует. Если вы посмотрите внимательно, то увидите, что наш тег img имеет косую черту, которая явно закрывает теги в Slim. Для изображений или более запутанных тегов это, безусловно, полезно. Кстати, HTML5 не требует от вас писать имена атрибутов в нижнем регистре или использовать кавычки вокруг значений атрибутов. Тем не менее, W3C рекомендует стандартную практику.

Слияние атрибутов

Если у вас есть несколько селекторов, таких как классы или идентификаторы для каждого тега, вы также можете написать это более кратко, последовательно соединяя их. Эти селекторы будут автоматически разделяться пробелами.

Стройное:

HTML-вывод:

Не то чтобы смешивание всех этих идентификаторов и классов, как это представляет лучшие практики или что-то в этом роде, но легко увидеть, как Slim работает в таком замысловатом примере. Довольно круто, а? Однако будьте осторожны — распределение этих селекторов по нескольким строкам не будет работать без упаковщиков атрибутов (см. Следующий раздел).

Другой вариант — использовать массив со строками или просто символами для объединения атрибутов.

Стройное:

HTML-вывод:

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

Обертки атрибутов

Slim предлагает вам обертки, чтобы ваши атрибуты было легче читать. Это может быть необязательно все время, но полезно знать, нужно ли приручить тег с большим количеством атрибутов. Вы можете использовать любой из следующих разделителей для переноса атрибутов: {} , [] и () .

Стройное:

HTML-вывод:

Если вам проще организовать разметку, сделайте это! Как показано вторыми тегами a и h3 , вы можете даже распределять атрибуты и селекторы по нескольким строкам. Отступы, похоже, применяются очень щадяще в отношении чувствительности пробелов. Однако я предполагаю, что это ненадолго, и вам не понадобятся обертки. Вы быстро привыкнете к синтаксису barebones Slim и сохраните его для особых случаев, как, вероятно, и следует.

Для встроенных тегов обертки могут пригодиться время от времени. Как вы также можете наблюдать в приведенном ниже примере, вы можете использовать пробелы с разделителями, чтобы сделать его еще более читабельным — просто примечание.

HTML-вывод:

Интерполяция атрибутов

Кто-то сказал интерполяцию? Внутри указанных атрибутов вы можете использовать Ruby для интерполяции кода, если это необходимо. Простого примера должно быть достаточно, чтобы проиллюстрировать это поведение:

Стройное

Опять же, не то, что вы могли бы использовать ежедневно, но это хорошо, чтобы иметь в своей сумке трюки. Значения атрибута будут экранированы по умолчанию. Если вам нужно отключить это поведение, просто используйте == .

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

Это, конечно, также означает, что вы также можете использовать простые логические значения в своих атрибутах.

Groovy, давайте двигаться дальше!

Последние мысли

Я надеюсь, что теперь у вас есть хорошее представление о том, почему Slim — хороший выбор для всех ваших шаблонных потребностей на земле Ruby. Если вы по-прежнему предпочитаете использовать Haml или ERB в данный момент, вы можете со временем увеличить аппетит к Slim. Я не говорю, что это приобретенный вкус или что-то еще, просто это не то, что многие люди приобретают рано в своей карьере — возможно, потому что они еще не чувствовали боль написания всей этой избыточной разметки снова и снова. Эта статья должна предоставить вам основы, необходимые для начала работы.

Конечно, Slim может предложить больше, особенно несколько расширенных функций, на которые вы определенно хотите взглянуть. В следующей статье мы начнем с более подробного раздела о выводе кода Ruby в ваши шаблоны — и многого другого, конечно. Увидимся там!