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

Правильный ответ — да, легко!

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

Как я докатился до такой жизни

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

Первоклассная поддержка Веб-Компонентов

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

• jQuery: исправлено поведение $.fn.offset() для элементов внутри теневого дерева (pull request ^[4]), исправляет работу всплывающих подсказок и целой кучи других jQuery плагинов
• WebComponents.js: исправлена обработка относительных путей в css файлах при наличии <base> (pull request ^[5])
• UIkit: модифицированы стили для работы внутри теневого дерева (Скрипт для конвертации, подходит к любым стилям ^[6])
• Polymer: патч, позволяющий наследовать компоненты с теми же именами (обсуждение ^[7])

В общем, поддержка Веб-Компонентов из коробки весьма основательная, но вся суть этого поста будет в последней модификации.

Наследовать Веб-Компоненты с теми же именами

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

<polymer-element name="test-element" extends="test-element">
    <template></template>
    <script>
        Polymer("test-element", {
            ready : function () {
                this.parent_method();
            }
        });
    </script>
</polymer-element>
<polymer-element name="test-element">
    <template></template>
    <script>
        Polymer("test-element", {
            parent_method : function () {
                alert("I'm your parent!")
            }
        });
    </script>
</polymer-element>

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

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

Для чего всё это?

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

В контексте CleverStyle CMS

Изачально это было придумано и реализовано для CleverStyle CMS (подробнее в документации ^[8]), но при желании использования в своих проектах соберите Polymer из этой ветки ^[9].
В рамках CleverStyle CMS есть понятие зависимостей между компонентами. Предположим, у вас есть модуль магазина (весьма реальный пример, разработка ведется в отдельной ветке ^[10]), интерфейс сделан с использованием Веб-Компонентов и вы хотите изменить страницу отображения товара.

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, подробнее о зависимостях и конфликтах ^[11].

После этого можно объявлять в Shop_item наследование отображения товара:

<polymer-element name="cs-shop-item" extends="cs-shop-item">
    <!--А здесь уже что вам угодно-->
</polymer-element>

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

<section data-date="0" data-id="1" data-in_stock="24" data-price="20" data-soon="0" is="cs-shop-item">
	<div id="images">
		<img alt="" src="http://cscms.org/storage/public/Plupload/2015-01-03/18/2_031854a812c6b264b.jpg">
		<img alt="" src="http://cscms.org/storage/public/Plupload/2015-01-03/18/2_035654a812ec26d24.jpg">
		<img alt="" src="http://cscms.org/storage/public/Plupload/2015-01-03/18/2_035654a812ec1c834.jpg">
	</div>
	<div id="videos">
		<a href="https://www.youtube.com/watch?v=rHBxJCq99jA"> </a>
		<a href="https://www.youtube.com/watch?v=bmtbg5b7_Aw"> </a>
	</div>
	<h1>Boots</h1>
	<div id="description">
		<p>Nice boots</p>
	</div>
	<div id="attributes">
		<table>
			<tr>
				<td>Size</td>
				<td>2</td>
			</tr>
		</table>
	</div>
</section>

Заключение

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

Автор: nazarpc

Источник ^[12]