Как мы всех на юх послали (ну или продолжение истории про шаблонизотор) / Хабр

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

И такая вот хрень довольно часто происходит в нашем непростом, безумном, но весьма веселом мире технологий. В моем конкретном случае – в мире веб-разработки.

Позавчера был JQ. Ну полезная ей богу вещица. Но стали появляться специалисты искренне считающие, что JQ – это часть JavaScript и что без оного привязка событий к узлам вовсе невозможна (шепот в зале: потомушта там какие-то проблемы с кроссбраузерностью, цссс). И стали возводиться церкви с храмами, и стал JQ с икон на нас грешных смотреть, и книги писались с названием «Программируем JQuery» (JQ «программируем», Карл!).

А вчера был AngularJS. И был он великим, потому что стоит за ним… Ага он самый и стоит.

А сегодня вот ReactJS. Вообще наше все. Почему? Потому что он хороший, потому что он правильный, потому что он против прямого доступа к DOM. А почему? А потому что неправильно к DOM обращаться! А почему? Мальчик, иди в ж#пу!

Нет, Друзья, не подумайте – у меня вовсе не накипело – поверьте, я брал призовые места на конкурсах лояльности. Просто всему свое место и свое назначение. Палить из танка, пытаясь прихлопнуть муху – это как-то несерьезно. Но в какой-то момент мы начинаем именно это и наблюдать, когда под простенький проект подтягивается пол мегабайта JavaScript (с исходниками на TypeScript, потому что на JS уже никто не пишет и не спрашивайте «почему» — ответ был абзацем выше).

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

Меж тем мне с командой повезло. И как уже отмечалось в предыдущем посте, было мне позволено параллельно развивать простенький шаблонизатор. Хотя что-то мне подсказывает, что у компании на сей счет есть свои собственные сугубо эгоистичные интересы )).

В общем со времени его первого явления публики, а именно через пять месяцев, шаблонизатор претерпел существенные изменения. О чем и будет данная заметка (гул в зале: все расходимся, это не про ReactJS и даже не об Angular). Стойте! Я еще обязательно несколько раз скажу слово «React».

Итак, главное, что было сделано – большое объединение параллельных проектов. Теперь одна (немаленькая) библиотека объединяет в себе:

Аналог RequireJS
Загрузчик ресурсов (вроде CSS файлов)
Контролер кэша
Всякий базовый функционал (вроде AJAX запросов, инструментов по работе с DOM, CSS и прочее)
Ну и шаблонизатор, речь то о нем

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

Вот, например, нужна Вам банальная таблица. И есть у вас API некий, что данные в JSON выдает. Берем и рисуем отдельный HTML файлик с шаблоном. И стили нужные прикрепить не забываем.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Flex.Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="pattern.css" />
</head>
<body>
    <table data-type="Demo.Table">
        <tr>
            <th>{{titles.column_0}}</th>
            <th>{{titles.column_1}}</th>
            <th>{{titles.column_2}}</th>
            <th>{{titles.column_3}}</th>
        </tr>
        <tr {{[rows]}}>
            <td>{{column_0}}</td>
            <td>{{column_1}}</td>
            <td>{{column_2}}</td>
            <td>{{column_3}}</td>
        </tr>
    </table>
</body>
</html>

Теперь, там, где сие необходимо, рендерим наш шаблон

_patterns.get({
    //Ссылка на шаблон
    url         : '/components/table.simple/component.html',
    //Указание куда "крепить"
    node        : document.body,
    //Собственно контент
    hooks       : {
        titles  : {
            column_0: 'Column #0',
            column_1: 'Column #1',
            column_2: 'Column #2',
            column_3: 'Column #3',
        },
        //Ссылка на данные для строк таблицы
        rows: _patterns.url('/examples/json/table.json')
    },
}).render();

Вот собственно и все (тута результат). И что особенно приятно, так это то, что шаблон можно открыть локально и отладить (спокойно, не спеша и не отвлекаясь) стили – ведь перед нами банальная HTML страница.

Конечно, можно данные и ручками ввести.

var data_source = [];
for (var i = 0; i < 100; i += 1) {
    data_source.push({
        column_0: (Math.random() * 1000).toFixed(4),
        column_1: (Math.random() * 1000).toFixed(4),
        column_2: (Math.random() * 1000).toFixed(4),
        column_3: (Math.random() * 1000).toFixed(4),
    });
}
_patterns.get({
    url     : '/patterns/table/single/pattern.html',
    node    : document.body,
    hooks   : {
        titles: {
            column_0: 'Column #0',
            column_1: 'Column #1',
            column_2: 'Column #2',
            column_3: 'Column #3',
        },
        rows: data_source
    }
}).render();

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--BEGIN: Patterns definitions-->
    <link rel="pattern" name="my_table" src="/html/table/template.html" data-hooks="rows, c_0, c_1, c_2, c_3" />
    <!--END: Patterns definitions-->
</head>
<body>
    <my_table>
        <rows>
            <c_0>0.0</c_0>   <c_1>0.1</c_1>   <c_2>0.2</c_2>   <c_3>0.3</c_3>
            <c_0>1.0</c_0>   <c_1>1.1</c_1>   <c_2>1.2</c_2>   <c_3>1.3</c_3>
            <c_0>2.0</c_0>   <c_1>2.1</c_1>   <c_2>2.2</c_2>   <c_3>2.3</c_3>
            <c_0>3.0</c_0>   <c_1>3.1</c_1>   <c_2>3.2</c_2>   <c_3>3.3</c_3>
            <c_0>4.0</c_0>   <c_1>4.1</c_1>   <c_2>4.2</c_2>   <c_3>4.3</c_3>
        </rows>
    </my_table>
</body>

С разметкой вообще довольно удобные вещи делать можно. Есть у Вас, к примеру, коллекция вкладок, весьма увесистая, как эта:

<div class="tabs-container">
    <div class="tabs-buttons">
        <a class="tab-button">Tab 0</a>
        <a class="tab-button">Tab 1</a>
        <a class="tab-button">Tab 2</a>
    </div>
    <div class="tabs-content">
        <div class="tab-content">
           <p class="tab-content">Tab content 0</p>
        </div>
        <div class="tab-content">
           <p class="tab-content">Tab content 1</p>
        </div>
        <div class="tab-content">
           <p class="tab-content">Tab content 2</p>
        </div>
    </div>
</div>

Поместив сие в шаблон, то есть в отдельный HTML файл:

<div class="tabs-container">
    <div class="tabs-buttons">
        <a class="tab-button" {{[buttons]}} onclick="{{@onClick}}">{{button}}</a>
    </div>
    <div class="tabs-content">
        <div class="tab-content" {{[tabs]}}>{{tab}}</div>
    </div>
</div>

В разметке (на странице) с этим шаблоном cможем делать так:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--BEGIN: Patterns definitions-->
    <link rel="pattern" name="tabs" src="/html/tabs/template.html" data-hooks="buttons, tabs, button, tab" />
    <!--END: Patterns definitions-->
</head>
<body>
    <tabs>
        <buttons>
            <button>Tab 0</button>
            <button>Tab 2</button>
            <button>Tab 3</button>
        </buttons>
        <tabs>
            <tab><p>Content of tab 0</p></tab>
            <tab><p>Content of tab 1</p></tab>
            <tab><p>Content of tab 2</p></tab>
        </tabs>
    </tabs>
</body>

И читается легче и понятно интуитивно. Вкладки промо-сайта собственно так и сделаны.

Вся прелесть в том, что шаблоны все сохраняются локально на клиенте. То есть при повторной загрузки страницы, часть разметки этой самой страницы просто не будет загружена, а взята будет с клиента. Что также справедливо и для таких ресурсов как JS и CSS файлы. Исключительно в качестве эксперимента имеется и функция по полному кэшированию страницы, но это пока лишь эксперименты.

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

Много чего там можно делать, о чем почитать не возбраняется вот здесь (исключительно, если есть свободное время).

Однако отдельно замечу требования, которые выставлялись к Flex-Patterns при его разработке, что от части отражает возможности его использования.

первое и самое важное – только стандартный HTML, только текущий стандарт JS. То есть любой шаблон – это просто HTML файл и никаких прибул.
это чистое front-end решение, и, хотя шаблоны можно монтировать в разметку, Flex-Pattern является клиентским решением, а не серверным.
полная независимость от чего-либо. Достаточно подключить только Flex-Patterns, чтобы начать с ним работу и получить дополнительный базовый функционал (о котором было сказано выше).

Собственно, это и есть те три кита на которых базируется идея.

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

React нуждается в куче ~~обслуживающего персонала~~ дополнительного окружения (для нормальной и комфортной работы). Flex-Patterns полностью самодостаточен (и это не считая возможности создавать модули, наличия базового функционала вроде того, что JQ имеет и иных плюшек) – подцепил и работай.
React’у комфортно с npm, а Flex-Patterns даже не знает, что это такое.
React использует нечто похоже на HTML, но не HTML. Flex-Patterns основывается только на HTML и не требует знаний о defaultValue.
React в целом довольно недоверчив к разработчику и во многом его ограничивает (что, наверное, имеет свои плюсы). Flex-Patterns полностью доверяет тому, кто его ~~приютил~~ подключил к странице.
React работает шустрее. Flex-Patterns в целом на 25-35% медленнее, но «заметно» это на небольших шаблонах (скажем на таблице в 1000 строк), где скорость отрисовки у React 100 – 120 ms., а у Flex-Patterns 150 – 200 ms. Если же говорить об огромных объектах (вроде таблицы в 10 000 строк), то результат практически идентичен.
Памяти «кушают» оба соизмеримо.
React «мешает» разметку и логику, меж тем как Flex-Patterns настойчиво пытается ее разделить и раскидать по файликам (что может показаться неудобным), не допуская никакого кода внутри HTML.
React доверяет кэширование браузеру, Flex-Patterns паранойдально кэширует шаблоны самостоятельно.
Над React трудится «чуть» больше одного человека, над Flex-Patterns «чуть» меньше.
В React есть святое понятие state, а Flex-Patterns атеист и грешить разрешает.

А напоследок пара слов о будущем проекта (если кому интересно конечно). Проект вырос и его развитие все более и более трудоемкая задача. В ближайших планах – строгая диета, которая по моим оценкам позволит сбросить вес с ~200 кб до 120 – 170 кб (где первое есть голос оптимиста). Также в воздухе витает идея сделать тоже самое, но для JQ, что позволило бы получить на выходе библиотеку размером в 70 – 100 кб (не забывайте внутри не только шаблонизатор, а много еще чего, что по сути дублирует возможности JQ).

Однако без Вашей поддержки вряд ли обойтись. А! Испугались ))) Нет речь не о финансах. Просто мне выделят чуть больше времени под все это дело, если будут звездочки (я не вру, такое вот условие и выкатили). Для Вас – это клик, а для меня – дополнительная минутка на развитие этого создания. Спасибо заранее.

Счастья всем, добра и света.

ЗЫ. Учите React ;)