Mustache — шаблонизатор без логики


Содержание материала:

Mustache — шаблонизатор без логики

Mustache — шаблонизатор, который содержит минимум управляющей логики и доступен для разных языков программирования. Его можно использовать и на сервере (PHP, Ruby и т.д.), и на клиенте (Javascript).

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

Отличное решения для удаленного офиса —
сервера в Европе. Защити свой бизнес!

Шаблон пишется на простом языке, состоящем из нескольких типов тегов. Теги обрамляются двумя или тремя фигурными скобками с каждой стороны. Можно использовать вложенные шаблоны.

Рассмотрим простой пример шаблона:

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

Чтобы «запустить» шаблонизатор и отрисовать с помощью шаблона данные, необходимо подключить библиотеку:

И вызывать рендеринг методом to_html :

Здесь первым параметром передается шаблон, а вторым — данные. Так же можно использовать третий параметр —список дополнительных шаблонов, и четвертый — функцию callback, которая вызывается после обработки шаблона.

Более подробно о тегах

Всего в Mustache четыре основных типа тегов: переменная, секция, комментарий и подключение дополнительного шаблона.

Переменная выводит данные с экранированием HTML-сущностей <

> и без экранирования <<>> . Отличаются они количеством скобок. В нашем случае, вместо <
> подставится строчка «Новый пост».

Секция представляет собой парный тег. Принцип ее действия зависит от типа данных, с которыми она работает. Если в контексте имени секции соответствует поле со списком, то шаблонизатор проходит по его элементам и текст внутри парного тега обрабатывается по одному разу для каждого элемента списка. Элемент списка подставляется заместо тега-точки. Так, например, секция <<#authors>>

  • <<.>><> превратится в
  • alex
  • daemon
  • john . Если список пуст, то обрабатывается содержимое «тега с крышечкой», в нашем случае — это <<^authors>> … <> .

    Если имени секции соответствует функция, то для подстановки будет использован результат ее выполнения.

    Если поле, соответствующее имени секции, не является ни списком, ни функцией, то оно будет использоваться в качестве контекста для обработки содержимого тега.

    Комментарий оформляется в виде тега с восклицательным знаком, например, <> .

    Подключение дополнительного шаблона вызывается с помощью тега с угловой скобкой. Например, <<>copyright>> . Если в текущем контексте присутствует поле с таким названием, то оно будет передано в качестве контекста для подключаемого шаблона.

    Производительность

    Вопросы производительности Javascript шаблонизаторов рассматриваются в этой статье. Автор провел тестирование восьми шаблонизаторов и выяснил, что на простых шаблонах Mustache показывается лучшую производительность.

    Пример работы

    Сайт проекта: http://mustache.github.com/. Если у читателей возникли какие-то вопросы, я с удовольствием на них отвечу.

    Автор: Александр Яшин

    Фрилансер. Программист. Разрабатывает интернет-магазины и мобильные приложения.
    Его твиттер и веб-сайт.

    Mustache — шаблонизатор без логики

    Реализовать шаблонизатор для подмножества языка шаблонов Mustache.

    Шаблон представляет собой текст, содержащий в себе специальные синтаксические конструкции, позволяющие вставлять в него значения переменных, а также включать/исключать некоторые куски в зависимости от переменных. Применяя шаблон к определённому набору значений переменных (контексту), получаем результирующий текст.

    Описание языка шаблонов

    Вставка переменных

    Пример простейшего шаблона:

    Если переменная name равна World , то, применяя шаблон, получаем:

    Таким образом, конструкция <<имяпеременной>> позволяет вставлять значения переменных. Следующий шаблон содержит ссылки на две переменных:

    Условное включение

    Условимся считать, что любая несуществующая переменная или переменная, содержащая пустую строку, имеет значение ЛОЖЬ , а переменная с любым другим значением – ИСТИНА .

    в случае, когда истинны обе переменных hi и bye , выведет две строки. Для name = Вася :

    Если переменная bye ложна, то одна строка будет пустой:

    Если обе переменных ложны, то вывод будет пустым.

    Mustache также поддерживает инверсию условия:

    Здесь условный блок, начинающийся с <<^love>> , сработает, если значение переменной love ложно.

    Комментарии

    Задание

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

    • Конструктор (куда передаётся строка-шаблон).
    • Генерация (в качестве аргумента передаётся контекст, а возвращаемым значением является строка-результат).

    Для хранения контекста можно использовать map .

    Обработка ошибок (неверный синтаксис шаблона) должна производиться с помощью исключений.

    Неподдерживаемые возможности Mustache

    HTML-эскейпинг. <<>> и <<& name>> .

    Массивы

    Будет выводить значение name для каждого элемента из массива people .

    Вложенные переменные

    Включения блоков

    Изменение символов-разделителей

    Действия

    • К списку задач
    • Другие задачи того же блока

    © Олег Дашевский со товарищи, 2010–2020. Сайт работает на платформе Coursette

    Какое преимущество шаблона без логики (например, усы)?

    В последнее время я столкнулся с mustache, который, как утверждается, является шаблоном без.

    Тем не менее, нет объяснения, почему он разработан с логической точки зрения. В другом слове, какое преимущество шаблона без логики?

    Другими словами, это мешает вам стрелять в ногу. В старые дни JSP было очень распространено, что JSP файлы были посыпаны кодом Java, что делало рефакторинг намного сложнее, так как у вас был разбросан код.

    Если вы предотвращаете логику в шаблонах по дизайну (например, усы), вам придется поместить логику в другое место, чтобы ваши шаблоны оказались незагроможденными.

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

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

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

    Например, рассмотрим следующий фрагмент шаблона, используя mustache:

    Я могу это понять, но я нахожу следующее (используя underscore), чтобы быть намного более простым и прямым:

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

    Усы не имеют логики-меньше?

    Разве это не так:

    Довольно похоже на это?

    И разве это не похоже на (чтение: почти определение) логики представления?

    Шаблон без логики — это шаблон, содержащий дыры для заполнения, а не как их заполнять. Логика помещается в другое место и отображается непосредственно в шаблон. Такое разделение проблем является идеальным, потому что тогда шаблон может быть легко построен с другой логикой или даже с другим языком программирования.

    Мы называем это «без логики», потому что там не являются утверждениями if, else else или для петель. Вместо этого есть только теги. Некоторые теги заменяются на ценность, не что иное, а другие ряд значений. Этот документ объясняет различные типы Теги усы.

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

    Отражающая сторона монеты заключается в том, что в отчаянной попытке вывести бизнес-логику из презентации вы в конечном итоге ставите много логики представления в модель. Общим примером может быть то, что вы хотите поместить «нечетные» и «четные» классы в переменные строки в таблице, что может быть сделано с помощью простого оператора modulo в шаблоне представления. Но если ваш шаблон просмотра не позволяет вам это сделать, то в данных модели вам нужно не только сохранить, какая строка является нечетной, но и точной, но в зависимости от того, насколько ограничен ваш механизм шаблонов, вам может даже понадобиться загрязнить вашу модель с именами фактических классов CSS. Представления должны быть отделены от моделей полной остановки. Но модели также должны быть View agnostic, и что многие из этих «не-логических» движков шаблонов заставляют вас забыть. Логика идет в обоих местах, но вы должны быть разумными относительно того, что логика действительно делает, чтобы правильно решить, куда она идет. Является ли это проблемой для представления или заботой о бизнесе/данных? Для того, чтобы иметь 100% первозданный вид, загрязнение просто попадает в другое менее заметное, но не менее подходящее место.

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

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

    Появляется мини-rant (не стесняйтесь игнорировать):

    Если вы не хотите продолжать чтение. Мой короткий ответ на указанную выше тему: Я не согласен с шаблонами без логики. Я думаю об этом как о программирующей форме экстремизма.:-): -)

    Теперь мое разглашение продолжается в полном разгаре:: -)

    Я думаю, что когда вы принимаете много идей до крайности, результат становится смехотворным. И иногда (т.е. эта тема) проблема заключается в том, что мы принимаем «неправильную» идею до крайности.

    Удаление всей логики из представления является «смехотворным» и неправильной идеей.

    Вернитесь на минутку.

    Вопрос, который нам нужно задать себе, — это то, почему нужно удалить логику? Концепция, очевидно, разделение проблем. Держите обработку представления как отдельную от бизнес-логики, насколько это возможно. Зачем это делать? Это позволяет нам менять вид (для разных платформ: мобильный, браузер, рабочий стол и т.д.), И это позволяет нам более легко обменивать поток управления, последовательность страниц, изменения валидации, изменения модели, доступ к безопасности и т.д. Также, когда логика удаленный из представлений (особенно веб-видов), он делает представления более читабельными и, следовательно, более удобными для обслуживания. Я понимаю это и соглашаюсь с этим.

    Однако основной упор должен делаться на разделение проблем. Не 100% без логики. Логика в представлениях должна относиться к тому, как визуализировать «модель». Насколько мне известно, логика в взглядах совершенно прекрасна. У вас может быть логика просмотра, которая не является бизнес-логикой.

    Да, еще в тот день, когда мы писали JSP, PHP или ASP-страницы с небольшим разделением логики кода и логики просмотра или без него, обслуживание этих веб-приложений было абсолютным кошмаром. Поверь мне, я знаю, я создал, а затем поддерживал некоторые из этих чудовищ. Именно на этом этапе обслуживания я действительно понял (в визуальном порядке) ошибку моих и моих коллег.:-): -)

    Итак, эдикт с высоты (отраслевые эксперты) стал, вы должны структурировать свои веб-приложения, используя что-то вроде контроллера на переднем плане (который отправляется обработчикам или действиям [выберите ваш веб-фреймворк]), и ваши взгляды должны не содержат кода. Представления должны были стать немыми шаблонами.

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

    В одном проекте, в котором я участвовал, мы пытались следовать идее без логики с нелепым экстремалом. У нас был домашний движок шаблонов, который позволил бы нам отображать объекты модели в html. Это была простая система на основе токенов. Это было ужасно по одной простой причине. Иногда в представлении мы должны были решить, должен ли я отобразить этот небольшой фрагмент HTML.. или нет.. Решение обычно основывается на некотором значении в модели. Когда у вас нет абсолютно никакой логики в представлении, как вы это делаете? Ну, ты не можешь. У меня были некоторые серьезные аргументы в пользу нашего архитектора. Внешние HTML-люди, которые пишут наши взгляды, были полностью укоренились, когда они столкнулись с этим, и были очень подчеркнуты, потому что не могли достичь своих простых целей. Поэтому я представил концепцию простой IF-инструкции в нашем шаблоне. Я не могу описать вам облегчение и спокойствие, которое последовало. Проблема была решена с помощью простой концепции IF-Statement в наших шаблонах! Вдруг наш шаблонный двигатель стал хорошим.

    Итак, как мы попали в эту глупую стрессовую ситуацию? Мы сосредоточились на неправильной цели. Мы следовали правилу, у вас не должно быть логики в ваших взглядах. Это было неправильно. Я думаю, что «правило большого пальца» должно быть, минимизируйте количество логики в ваших представлениях. Потому что, если вы этого не сделаете, вы можете непреднамеренно позволить бизнес-логике проникнуть в представление — что нарушает разделение проблем.

    Топ-пост этого месяца:  PHP 7. Часть 4. Групповые декларации use

    Я понимаю, что когда вы заявляете, что «у вас не должно быть логики в представлениях», становится легко узнать, когда вы являетесь «хорошим» программистом. (Если это ваша мера добра). Теперь попробуйте реализовать веб-приложение даже средней сложности с помощью приведенного выше правила. Это не так легко сделать.

    Для меня правило логики в представлениях не так ясно и откровенно, что я хочу, чтобы это было.

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

    Mustache — шаблонизатор для JavaScript

    Mustache — шаблонизатор, который содержит минимум управляющей логики и доступен для разных языков программирования. Его можно использовать и на сервере (PHP, Ruby и т.д.), и на клиенте (Javascript).

    Шаблон пишется на простом языке, состоящем из нескольких типов тегов. Теги обрамляются двумя или тремя фигурными скобками с каждой стороны. Можно использовать вложенные шаблоны.

    Рассмотрим простой пример шаблона:

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


    Чтобы «запустить» шаблонизатор и отрисовать с помощью шаблона данные, необходимо подключить библиотеку:

    И вызывать рендеринг методом render() :

    Здесь первым параметром передается шаблон, а вторым — данные. Так же можно использовать третий параметр — список дополнительных шаблонов, и четвертый — функцию callback , которая вызывается после обработки шаблона.

    Более подробно о тегах

    Всего в Mustache четыре основных типа тегов: переменная, секция, комментарий и подключение дополнительного шаблона.

    Переменная выводит данные с экранированием HTML-сущностей <

    > и без экранирования <<>> . Отличаются они количеством скобок. В нашем случае, вместо <
    > подставится строчка «Новый пост».

    Секция представляет собой парный тег. Принцип ее действия зависит от типа данных, с которыми она работает:

    • true/false — ведет себя как оператор if : отображает блок только в случае, когда было передано true
    • список значений — аналог цикла с подставкой значений; элемент списка подставляется вместо тега-точки
    • функция — получает два значения: текст блока и рендер-метод, и заменяет блок своим результатом

    Так, например, секция

    Если список пуст, то обрабатывается содержимое «тега с крышечкой», в нашем случае — это <<^authors>> … <> .

    Комментарий оформляется в виде тега с восклицательным знаком, например, <> .

    Подключение дополнительного шаблона вызывается с помощью тега с угловой скобкой. Например, <<>copyright>> . Если в текущем контексте присутствует поле с таким названием, то оно будет передано в качестве контекста для подключаемого шаблона.

    6 лучших шаблонизаторов на PHP

    Для чего вообще нужны движки шаблонов, когда можно использовать сам PHP в качестве шаблонизатора? Да, это возможно. Но зачем, если есть более надежные и доступные варианты.

    Например, для отображения значения переменной в PHP вы бы написали:

    Но то же самое, только с помощью более короткого кода, можно сделать Twig и Django :

    PHP лучше всего подходит для бизнес-логики. Его нельзя смешивать с уровнем представления.

    Бизнес-логика приложения определяет, как данные создаются, отображаются, сохраняются и изменяются. Уровень представления определяет, как данные будут предоставлены пользователю в определенном формате, таком как HTML , JSON , XML или другом.

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

    Например, Django несколько лет назад ввел наследование шаблонов как способ имитации классов, только для шаблонов:

    Это настолько эффективное решение, что многие движки шаблонов теперь поддерживают данную функцию по умолчанию.

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

    Режим песочницы (обратите внимание)

    Он необходим, когда вы разрешаете пользователям редактировать шаблоны ( например, когда вебмастерам разрешено редактировать некоторые back-end шаблоны ). Это не абсолютное требование, в каждом конкретном случае нужно принимать решение индивидуально. Установка для шаблона режима песочницы означает возможность ограничения того, что в нем можно сделать.

    Например, необходимо иметь возможность установить ограничения для методов / функций, которые можно вызывать, тегов, которые можно использовать, и многого другого. Эти функции отсутствуют в PHP .

    Альтернативные движки шаблонов PHP

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

    1. Twig

    PHP-шаблонизатор Twig был написан Армином Ронахером из Jinja . Это один из популярных движков шаблонов. Несмотря на то, что Twig один из наиболее полнофункциональных PHP-шаблонов , он также и самый быстрый:

    Некоторые из основных функций Twig :

    • Встроенное наследование шаблонов ( шаблоны компилируются как классы ).
    • Полностью автоматизированное экранирование ( без связанных с этим временных затрат, происходящих в процессе компиляции ).
    • Безопасный режим песочницы , который позволяет использовать Twig в качестве языка шаблонов для приложений, в которых пользователи могут изменять дизайн шаблона.
    • Отличная расширяемость: вы переопределяете все, даже основные функции, добавляя собственные теги и фильтры в качестве расширения. Перед компиляцией также можно манипулировать AST ( абстрактным деревом синтаксиса ). Используя эти возможности, даже можно создать собственный DSL ( Domain Specific Language ), предназначенный для вашего приложения.
    • Шаблонно-ориентированный синтаксис.
    • Функциональный – поддерживает множественное наследование, блоки, автоматическое выключение вывода и многое другое.
    • Понятные сообщения об ошибках.

    2. Smarty

    В Smarty большое внимание уделяется шаблону, и меньшее коду. Он использует простой синтаксис , который разработан специально для представлений:

    Smarty предоставляет крутой учебный курс , с которого можно начать изучение данного движка. Он компилирует копии шаблонов в виде скриптов PHP . Благодаря чему вы можете использовать преимущества синтаксиса тегов шаблонов и скорости PHP .

    Компиляция выполняется один раз, когда шаблон вызывается впервые. Затем скомпилированные версии используются в дальнейшем. Таким образом, Smarty позаботился о том, чтобы дизайнер мог просто редактировать шаблоны, и ему не нужно было управлять скомпилированными версиями.

    Smarty также использует концепцию песочницы.

    В Smarty 3 было введено наследование. Используя наследование, можно легко управлять блоками.

    3. mustache

    Движок расширяет теги в шаблоне, используя значения, предоставленные в хеше или объекте. Мы называем это “ logic-less ”, потому что в нем нет операторов if , условий else или циклов for . Вместо этого есть только теги.

    4. Blade

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

    Blade — это автономный компонент, и его можно использовать отдельно. Движок был выпущен в 2011 году. На сегодняшний день является одним из наиболее часто используемых.

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

    Но основная проблема Blade — недостаточно обширная документация . В ней отсутствует много важных аспектов.

    5. Volt

    PHP-шаблонизатор Volt — это быстрый и удобный язык шаблонов, написанный на языке C для PHP . Volt тесно интегрирован с другими компонентами Phalcon . Но при этом его можно использовать в своих приложениях в качестве автономного компонента.

    Главный недостаток Volt заключается в том, что его нельзя полностью отделить от Phalcon . Поэтому, если хотите использовать Volt с другими фреймворками, вам это не удастся. Вы можете вернуться к использованию движка шаблонов Twig , который, является самым близким к Volt языком, но в то же время полностью автономным.

    6. Dwoo

    Как и Twig и Smarty , Dwoo поддерживает наследование, что дает возможность легко переопределять значения шаблонов по умолчанию. Но, к сожалению, у Dwoo нет функции песочницы, и его ядро является ​​недостаточно гибким.

    • Быстрее, чем Smarty .
    • Гибкое создание плагинов.
    • Совместимость с синтаксисом Smarty с несколькими дополнениями и ярлыками для ускорения написания шаблонов.

    Заключение

    Twig — это движок шаблонов, который можно легко адаптировать. Он многофункциональный, легко настраиваемый и прекрасно задокументирован. И если вы знаете другие шаблонизаторы PHP , то сможете легко начать работу с Twig , потому что его синтаксис похож на другие движки.

    Данная публикация представляет собой перевод статьи « 6 Best Template Engines in PHP [updated] » , подготовленной дружной командой проекта Интернет-технологии.ру

    5 популярных PHP-шаблонизаторов

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

    Введение

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

    Зачем нужны шаблонизаторы?

    Чем сложнее приложение, тем важнее разделять логику и представление. Только в случае успешного разделения логики от представления backend-разработчики смогут эффективно сотрудничать с frontend-разработчиками. Благодаря шаблонизаторам frontend-разработчики (или в простонародье — верстальщики) могут изменять внешний вид web-приложения, используя понятный синтаксис выбранного шаблонизатора. Обычно шаблоны представляют собой небольшие куски HTML-кода, в которые встроен вывод переменных, подготовленных backend-разработчиком.

    Иногда фронт вообще написан на JavaScript, а общение с бэком происходит посредством API, но это совсем другая история.

    Список шаблонизаторов для сравнения

    К шаблонизаторам применялись следующие критерии: они должны быть написаны на PHP, активно поддерживаться и быть признанными сообществом PHP.

    Blade

    Этот шаблонизатор используется в Laravel — PHP-фреймворке, начавшем свою жизнь в 2011 г и ставшим одним из популярных PHP-фреймворков. По слухам, причиной скорости Blade является небольшой список регулярных выражений для замены.

    Подписчики Звёздочки Форки
    4 642 49 438 15 233

    Mustache

    Mustache доступен для практически неограниченного количества языков, в том числе и PHP. Также он содержит минимум логики: замена, цикл foreach, проверка на null.

    Подписчики Звёздочки Форки
    424 12 804 2 258

    Smarty

    Smarty появился в начала нулевых, до сих пор развивается и конкурирует с более молодыми проектами.

    Подписчики Звёздочки Форки
    197 1 457 473

    Данный шаблонизатор обрёл свою популярность благодаря Фабьену Потенцеруб, внедрившему его в систему представлений фреймворка Symfony. Тем не менее, Twig может быть внедрён практически в любой проект, то есть независимо от фреймворка.

    Подписчики Звёздочки Форки
    257 4 797 1 020

    Volt используется в фреймворке Phalcon (фреймворк, написанный на C и распространяемый как PHP-расширение). Из недостатков можно отметить лишь то, что Volt можно использовать только в Phalcon, то есть нет возможности использовать в проекте на другом фреймворке.

    Подписчики Звёздочки Форки
    752 9 460 1 734

    Как выбрать шаблонизатор?

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

    Blade

    Синтаксис и функциональность

    Blade поддерживает наследование шаблонов, секции, безопасный ввод содержимого и простой синтаксис. Blade разрешает использование PHP внутри шаблонов.

    Документация и поддержка

    Blade отлично документирован, но документация носит характер обзоров, в то время как более детальная информация содержится на сторонних ресурсах.

    Производительность

    Во время теста скорость достигала 100 000 шаблонов в секунду. Но если учитывать обработку шаблонов вместе с загрузкой фреймворка, то скорость около 2 200 шаблонов в секунду.

    Mustache

    Синтаксис и функциональность

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

    Документация и поддержка

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

    Производительность

    Mustache, по очевидным причинам, оказался очень быстрым (6,000 шаблонов в секунду).

    Smarty

    Синтаксис и функциональность

    Синтаксис лаконичен и прост для восприятия. Функционал большой и расширяемый.

    Документация и поддержка

    Документация у Smarty хорошо организована. Сайт выглядит немного устаревшим, но это является проблемой.

    Производительность

    Smarty довольно быстро обрабатывает некэшируемые шаблоны (9 634 шаблонов в секунду) and ещё быстрее — кэшируемые (57 115 шаблонов в секунду).

    Синтаксис и функциональность

    Twig поставляется с полным набором функций, фильтров, тестов и расширяемых макросов.

    Документация и поддержка


    Документация отлично организована, информативна и содержит наглядную информацию. Сообщество вокруг Twig большое, ведётся активная разработка на GitHub. Twig используется в Drupal 8, второй по популярности CMS.

    Производительность

    Обработка некэшируемых шаблонов происходит со скоростью 4 318 шаблонов в секунду, а кэшированных — 5 982.

    Синтаксис и функциональность

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

    Документация и поддержка

    Документация чистая, информативная и наглядная. Разработка Volt, как и Phalcon, идёт на GitHub полным ходом.

    Производительность

    Ввиду того, что фреймворк написан на C, Volt обрабатывает 23 900 шаблонов в секунду и вдвое больше при включении кэширования.

    Выводы

    Наиболее оптимальным вариантом является Twig. Потому что шаблонизатор не зависит от фреймворка, запускается очень быстро, содержит достаточно функционала, имеет отличную документацию и активно развивается.

    В качестве бонуса замечу, что синтаксис идентичен синтаксису Volt.

    Mustache Шаблонизатор Без Логики

    Название: Mustache Шаблонизатор Без Логики

    Длительность: 43 мин и 19 сек

    Топ-пост этого месяца:  Пример повторяющихся компонентов React в формах

    Битрейт: 192 Kbps

    57.01 MB и длительностью 43 мин и 19 сек в формате mp3.

    Getting Started With Mustache Js

    Java Web Jsp Servlets Урок 6 Передача Параметров Через Get И Post Запросы

    How To Use Mustache Js Template System

    Jimmy Fallon Gets A Mustache

    The Tonight Show Starring Jimmy Fallon

    Php Шаблонизатор Twig

    Java Scheduler Using Spring Fixed Cron Scheduling Working Code Demo

    Lodash 1 Установка Lodash

    Connect To Database Using Pdo In Oop Php Object Oriented Php Tutorial Php Tutorial Mmtuts

    Движок Html Шаблонов Thymeleaf Введение В Thymeleaf Урок 1

    Верстка Урок 18 Шаблонизация

    1 4 1 Эксперт Php Шаблонизатор Smarty

    Jquery Attribute Selector

    Javascript Джедай 23 Json

    Node Js Express Tutorial Handlebars Templating Engine

    Работа С Базами Данных Средствами Pdo

    Introduction To Javascript Templating With Mustache Js

    Spring Boot Crud Tutorial With Spring Mvc Spring Data Jpa Thymeleaf Hibernate Mysql

    Jquery Ajax Tutorial 3 Delegating Events Mustache Js Templating Jquery Tutorial 9

    Mustache Шаблонизатор Без Логики

    Клад Монет Петра 1 Рассказ О Поиске Клада

    Pokemon Dead Channel By Warriorkloneomon

    Gi Joe Rise Of Cobra Movie Snake Eyes With Timber Paris Pursuit Action Figure Toy Review

    Роза Из Бисера Урок 2 Лепестки Beaded Rose Lesson 2 Petals

    Mega Man 10 Chill Man Perfect Run

    Ultimate Golf Road Trip Episode 2 Streamsong Resort Blue Red

    Флоренция И Рим В Эпоху Ренессанса

    Утепление Дома Пенопластом Поклейка Пенопласта На Стену

    2020 Duramax All Terrain 2500 Custom

    Браузер Safari В Iphone

    Jonghyun Shinee Rewind Polskie Napisy Polish Subs Pl

    Dcs Mig 19P Farmer B Full Mission From Baltic Dragon Spud Considers Defecting

    Issue 97 Slowthai Performs Acapella Verse On A Northampton Street Featuring Alan Moore

    Ipad Mini В 2020 Году Как Купить Б У Ipad И Не Стать Лохом

    Poor Baba Boi Mambo Ni Serious Kama Ebola Ep31 Pt2

    Labiales Hd Mate Esika Peru 2020

    Twitch Boblennon Warhammer 40 000 Inquisitor 27 08 18 Partie 2 2

    The Pointer Sisters I M So Excited Official Music Video

    Пачка Героев Астарот Карх Сатори Йорген Марта Игра Хроники Хаоса Тести И Сравнение

    Dilnoza Ismiyaminova Yorim Bor Дилноза Исмияминова Ёрим Бор Music Version

    War Of The Spanish Succession Every Week

    Goddess D Smoking In Rainbow Bikini Top And Pink Lipstick

    Soma Sema Artificial Heart

    Ростелеком 290 Обзор Сим Карты С Безлимитным Интернетом

    Ebay And Aliexpress False Ayelashes For A Dollar Review

    Чистка Фар От Пыли Мercedes W211 Светить Будут Рассеиватель Руками Не Трогать

    Gtx 1070 I7 9700K 10 Games 1080P

    Самые Известные Популярные Бренды Одежды В Мире

    Шухрат Обидов 2020

    Братан Привет Playerunknown S Battlegrounds

    Новинка 2020 Я Буду Ждать Тебя Валерий Палаускас

    Шапка С Косами Спицами Часть 1 Knitting Baby Hat With Braids Part 1

    Нуб Против Про Монстр Против Зомби Тролинг Выживание Нуба В Майнкрафт Мультик 22

    The Colored Night

    На Самом Деле Нашел Побогаче Разоблачение Молодого Мужа Светской Львицы Выпуск От 22 10 2020

    Seargent Darkness America

    Paul Hindemith Sonata For Viola And Piano Op 11 4

    Digimon Adventure 02 Bokura No Digital World Single

    Vw Dark Side Episode Ii

    Make Your Own Doc Marty Costumes Diy Costume Squad

    Илья Ильин Все Подходы Финальная Борьба За Золото 2014 Алматы Almaty Ilya Ilyin

    Кладбище Ретро Автомобилей На Военно Грузинской Дороге

    Depard My Old Game Retro 8Bit Video Games Background Music

    День Матери Мне Однажды Сын Сказал Читает Владимир Глазунов Стихи О Маме

    Russland Moskaus Platte Muss Weg Arte Reportage

    Последняя Электричка Застольные Песни Баянист Алексей Леоненков Живой Звук 2020

    Trancity Самый Длинный Трамвай В Игре

    Eladio Carrión Así Remix Feat Nio Garcia Casper Myke Towers Jonz Ele A El Dominio Eladio Carrión Lyanno

    Let S Go Now Biba

    Ай Моя Хорошая Враг

    Martin Fröst Solo De Concours

    Chime Adam Tell Whole

    I Can Talk Live At Brixton Academylondon 2012 Two Door Cinema Club

    Lenny Ibizarre Yellow Sunshine Voodoo Girl

    Ariel Pink Exile On Frog Street

    Backstreet Boys Siberia

    По Пути Марсель

    Chris James Swim

    Morgenshtern Fuck Em All

    Yung Gravy Magic

    Psognar Force Field

    Zaz Pas L Indifférence

    I Want Tx See Yxu Bleed Scarlxrd

    Нелюбовь Алёна Швец

    Infant Annihilator The Palpable Leprosy Of Pollution

    Symphony No 1 In B Flat Major Op 38 I Andante Un Poco Maestoso Allegro Molto Vivace Kurt Masur Лондонский Филармонический Оркестр

    Потрачено Кис Кис


    Something Critical Event

    The Attack Of The Dead Men History Version Sabaton

    Mustache Шаблонизатор Без Логики

    Название: Mustache Шаблонизатор Без Логики

    Длительность: 43 мин и 19 сек

    Битрейт: 192 Kbps

    57.01 MB и длительностью 43 мин и 19 сек в формате mp3.

    Getting Started With Mustache Js

    Java Web Jsp Servlets Урок 6 Передача Параметров Через Get И Post Запросы

    How To Use Mustache Js Template System

    Jimmy Fallon Gets A Mustache

    The Tonight Show Starring Jimmy Fallon

    Php Шаблонизатор Twig

    Java Scheduler Using Spring Fixed Cron Scheduling Working Code Demo

    Lodash 1 Установка Lodash

    Connect To Database Using Pdo In Oop Php Object Oriented Php Tutorial Php Tutorial Mmtuts

    Движок Html Шаблонов Thymeleaf Введение В Thymeleaf Урок 1

    Верстка Урок 18 Шаблонизация

    1 4 1 Эксперт Php Шаблонизатор Smarty

    Jquery Attribute Selector

    Javascript Джедай 23 Json

    Node Js Express Tutorial Handlebars Templating Engine

    Работа С Базами Данных Средствами Pdo

    Introduction To Javascript Templating With Mustache Js

    Spring Boot Crud Tutorial With Spring Mvc Spring Data Jpa Thymeleaf Hibernate Mysql

    Jquery Ajax Tutorial 3 Delegating Events Mustache Js Templating Jquery Tutorial 9

    Mustache Шаблонизатор Без Логики

    Клад Монет Петра 1 Рассказ О Поиске Клада

    Pokemon Dead Channel By Warriorkloneomon

    Gi Joe Rise Of Cobra Movie Snake Eyes With Timber Paris Pursuit Action Figure Toy Review

    Роза Из Бисера Урок 2 Лепестки Beaded Rose Lesson 2 Petals

    Mega Man 10 Chill Man Perfect Run

    Ultimate Golf Road Trip Episode 2 Streamsong Resort Blue Red

    Флоренция И Рим В Эпоху Ренессанса

    Утепление Дома Пенопластом Поклейка Пенопласта На Стену

    2020 Duramax All Terrain 2500 Custom

    Браузер Safari В Iphone

    Jonghyun Shinee Rewind Polskie Napisy Polish Subs Pl

    Dcs Mig 19P Farmer B Full Mission From Baltic Dragon Spud Considers Defecting

    Issue 97 Slowthai Performs Acapella Verse On A Northampton Street Featuring Alan Moore

    Ipad Mini В 2020 Году Как Купить Б У Ipad И Не Стать Лохом

    Poor Baba Boi Mambo Ni Serious Kama Ebola Ep31 Pt2

    Labiales Hd Mate Esika Peru 2020

    Twitch Boblennon Warhammer 40 000 Inquisitor 27 08 18 Partie 2 2

    The Pointer Sisters I M So Excited Official Music Video

    Пачка Героев Астарот Карх Сатори Йорген Марта Игра Хроники Хаоса Тести И Сравнение

    Dilnoza Ismiyaminova Yorim Bor Дилноза Исмияминова Ёрим Бор Music Version

    War Of The Spanish Succession Every Week

    Goddess D Smoking In Rainbow Bikini Top And Pink Lipstick

    Soma Sema Artificial Heart

    Ростелеком 290 Обзор Сим Карты С Безлимитным Интернетом

    Ebay And Aliexpress False Ayelashes For A Dollar Review

    Чистка Фар От Пыли Мercedes W211 Светить Будут Рассеиватель Руками Не Трогать

    Gtx 1070 I7 9700K 10 Games 1080P

    Самые Известные Популярные Бренды Одежды В Мире

    Шухрат Обидов 2020

    Братан Привет Playerunknown S Battlegrounds

    Новинка 2020 Я Буду Ждать Тебя Валерий Палаускас

    Шапка С Косами Спицами Часть 1 Knitting Baby Hat With Braids Part 1

    Нуб Против Про Монстр Против Зомби Тролинг Выживание Нуба В Майнкрафт Мультик 22

    The Colored Night

    На Самом Деле Нашел Побогаче Разоблачение Молодого Мужа Светской Львицы Выпуск От 22 10 2020

    Seargent Darkness America

    Paul Hindemith Sonata For Viola And Piano Op 11 4

    Digimon Adventure 02 Bokura No Digital World Single

    Vw Dark Side Episode Ii

    Make Your Own Doc Marty Costumes Diy Costume Squad

    Илья Ильин Все Подходы Финальная Борьба За Золото 2014 Алматы Almaty Ilya Ilyin

    Кладбище Ретро Автомобилей На Военно Грузинской Дороге

    Depard My Old Game Retro 8Bit Video Games Background Music

    День Матери Мне Однажды Сын Сказал Читает Владимир Глазунов Стихи О Маме

    Russland Moskaus Platte Muss Weg Arte Reportage

    Последняя Электричка Застольные Песни Баянист Алексей Леоненков Живой Звук 2020

    Trancity Самый Длинный Трамвай В Игре

    Eladio Carrión Así Remix Feat Nio Garcia Casper Myke Towers Jonz Ele A El Dominio Eladio Carrión Lyanno

    Let S Go Now Biba

    Ай Моя Хорошая Враг

    Martin Fröst Solo De Concours

    Chime Adam Tell Whole

    I Can Talk Live At Brixton Academylondon 2012 Two Door Cinema Club

    Lenny Ibizarre Yellow Sunshine Voodoo Girl

    Ariel Pink Exile On Frog Street

    Backstreet Boys Siberia

    По Пути Марсель

    Chris James Swim

    Morgenshtern Fuck Em All

    Yung Gravy Magic

    Psognar Force Field

    Zaz Pas L Indifférence

    I Want Tx See Yxu Bleed Scarlxrd

    Нелюбовь Алёна Швец

    Infant Annihilator The Palpable Leprosy Of Pollution

    Symphony No 1 In B Flat Major Op 38 I Andante Un Poco Maestoso Allegro Molto Vivace Kurt Masur Лондонский Филармонический Оркестр

    Потрачено Кис Кис

    Something Critical Event

    The Attack Of The Dead Men History Version Sabaton

    Какое преимущество шаблона без логики (например, усы)? — templates

    В последнее время я столкнулся с mustache, который, как утверждается, является шаблоном без.

    Тем не менее, нет объяснения, почему он разработан с логической точки зрения. В другом слове, какое преимущество шаблона без логики?

      2 13
    • 12 окт 2020 2020-10-12 18:06:17
    • Morgan Cheng


    13 ответов

    Основными преимуществами использования шаблонов без логики являются:

    • Строго обеспечивает разделение представления модели, см. этот документ для подробностей (рекомендуется)
    • Очень легко понять и использовать, потому что не нужна логика программирования (и знание!), а синтаксис минимален
    • (конкретный Mustache) высоко портативный и независимый от языка, может использоваться без изменений практически во всех средах программирования
    • 12 окт 2020 2020-10-12 18:06:20
    • rmuller

    Я согласен с Брэдом: стиль underscore легче понять. Но я должен признать, что синтаксический сахар не может понравиться всем. Если _.each несколько запутанно, вы можете использовать традиционный цикл for .

    Всегда хорошо, если вы можете отказаться от стандартных конструкций, таких как for или if . Просто используйте или , а Mustache используйте несколько неологизм для if-then-else (и сбив с толку, если вы не читали документацию):

    Механизм шаблонов отлично работает, когда вы можете легко вставлять вложенные шаблоны (стиль underscore ):

    В основном вы передаете свой внутренний tmpl как свойство вашего контекста. И назовите его соответствующим образом. Сладкий:)

    Кстати, если единственным интересующим вас материалом является механизм шаблонов, используйте автономную реализацию шаблона. Он только 900 символов при минировании (4 длинные строки):

    • 12 окт 2020 2020-10-12 18:06:20
    • roland

    Вот три способа рендеринга списка, с символьным числом. Все, кроме первого и самого короткого, имеют логические схемы без шаблонов.

    CoffeeScript (с реактивный кофе производитель DSL) — 37 символов

    Нокаут — 100 символов

    Ручки/Усы — 66 символов

    Подчеркивание — 87 символов

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

    Ясно, что я не возражаю против сохранения «бизнес-логики» (расширенного вычисления) из шаблонов. Но я думаю, что, давая им псевдоязык для логики отображения вместо языка первого класса, цена оплачивается. Не просто больше набирать, а отвратительное сочетание контекстного переключения, кому-то нужно его прочитать.

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

    • 12 окт 2020 2020-10-12 18:06:20
    • Dean Radcliffe

    Несмотря на то, что вопрос старен и отвечает, я хотел бы добавить свой 2 ¢ (что может показаться напыщенным, но это не так, его ограничения и когда они становятся неприемлемыми).

    Цель шаблона — выдать что-то, а не выполнять бизнес-логику. Теперь есть тонкая грань между тем, что вы не можете делать то, что вам нужно сделать в шаблоне, и иметь в них «бизнес-логику». Несмотря на то, что я действительно позитивно относился к Усы и пытался использовать его, я оказался не в состоянии делать то, что мне нужно, в довольно простых случаях.

    «массирование» данных (использование слов в принятом ответе) может стать реальной проблемой — даже простые пути не поддерживаются (что-то, что касается Handlebars.js). Если у меня есть данные просмотра, и мне нужно настроить его каждый раз, когда я хочу что-то сделать, потому что мой механизм шаблонов слишком ограничен, тогда это не помогает в конце. И он побеждает часть независимости платформы, которую утверждает усы для себя; Я должен дублировать логику массажа везде.

    Тем не менее, после некоторого разочарования и после того, как мы попробовали другие механизмы шаблонов, мы создали собственный (. еще один. ), в котором используется синтаксис, созданный шаблонами .NET Razor. Он анализируется и компилируется на сервере и генерирует простую автономную JS-функцию (фактически как модуль RequireJS), которую можно вызвать для «выполнения» шаблона, возвращая в качестве результата строку. Образец, представленный brad, будет выглядеть так, когда мы используем наш движок (который я лично нахожу намного лучше в читабельном сравнении по сравнению с Mustache и Underscore):

    Топ-пост этого месяца:  Как работает и как установить Друпал (Drupal) на Денвер

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

    Мы решили, что, реализуя язык запросов, вдохновленный XPath, который мы назвали JPath. В принципе, вместо использования/для перемещения к детям мы используем точки, и поддерживаются не только строковые, числовые и булевы литералы, но также объекты и массивы (как JSON). Язык является свободным от побочных эффектов (который является обязательным для шаблонов), но позволяет «массировать» данные по мере необходимости, создавая новые литералы.

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

    Вызов из JS-кода:

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

    • 12 окт 2020 2020-10-12 18:06:20
    • Lucero

    В одном предложении: Logic-less означает, что сам движок шаблона менее сложный и, следовательно, имеет меньший размер и существует меньше способов для него вести себя неожиданно.

    • 12 окт 2020 2020-10-12 18:06:19
    • Kernel James

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

    Другим вариантом является просто найти синтаксис шаблонов, который использует язык, который поддерживается как на клиенте, так и на сервере, а именно на javascript на сервере либо с помощью node.js, либо вы можете использовать js-интерпретатор и json через что-то вроде therubyracer.

    Тогда вы можете использовать что-то вроде haml.js, которое намного чище, чем любой из приведенных примеров, и отлично работает.

    • 12 окт 2020 2020-10-12 18:06:19
    • eagspoo

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

    Появляется мини-rant (не стесняйтесь игнорировать):

    Если вы не хотите продолжать чтение. Мой короткий ответ на указанную выше тему: Я не согласен с шаблонами без логики. Я думаю об этом как о программирующей форме экстремизма.:-): -)

    Теперь мое разглашение продолжается в полном разгаре:: -)

    Я думаю, что когда вы принимаете много идей до крайности, результат становится смехотворным. И иногда (т.е. эта тема) проблема заключается в том, что мы принимаем «неправильную» идею до крайности.

    Удаление всей логики из представления является «смехотворным» и неправильной идеей.

    Вернитесь на минутку.

    Вопрос, который нам нужно задать себе, — это то, почему нужно удалить логику? Концепция, очевидно, разделение проблем. Держите обработку представления как отдельную от бизнес-логики, насколько это возможно. Зачем это делать? Это позволяет нам менять вид (для разных платформ: мобильный, браузер, рабочий стол и т.д.), И это позволяет нам более легко обменивать поток управления, последовательность страниц, изменения валидации, изменения модели, доступ к безопасности и т.д. Также, когда логика удаленный из представлений (особенно веб-видов), он делает представления более читабельными и, следовательно, более удобными для обслуживания. Я понимаю это и соглашаюсь с этим.

    Однако основной упор должен делаться на разделение проблем. Не 100% без логики. Логика в представлениях должна относиться к тому, как визуализировать «модель». Насколько мне известно, логика в взглядах совершенно прекрасна. У вас может быть логика просмотра, которая не является бизнес-логикой.

    Да, еще в тот день, когда мы писали JSP, PHP или ASP-страницы с небольшим разделением логики кода и логики просмотра или без него, обслуживание этих веб-приложений было абсолютным кошмаром. Поверь мне, я знаю, я создал, а затем поддерживал некоторые из этих чудовищ. Именно на этом этапе обслуживания я действительно понял (в визуальном порядке) ошибку моих и моих коллег.:-): -)

    Итак, эдикт с высоты (отраслевые эксперты) стал, вы должны структурировать свои веб-приложения, используя что-то вроде контроллера на переднем плане (который отправляется обработчикам или действиям [выберите ваш веб-фреймворк]), и ваши взгляды должны не содержат кода. Представления должны были стать немыми шаблонами.

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

    В одном проекте, в котором я участвовал, мы пытались следовать идее без логики с нелепым экстремалом. У нас был домашний движок шаблонов, который позволил бы нам отображать объекты модели в html. Это была простая система на основе токенов. Это было ужасно по одной простой причине. Иногда в представлении мы должны были решить, должен ли я отобразить этот небольшой фрагмент HTML.. или нет.. Решение обычно основывается на некотором значении в модели. Когда у вас нет абсолютно никакой логики в представлении, как вы это делаете? Ну, ты не можешь. У меня были некоторые серьезные аргументы в пользу нашего архитектора. Внешние HTML-люди, которые пишут наши взгляды, были полностью укоренились, когда они столкнулись с этим, и были очень подчеркнуты, потому что не могли достичь своих простых целей. Поэтому я представил концепцию простой IF-инструкции в нашем шаблоне. Я не могу описать вам облегчение и спокойствие, которое последовало. Проблема была решена с помощью простой концепции IF-Statement в наших шаблонах! Вдруг наш шаблонный двигатель стал хорошим.

    Итак, как мы попали в эту глупую стрессовую ситуацию? Мы сосредоточились на неправильной цели. Мы следовали правилу, у вас не должно быть логики в ваших взглядах. Это было неправильно. Я думаю, что «правило большого пальца» должно быть, минимизируйте количество логики в ваших представлениях. Потому что, если вы этого не сделаете, вы можете непреднамеренно позволить бизнес-логике проникнуть в представление — что нарушает разделение проблем.

    Я понимаю, что когда вы заявляете, что «у вас не должно быть логики в представлениях», становится легко узнать, когда вы являетесь «хорошим» программистом. (Если это ваша мера добра). Теперь попробуйте реализовать веб-приложение даже средней сложности с помощью приведенного выше правила. Это не так легко сделать.

    Для меня правило логики в представлениях не так ясно и откровенно, что я хочу, чтобы это было.

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

    Mustache — шаблонизатор без логики

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

    • для совместного использования разметки на страницах;
    • для включения отдельных блоков с функциональностью (при необходимости);
    • в общем и целом для упрощения процесса построения в меру сложных макетов страниц c минимумом прилагаемых усилий.

    Сравнение шаблонизаторов

    Существует ряд популярных шаблонизаторов для JavaScript, и мы рассмотрим некоторые из них:

    EJS (Встроенный JavaScript) очень напоминает PHP или JSP, очень простые функции – слишком простые для того, чтобы быть хоть в чем-то полезными. Сразу исключаем.

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

    Mustache / Handlebars

    Использует знакомую < < систему токенов >> для встраивания логики в существующие шаблоны (и не только HTML ). Обеспечивает хороший набор циклов, логику и управление переменными. Не очень хорошо работает с частичными шаблонами и блоками, а также другими элементами, необходимыми для более легкого создания умеренно сложных структур страниц, что является ключевым требованием даже для самой простой системы CMS, которую я бы хотел видеть. Идем дальше…

    В настоящее время популярен из-за его применения в LinkedIn. На первый взгляд, очень похож на Mustache / Handlebars, но дополнен рядом полезных функций, таких как именованные блоки. Однако процесс загрузки шаблона и рендеринг выглядят довольно неуклюже, и он до сих пор не поддерживает довольно широкий спектр функций для построения страницы. Хорош, но недостаточно…

    Nunjucks

    Еще одна < < система на основе токенов >> , обеспечивающая (как и другие движки) логику, выполнение циклов и возможность управления переменными. Но кроме этого, шаблонизатор предоставляет продвинутые элементы построения страницы, например, наследование блоков, включая наследование макетов, пользовательские теги и макросы. Это все наилучшим образом подходит для системы CMS, где страницы представляют собой серию «строительных блоков».

    Итак, у нас есть победитель!

    Для справки

    Некоторые полезные ссылки для сравнения шаблонизаторов:

    Основные примеры рендеринга

    Давайте рассмотрим некоторые примеры шаблонизатора Nunjucks в действии…

    Динамический рендеринг на платформе Node при использовании nunjucks.render

    Во-первых, мы рассмотрим пример, в котором будем использовать Nunjucks для рендеринга страницы в ответ на запрос веб-службы, который обрабатывается сервером Node. Этот сценарий очень похож на тот, который происходит при запросе PHP или СoldАusion или страницы ASP .NET на обычном веб-сайте или в веб-приложении.

    Предположим, что Node уже установлен.

    Устанавливаем Express и Nunjucks:

    Создаем нашу базовую структуру app.js :

    Настраиваем Nunjucks:

    Создаем шаблон index.html :

    и переходим на http://localhost:3000 . Готово!

    Добавление динамических данных

    Давайте быстро расширим этот пример, чтобы показать, как можно передать данные вашему шаблону в Nunjucks.

    Для начала давайте передадим некоторые данные функции render :

    Во-вторых, мы будем ссылаться на эти данные в нашем шаблоне index.html :

    Угадали, что произойдет, когда мы перейдем на http://localhost:3000 ?

    Предварительная компиляция при помощи Gulp

    Если у вас есть шаблоны, которые не опираются на динамические данные, тогда альтернативой их рендерингу по запросу будет использование инструмента Gulp (или Grunt, если он вам больше по душе) для предварительной компиляции данных во время компоновки.

    Предположим, у вас есть простой сайт, состоящий из двух страниц со схожей разметкой:

    • src/index.html
    • src/contact-us.html
    • src/_layout.html

    Ваши странички могут выглядеть так:

    Устанавливаем плагин gulp-nunjucks :

    Создаем простой gulpfile.js в корневой папке проекта:

    Запускаем процесс рендеринга:

    Полученные в результате страницы HTML будут выглядеть так:

    Особенности Nunjucks

    Полную документацию можно посмотреть здесь:

    В этом разделе мы затронем некоторые из основ для иллюстрации некоторых ключевых функций Nunjucks.

    Наследование шаблона

    Наследование шаблона — это самый простой путь к многократному использованию шаблонов. При написании шаблона можно определить «блоки», которые дочерние шаблоны могут переопределить. (Это то, что мы делали выше в разделе < % содержание блока % >).

    Таким образом, дочерний шаблон может наследовать у родительского шаблона и заполнять множественные, дискретные блоки в этом шаблоне. На самом деле, «цепочка наследования» может быть настолько длинной, насколько вам этого хочется. Так, например, отдельный раздел новостей на веб-странице может наследовать шаблон «новостной сюжет» (и другие страницы также могут иметь свои шаблоны, например, «блоги», «фото галерея»), который, в свою очередь, наследует родительский (базовый) шаблон, содержащий общие разделы для всех страниц сайта.

    Включения

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

    Импортирование и макросы

    Импортирование позволяет загружать шаблон и открывать любые переменные и макросы (функции), определенные в нем. Это может быть полезно для таких вещей, как создание функций для последовательного отображения полей формы. немного похоже на написание пользовательских тегов с помощью ColdFusion, например. Для наглядности давайте рассмотрим шаблон под названием forms.html , который выглядит так:

    Мы можем импортировать этот шаблон и использовать его для быстрого рендеринга серии полей формы:

    Это особенно полезно при использовании таких фреймфорков, как Foundation или Bootstrap, которые требуют разумного количества HTML и CSS сред — если у вас это получилось путем рендеринга в макросе, то код вашего шаблона будет гораздо проще. (Плюс, если ваш шаблон делает весь рендеринг через макросы, то он напрямую не привязан к фреймворку, что облегчает переключение фреймфорков, а также позволяет делать изменения, общие для всех полей формы определенного типа).

    Логика – If / For / While

    if проверяет состояние и используется для выборочного отображения контента или выполнения других операций :

    for зацикливает массивы:

    Следующие шаги

    Советую изучить официальную документацию Nunjucks для более ясного представления о свойствах и возможностях шаблонизатора.
    В будущих обзорах я покажу, как можно скомбинировать возможности шаблонизатора Nunjucks с генератором статичных сайтов Wintersmith для построения своей собственной простой и многоязычной системы CMS.

  • Добавить комментарий