Сергей Максимов — BEMTREE — генерируй дерево
•
0 gefällt mir•1,744 views
Рассказ о том, как мы дошли до двухпроходной шаблонизации. Как можно шаблонизировать данные, если не верстка, а структура диктует построение шаблонов. И как мы генерируем БЭМ-дерево с помощью технологии BEMTREE.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ähnlich wie Сергей Максимов — BEMTREE — генерируй дерево
Ähnlich wie Сергей Максимов — BEMTREE — генерируй дерево (8)
Mehr von Yandex
Mehr von Yandex (20)
Сергей Максимов — BEMTREE — генерируй дерево
- 1. BEMTREE – генерируй дерево Сергей Максимов BEMup в рамках YaC 2013, Москва
- 6. TT: шаблон [% SET title = 'Hello World' %] <h1>[% title %]</h1> 6
- 7. TT: конструкции [% IF name == 'admin' %] <button>Drop DB</button> [% END %] [% FOREACH i IN items %] * [% i %] [% END %] 7
- 8. TT: шаблон посложнее [%~ MACRO b_banner_preview(options) BLOCK; ~%] <div class="[% class.join(' ') %]"> b_banner_preview__title(options); b_banner_preview__body(options); b_banner_preview__footer(options); b_banner_preview__alert(options) IF options.alert; </div> [%~ END; ~%] 8
- 14. Template Toolkit 2 Плюсы простой без компиляции возможны perl-вставки Минусы медленный невыразительный 14
- 15. Двухпроходная шаблонизация data ctx view ctx view 15
- 17. BEMJSON – JavaScriptпредставление БЭМ-дерева 17
- 18. BEMJSON: page { block: 'page', content: [ { elem: ‘head’, content: [...] }, { elem: ‘body’, content: [...] } ] } 18
- 20. priv.js – технология геренации БЭМ-дерева с использованием чистого JavaScript 20
- 21. priv.js blocks[‘page’] = function(data) { var title = data.title; return { block: ‘page’, title: title, content: blocks[‘page__body’](data) } } 21
- 23. BEMTREE – технология генерации БЭМ-дерева, синтаксически схожа с BEMHTML 23
- 27. BEMJSON: page { block: 'page', content: [ { elem: ‘head’, content: [...] }, { elem: ‘body’, content: [...] } ] } 27
- 28. BEMTREE: page block page { content: [ { elem: ‘head’ }, { elem: ‘body’ } ] } 28
- 29. BEMTREE: page__head block page, elem head, content: [ { elem: ‘meta’, name: ‘keywords’, content: ‘bem bemup javascript’ }, { elem: ‘title’, content: this.data.title } ] 29
- 30. BEMTREE: page__head block page, elem head, content: [ { elem: ‘meta’, name: ‘keywords’, content: ‘bem bemup javascript’ }, { elem: ‘title’, content: this.data.title } ] 30
- 31. BEMTREE: page__body block page, elem body { content: ‘default content’ content, this.data.page == ‘search’: [ ... ] } 31
- 32. BEMTREE: page__body block page, elem body { content: ‘default content’ content, this.data.page == ‘search’: [ ... ] } 32
- 33. BEMTREE. Асинхронность Блоки умеют ходить за данными 33
- 36. Сергей Максимов Руководитель группы интерфейсов Справочника и Директа @dosyara ddos@yandex-team.ru 36