Сергей Бережной — Шаблонизаторы
TRANSCRIPT
ШРИ
руководитель отделаразработки поисковых интерфейсов
Шаблонизаторы
Сергей Бережной
Многообразие видов2
Многообразие видов
• Задачи
3
Многообразие видов
• Задачи– HTML
4
Многообразие видов
• Задачи– HTML– текст
5
Многообразие видов
• Задачи– HTML– текст– DOM
6
Многообразие видов
• Задачи• Семантика
7
Многообразие видов
• Задачи• Семантика
– интерполяция строк
8
Многообразие видов
• Семантика– интерполяция строк
9
"Шоколад ни в чем не виноват, %username%."
Многообразие видов
• Задачи• Семантика
– интерполяция строк-Mustache-Handlebars-Dust-Jade-…
10
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind
12
Многообразие видов
• Семантика– 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);
Многообразие видов
• Семантика– data bind
-Flatiron.js templates-Transparency-Angular.js-Pure
14
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind– live data bind
16
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind– live data bind
-Knockout.js
17
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind– live data bind– data driven
19
Многообразие видов
• Семантика– data driven
20
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
Многообразие видов
• Семантика– data driven
21
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
Шоколад ни в чем не виноват, <username>John Smith</username>.Вы просто созданы для лепрозория, <username>veged</username>!
Многообразие видов
• Семантика– data driven
22
Шоколад ни в чем не виноват, <span class="name">John Smith</span>.Вы просто созданы для лепрозория, <span class="name">veged</span>!
Многообразие видов
• Задачи• Семантика
– интерполяция строк– data bind– live data bind– data driven
-XSLT-BEMHTML
23
Многообразие видов
• Задачи• Семантика• Синтаксис
25
Многообразие видов
• Задачи• Семантика• Синтаксис
– текст в финальном виде + вставки
26
Многообразие видов
• Синтаксис– текст в финальном виде + вставки
27
<span class="name">[% username %]</span>
Многообразие видов
• Задачи• Семантика• Синтаксис
– текст в финальном виде + вставки– сокращённый синтаксис
28
Многообразие видов
• Синтаксис– текст в финальном виде + вставки– сокращённый синтаксис
29
span.name #{username}
Многообразие видов
• Задачи• Семантика• Синтаксис
– текст в финальном виде + вставки– сокращённый синтаксис– предметно-ориентированный синтаксис
30
Многообразие видов
• Синтаксис– текст в финальном виде + вставки– сокращённый синтаксис– предметно-ориентированный синтаксис
31
<xsl:template match="username"> <span class="name"> <xsl:apply-templates/> </span></xsl:template>
Многообразие видов
• Синтаксис– текст в финальном виде + вставки– сокращённый синтаксис– предметно-ориентированный синтаксис
32
var html = 'Шоколад ни в чем не виноват,<span class="name"/>.' , data = { username: 'John Smith' } , map = plates.Map();
map.class('name').to('username');plates.bind(html, data, map);
Многообразие видов
• Задачи• Семантика• Синтаксис• Базовый язык
33
Многообразие видов
• Задачи• Семантика• Синтаксис• Базовый язык
– один базовый язык
34
Многообразие видов
• Задачи• Семантика• Синтаксис• Базовый язык
– один базовый язык– компилируется в несколько языков
35
Многообразие видов
• Задачи• Семантика• Синтаксис• Базовый язык
36
Особенности в боевых условиях37
Особенности
• возможности по программированию логики
38
Особенности
• возможности по программированию логики– переменные
38
Особенности
• возможности по программированию логики– переменные– циклы
38
Особенности
• возможности по программированию логики– переменные– циклы– функции
38
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды
38
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
38
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости
38
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг
38
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг• валидность "по построению"
38
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг• валидность "по построению"• асинхронность
38
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг• валидность "по построению"• асинхронность• вывод ошибок
38
Особенности
• возможности по программированию логики– переменные– циклы– функции– инклуды– наследование
• оптимизации скорости• ескейпинг• валидность "по построению"• асинхронность• вывод ошибок• инфраструктура
38
Заключение
• Низкий порог входа
• Низкий порог входа• Небольшая выразительность
• Низкий порог входа• Небольшая выразительность• Текстовая ориентированность
• Средний порог входа
• Средний порог входа• Больше выразительность
• Средний порог входа• Больше выразительность• Предметная ориентированность
• Высокий порог входа
• Высокий порог входа• Большая выразительность
• Высокий порог входа• Большая выразительность• Предметная ориентированность
руководитель отделаразработкипоисковых интерфейсов
Спасибо
Сергей Бережной
@veged
github.com/veged
Домашнее задание54