Можливе життя без шаблонизатора?

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

Практично завжди описуючи пристрій CleverStyle CMS у кого-то виникало питання, а як же налаштовувати зовнішній вигляд, адже немає жодних шаблонів.
Треба зізнатися, я трохи лукавив, кажучи, що зовнішній вигляд можна змінити за допомогою CSS. Змінити можна, але не кардинально.
Шаблонизатора як не було, так і немає, і навіть не планується. Замість цього для генерації простого HTML використовується BananaHTML, а сам інтерфейс лягає на плечі Веб-Компонентів і Polymer.

Як я докотився до такого життя

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

Першокласна підтримка Веб-Компонентів

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

  • jQuery: виправлено поведінку $.fn.offset() для елементів всередині тіньового дерева (pull request), виправляє роботу спливаючих підказок і цілої купи інших jQuery плагінів
  • WebComponents.js: виправлена обробка відносних шляхів в css файли при наявності
    <base>
    (pull request
  • UIkit: модифіковані стилі для роботи всередині тіньового дерева (Скрипт для конвертації, підходить до будь-яких стилів
  • Polymer: патч, що дозволяє успадковувати компоненти з тими ж іменами (обговорення
Загалом, підтримка Веб-Компонентів з коробки досить ґрунтовна, але вся суть цього посту буде в останній модифікації.

Успадковувати Веб-Компоненти з тими ж іменами

Це не виправлення проблем сумісності чи багів, на відміну від інших патчів, а нова корисна функціональність.
Виглядає в цілому так:

<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 (детальніше в документації), але при бажанні використання у своїх проектах зберіть 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 спадкування відображення товару:

<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 чи ні, всі патчі відкриті і доступні, так що я рекомендую всім спробувати і висловити свою думку в коментарях.
За Веб-Компонентами майбутнє!
Веб-компонентами користуєтеся?

/>
/>


<input type=«radio» id=«vv64537»
class=«radio js-field-data»
name=«variant[]»
value=«64537» />
Ні, і не збираюся
<input type=«radio» id=«vv64539»
class=«radio js-field-data»
name=«variant[]»
value=«64539» />
Ні, буду використовувати коли підтримка браузерами буде краще
<input type=«radio» id=«vv64541»
class=«radio js-field-data»
name=«variant[]»
value=«64541» />
Вже використовую, полифиллы працюють досить добре
<input type=«radio» id=«vv64543»
class=«radio js-field-data»
name=«variant[]»
value=«64543» />
Що таке Веб-Компоненти О_о?

Проголосувало 9 осіб. Утрималося-2 людини.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.