4. Шаблоны — схема преобразования данных из одного формата в другой.
Функция (отображение, оператор, преобразование) — связь между
элементами множеств.““
4
5. function processor(template, data) { };
var fn = processor.bind(undefined, template);
var fn = processor.compile(template);
fn(data) processor(template, data); true
01.
02.
03.
04.
5
7. «Родословная» шаблонизаторов
— Текстовые препроцессоры (и препроцессоры для кода; C 1972)
— Скриптовые языки (e.g. SmallTalk 1969-1980; Perl 1988; Lua 1993)
— Веб-серверы и CGI (CERN httpd 1990; NCSA HTTPd 1993; Apache 1995)
— Простейшие (PHP/FI 1995; TT2 1996)
— Классические (XSLT 1999; WebMacro/Velocity 1999; Smarty 2000; etc.)
Smarty — шаблонизатор, написанный на бывшем шаблонизаторе.
7
8. Полезности
— Декомпозиция и DRY — разделение кода на куски;
— отделение view от логики (MVC? не, не слышал);
— простота и красота — синтаксический «сахар»;
— «царапки» — защита от дурака;
— хелперы — вспомогательные методы для вывода.
Как итог: разделение ответственности и новая профессия.
8
19. Проблемы императивного подхода
— Несоразмерный рост сложности модели вычислений;
— предсказать результат работы — крайне сложно;
— большинство таких шаблонизаторов — синтаксический «сахар».
Ой-ой.
19
20. Предписания или декларативный подход
— Представители: HTML, CSS, SQL, XSLT;
— описывают желаемые результаты, а не процесс их достижения;
— часто детерминированность и функциональная чистота;
— порядок инструкций в блоке не важен.
XML + XSLT— наше все?
Структурированный JSON + Plates, Yate, BEMXJST, BH — тоже вариант.
20
21. Пример HTML-кода еще раз
<h2 class="caption">Heading</h2>
<ul class="people">
<li class="people__person">John</li>
<li class="people__person">Malkovich</li>
<li class="people__person last">Doe</li>
</ul>
01.
02.
03.
04.
05.
06.
07.
08.
09.
21
27. Проблемки декларативного подхода?
— Входные данные нужно готовить;
— сносит голову — функциональщина близко;
— медленнее, при использовании в лоб.
27
28. Еще раз о различиях
Императив
— Последовательное исполнение
— Описывается процесс
— Циклы и условия
— Присваивание переменных
Декларатив
— Порядок не важен
— Описывается результат
— Цепочки вызовов примитивов
— Монады и гонады
Любая программа балансирует между императивом и декларативом.
28
30. Строковые vs DOM-шаблонизаторы
— Строковые на клиенте — медленно;
— DOM-шаблонизаторы на сервере — боль.
Хороший шаблонизатор должен быть многостаночником.
30
31. Предметная ориентация
Разделение классического подхода на 2 преобразования.
— Построение view-ориентированной структуры
(энтропия, грязные функции, получение данных из окружения);
— Преобразование в HTML-строку с разметкой сущностей;
— Преобразование в DOM-ноды на клиенте.
Компоненты — абстракция в различных технологиях над DOM.
31
37. Компиляция и среда выполнения
Компиляция — преобразование кода шаблонов в исполняемый код.
«Рантайм» — запускает код или предоставляет функционал.
— Статический анализ — проверяет, структуризует и ускоряет код;
— декларативный код — проще разбирается, шире маневр.
Императивность в деталях — допустима, но чувствуйте грань.
37
38. Энтропия и побочные-эффекты
Примеры: Date , Math.random , XHR.* , global.* .
— Медленнее;
— проблемы с отладкой (и тестами);
— нельзя параллелить;
— нельзя кешировать.
Непредсказуемы, что с них взять? В мусор!
38
39. Изоморфизм
Рендеринг одних шаблонов и на сервере, и на клиенте.
— 2 среды выполнения — для каждого окружения;
— 1 среда выполнения ( !), и компиляция;
— Компиляция вместе с «рантаймом» (жыр).
DOM-деревья, кеширование, «VirtualDOM»?
Несколько рендеров, чистые функции, персистентные хранилища.
39
40. Попахивает функциональщиной...
— Чистые функции (без энтропии);
— запоминание результатов (мемоизация);
— персистентные хранилища (immutable.js);
— новый уровень абстракции.
Может еще и параллелить? Камень зря простаивает. Temple?
40
44. Идеальный веб-шаблонизатор
— предметная ориентированность;
— чистота шаблонов («сахар»);
— модульность (частичная отрисовка);
— легкий и быстрый рантайм;
— чистота и независимость от внешней среды;
— инфраструктура и удобство разработки;
Nota bene: Скорость разработки VS масштабируемость VS поддержка.
44
45. Предметно-ориентированные кандидаты
— React JSX: императивный, JSX, VirtualDOM, строки и DOM;
— BH: более декларативный, JS, чистый, строки или BEMJSON;
— BEMHTML: еще более декларативный, свой/JS, чистый, строки;
— Basis: смешанный, HTML+, строки и DOM;
— Temple?
45