Download - Сергей Пузанков — Шаблонизаторы
![Page 1: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/1.jpg)
ШРИ
руководитель группыразработки поисковых интерфейсов
Шаблонизаторы
Сергей Пузанков
![Page 2: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/2.jpg)
Многообразие видов2
![Page 3: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/3.jpg)
Многообразие видов
• Задачи
3
![Page 4: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/4.jpg)
Многообразие видов
• Задачи– HTML
4
![Page 5: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/5.jpg)
Многообразие видов
• Задачи– HTML– текст
5
![Page 6: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/6.jpg)
Многообразие видов
• Задачи– HTML– текст– DOM
6
![Page 7: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/7.jpg)
Многообразие видов
• Задачи• Семантика
7
![Page 8: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/8.jpg)
Многообразие видов
• Задачи• Семантика
– интерполяция строк
8
![Page 9: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/9.jpg)
Многообразие видов
• Семантика– интерполяция строк
9
"Шоколад ни в чем не виноват, %username%."
![Page 10: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/10.jpg)
Многообразие видов
• Задачи• Семантика
– интерполяция строк-Mustache-Handlebars-Dust-Jade-…
10
![Page 11: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/11.jpg)
![Page 12: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/12.jpg)
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind
12
![Page 13: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/13.jpg)
Многообразие видов
• Семантика– data bind
13
var html = 'Шоколад ни в чем не виноват,' + '<span class="name"/>.' , data = { username: 'John Smith' } , map = plates.Map();
map.class('name').to('username');plates.bind(html, data, map);
![Page 14: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/14.jpg)
Многообразие видов
• Семантика– data bind
-Flatiron.js templates-Transparency-Angular.js-Pure
14
![Page 15: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/15.jpg)
![Page 16: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/16.jpg)
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind– live data bind
16
![Page 17: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/17.jpg)
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind– live data bind
-Knockout.js
17
![Page 18: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/18.jpg)
![Page 19: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/19.jpg)
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind– live data bind– data driven
19
![Page 20: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/20.jpg)
Многообразие видов
• Семантика– data driven
20
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
![Page 21: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/21.jpg)
Многообразие видов
• Семантика– data driven
21
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
Шоколад ни в чем не виноват, <username>John Smith</username>.Вы просто созданы для лепрозория, <username>veged</username>!
![Page 22: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/22.jpg)
Многообразие видов
• Семантика– data driven
22
Шоколад ни в чем не виноват, <span class="name">John Smith</span>.Вы просто созданы для лепрозория, <span class="name">veged</span>!
![Page 23: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/23.jpg)
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind– live data bind– data driven
-XSLT-BEMHTML
23
![Page 24: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/24.jpg)
![Page 25: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/25.jpg)
Многообразие видов
• Задачи• Семантика• Синтаксис
25
![Page 26: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/26.jpg)
Многообразие видов
• Задачи• Семантика• Синтаксис
– текст в финальном виде + вставки
26
![Page 27: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/27.jpg)
Многообразие видов
• Синтаксис– текст в финальном виде + вставки
27
<span class="name">[% username %]</span>
![Page 28: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/28.jpg)
Многообразие видов
• Задачи• Семантика• Синтаксис
– текст в финальном виде + вставки– сокращённый синтаксис
28
![Page 29: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/29.jpg)
Многообразие видов
• Синтаксис– текст в финальном виде + вставки– сокращённый синтаксис
29
span.name #{username}
![Page 30: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/30.jpg)
Многообразие видов
• Задачи• Семантика• Синтаксис
– текст в финальном виде + вставки– сокращённый синтаксис– предметно-ориентированный синтаксис
30
![Page 31: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/31.jpg)
Многообразие видов
• Синтаксис– текст в финальном виде + вставки– сокращённый синтаксис– предметно-ориентированный синтаксис
31
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
![Page 32: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/32.jpg)
Многообразие видов
• Синтаксис– текст в финальном виде + вставки– сокращённый синтаксис– предметно-ориентированный синтаксис
32
var html = 'Шоколад ни в чем не виноват,<span class="name"/>.' , data = { username: 'John Smith' } , map = plates.Map();
map.class('name').to('username');plates.bind(html, data, map);
![Page 33: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/33.jpg)
Многообразие видов
• Задачи• Семантика• Синтаксис• Базовый язык
33
![Page 34: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/34.jpg)
Многообразие видов
• Задачи• Семантика• Синтаксис• Базовый язык
– один базовый язык
34
![Page 35: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/35.jpg)
Многообразие видов
• Задачи• Семантика• Синтаксис• Базовый язык
– один базовый язык– компилируется в несколько языков
35
![Page 36: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/36.jpg)
Многообразие видов
• Задачи• Семантика• Синтаксис• Базовый язык
36
![Page 37: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/37.jpg)
Особенности в боевых условиях37
![Page 38: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/38.jpg)
Особенности
• возможности по программированию логики
38
![Page 39: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/39.jpg)
Особенности
• возможности по программированию логики– переменные
38
![Page 40: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/40.jpg)
Особенности
• возможности по программированию логики– переменные– циклы
38
![Page 41: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/41.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции
38
![Page 42: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/42.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды
38
![Page 43: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/43.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
38
![Page 44: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/44.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости
38
![Page 45: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/45.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг
38
![Page 46: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/46.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг• валидность "по построению"
38
![Page 47: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/47.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг• валидность "по построению"• асинхронность
38
![Page 48: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/48.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг• валидность "по построению"• асинхронность• вывод ошибок
38
![Page 49: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/49.jpg)
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг• валидность "по построению"• асинхронность• вывод ошибок• инфраструктура
38
![Page 50: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/50.jpg)
Заключение
![Page 51: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/51.jpg)
![Page 52: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/52.jpg)
• Низкий порог входа
![Page 53: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/53.jpg)
• Низкий порог входа• Небольшая выразительность
![Page 54: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/54.jpg)
• Низкий порог входа• Небольшая выразительность• Текстовая ориентированность
![Page 55: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/55.jpg)
![Page 56: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/56.jpg)
• Средний порог входа
![Page 57: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/57.jpg)
• Средний порог входа• Больше выразительность
![Page 58: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/58.jpg)
• Средний порог входа• Больше выразительность• Предметная ориентированность
![Page 59: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/59.jpg)
![Page 60: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/60.jpg)
• Высокий порог входа
![Page 61: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/61.jpg)
• Высокий порог входа• Большая выразительность
![Page 62: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/62.jpg)
• Высокий порог входа• Большая выразительность• Предметная ориентированность
![Page 63: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/63.jpg)
руководитель группыразработкипоисковых интерфейсов
Спасибо!
Сергей Пузанков
@puzankovcom
![Page 64: Сергей Пузанков — Шаблонизаторы](https://reader034.vdocuments.pub/reader034/viewer/2022052509/55a986f41a28ab6b248b4673/html5/thumbnails/64.jpg)
Домашнее задание53