Сергей Пузанков — Шаблонизаторы

ШРИ

руководитель группыразработки поисковых интерфейсов

Шаблонизаторы

Сергей Пузанков

Многообразие видов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

Заключение

• Низкий порог входа

• Низкий порог входа• Небольшая выразительность

• Низкий порог входа• Небольшая выразительность• Текстовая ориентированность

• Средний порог входа

• Средний порог входа• Больше выразительность

• Средний порог входа• Больше выразительность• Предметная ориентированность

• Высокий порог входа

• Высокий порог входа• Большая выразительность

• Высокий порог входа• Большая выразительность• Предметная ориентированность

руководитель группыразработкипоисковых интерфейсов

puzankov@yandex-team.ru

Спасибо!

Сергей Пузанков

@puzankovcom

Домашнее задание53