Возможна ли жизнь без шаблонизатора?

Правильный ответ — да, легко! Практически всегда описывая устройство CleverStyle CMS у кого-то возникал вопрос, а как же настраивать внешний вид, ведь нет никаких шаблонов.Нужно признаться, я немного лукавил, говоря что внешний вид можно изменить с помощью CSS. Изменить то можно, но не кардинально.Шаблонизатора как не было, так и нет, и даже не планируется. Вместо этого для генерации простого HTML используется BananaHTML, а сам интерфейс ложится на плечи Веб-Компонентов и Polymer в частности.

Как я докатился до такой жизниШаблонизаторы по разным причинам мне не нравились всегда. В связи с этим в CleverStyle CMS есть понятие темы оформления, которая отвечает за общий облик сайта, но нет шаблонов отдельных страниц.Во-первых если делать шаблоны отдельных страниц — вы не будете поддерживать всевозможные модули созданные сторонними разработчиками, потому будут использоваться стандартные шаблоны.Во-вторых шаблоны не позволяют так легко наследовать, и при этом радикально менять внешний вид при необходимости (об этом речь далее).Первоклассная поддержка Веб-Компонентов Веб-Компоненты появились не так давно, и есть достаточно много нюансов с их использованием, тем не менее, их удалось решить.В связи с этим изначально было потрачено достаточно много времени на то, чтобы понять кто виноват — я, как разработчик, полифиллы, или вообще сторонние библиотеки.Оказалось, что периодически были виноваты все.В текущей версии CleverStyle CMS, наверное, самая надежная и в связи с этим удобная среда для использования веб компонентов.В поставку (на момент написания статьи) входят патченные версии: jQuery: исправлено поведение $.fn.offset () для элементов внутри теневого дерева (pull request), исправляет работу всплывающих подсказок и целой кучи других jQuery плагинов WebComponents.js: исправлена обработка относительных путей в css файлах при наличии (pull request) UIkit: модифицированы стили для работы внутри теневого дерева (Скрипт для конвертации, подходит к любым стилям) Polymer: патч, позволяющий наследовать компоненты с теми же именами (обсуждение) В общем, поддержка Веб-Компонентов из коробки весьма основательная, но вся суть этого поста будет в последней модификации.Наследовать Веб-Компоненты с теми же именами Это не исправление проблем совместимости или багов, в отличии от остальных патчей, а новая полезная функциональность.Выглядит в целом так: С первого взгляда, возможно, не очевидно, но это позволяет вам создавать интерфейсы исключительно из Веб-Компонентов, а потом наследовать и переопределять их при необходимости.Как это работало раньше: без патча вы можете наследовать существующие пользовательские элементы (Custom Elements) или элементы самого браузера, но не можете переопределить уже зарегистрированные элементы, с ним же вы можете унаследовать элементы, которые будут объявлены позже, таким образом сохраняя нужное имя элемента.

Для чего всё это? Создавая элементы интерфейса в виде Веб-Компонентов вы полагаетесь на определённые имена тэгов, и было бы очень удобно, если бы вы могли патчить их на лету.Так как Polymer является всего лишь оберткой, мы можем откладывать регистрацию элементов до появления наследуемого элемента, а так же переименовывать его во избежание конфликтов.Как следствие можно менять представление совершенно без ограничений, не изменяя начальный код, всего лишь наследуя и модифицируя веб-компоненты.Таким образом вы можете перевернуть страницу вверх ногами, добавить сторонний виджет комментирования, догрузить данные, которых не было в верстке изначально через API и показать пользователю именно то, что вы хотели.В контексте CleverStyle CMS Изачально это было придумано и реализовано для CleverStyle CMS (подробнее в документации), но при желании использования в своих проектах соберите Polymer из этой ветки.В рамках CleverStyle CMS есть понятие зависимостей между компонентами. Предположим, у вас есть модуль магазина (весьма реальный пример, разработка ведется в отдельной ветке), интерфейс сделан с использованием Веб-Компонентов и вы хотите изменить страницу отображения товара.meta.json модуля Shop:

{ «package» : «Shop», «category» : «modules», «version» :»0.88.1+build-118», «description» : «Shop functionality», «author» : «Nazar Mokrynskyi», «website» : «cleverstyle.org/cms», «license» : «MIT License», «db_support» : [ «MySQLi» ], «provide» : «shop», «require» : [ «System=>1.13», «fotorama» ], «optional» : [ «Comments», «Plupload», «TinyMCE», «file_upload», «editor», «simple_editor», «inline_editor», «payment» ], «multilingual» : [ «interface», «content» ], «languages» : [ «English», «Русский», «Українська» ] } Компонент может зависеть от чего-то, конфликтовать, и сам предоставлять некоторую функциональность, необходимую другим компонентам, всё это отражается в порядке подключении JS/CSS/HTML файлов компонентов (а нам нужно подключить хакнутую версию перед оригинальной).Но тут возникает один нюанс, в CleverStyle CMS не может быть двух компонентов, которые предоставляют одну и ту же функциональность, они будут конфликтовать, с другой стороны множественные патчи Веб-Компонентов (методом, описанным выше) разрешены.Здесь приходит на выручку фича, появившаяся в версии 1.17, которая позволяет указать, что это не самостоятельная функциональность, а расширение функциональности другого компонента: { «package» : «Shop_item», «category» : «modules», «version» :»0.0.1+build-1», «description» : «Shop item hack», «author» : «Nazar Mokrynskyi», «license» : «MIT License», «provide» : «shop/item» } Именно provide: shop/item показывает что происходит расширение функциональности shop, подробнее о зависимостях и конфликтах.После этого можно объявлять в Shop_item наследование отображения товара:

При этом исходный код страницы с товаром не меняется и выглядит весьма дружелюбно для поисковых систем (а учитивая минимальность кода даже очень):

Boots

Nice boots

Size 2
Заключение Используете вы CleverStyle CMS или нет, все патчи открыты и доступны, так что я рекомендую всем попробовать и выразить свое мнение в комментариях.За Веб-Компонентами будущее!

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

© Habrahabr.ru