Downloaded 22 times
Uploaded byRoman Dvornov
DOM-шаблонизаторы – не только "быстро"
Документ обсуждает технологии дом-шаблонизации и их преимущества в создании динамических интерфейсов веб-приложений. Основное внимание уделяется различиям между строковыми и дом-шаблонизаторами, а также процессам генерации и обновления DOM. Также рассматриваются примеры использования в различных фреймворках и важность оптимизации при работе с DOM.
More Related Content
Similar to DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"
- 1. DOM-шаблонизаторы – нетолько «быстро» Июнь 2014 Роман Дворнов Ostrovok.ru
- 2. О себе • Работаюв ostrovok.ru • Автор basis.js 2
- 3. Сегодня мы создаем динамическиеинтерфейсы 3
- 4.
- 5. Построение интерфейса = создание DOM-фрагментов иих композиция 5
- 6. Что можно использоватьдля создания DOM-фрагментов? 6
- 7. Что можно использоватьдля создания DOM-фрагментов? • Руки ;) 6
- 8. Что можно использоватьдля создания DOM-фрагментов? • Руки ;) • String-шаблонизаторы 6
- 9. Что можно использоватьдля создания DOM-фрагментов? • Руки ;) • String-шаблонизаторы • DOM-шаблонизаторы 6
- 10.
- 11.
- 12. Описание шаблона = наборстрок + инструкции 9
- 13. 10 <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div> …+ title + … + body + … String-шаблонизаторы Описание (handlebars) Интерпретация
- 14. Не известно какаяв итоге получится DOM-структура и как она будет меняться 11
- 15. Зато достаточно универсальный подход, аHTML частный случай 12
- 16. Строковые шаблонизаторы производят функции, которыепроизводят строки 13
- 17. После этого innerHTML+ пост-процессинг 14
- 18. Пост-процессинг • Получение ссылокна элементы • Навешивание обработчиков событий • Модификация DOM (использование jQuery-like плагинов, вставка DOM фрагментов etc) • и т.д. 15
- 19.
- 20. Процесс • герерация HTML •innerHTML • пост-процессинг 17 Создание Обновление • генерация HTML • innerHTML • пост-процессинг
- 21. Процесс • герерация HTML •innerHTML • пост-процессинг 17 Создание Обновление • генерация HTML • innerHTML • пост-процессинг =
- 22.
- 23. 19 Описание шаблона = DOMузлы + инструкции
- 24.
- 25. Известно какая будет DOM-структура и как будет меняться 21
- 26. ... еще допостроения нативного DOM 22
- 27. Ориентированы на работу сDOM* 23 * Но не обязательно производят только DOM
- 28.
- 29. Знания о DOMструктуре позволяют использовать оптимизации 25
- 30. Например • cloneNode(true) –быстрое создание DOM-фрагмента • обработка событий через один глобальный capture-обработчик на документе для каждого уникального события 26
- 31. Процесс • построение DOM-фрагментаили cloneNode(true) • DOM-операции 27 Создание Обновление • DOM-операции
- 32.
- 33. Могут проигрывать пригенерации больших фрагментов неизменяемой верстки 29
- 34. Но выигрывают на генерацииповторяющихся фрагментов 30
- 35. TodoMVC 31 100 items 1000items AngularJS 125 ms 1491 ms Backbone 53 ms 510 ms Knockout 39 ms 489 ms jQuery 20 ms 184 ms Backbone + basis.js templates 18 ms 202 ms basis.js 8 ms 95 ms
- 36.
- 37. Подробнее в докладе Какпостроить DOM 33 tinyurl.com/build-dom
- 38. Уже используется в... • Ractive • Basis.js • Ember: HTMLBars (в разработке) • Meteor • React* 34 * нет шаблонизатора, но внутри DOM-подход
- 39. Не холивара ради… 35 DOMString Универсальноерешение для сайтов и приложений, подходит для сервера и клиента Оптимально для больших динамических одностраничных приложений
- 40.
- 41.
- 42.
- 43.
- 44. В коде • Абстрагируемсяот верстки • Нет селекторов • Нет указания CSS классов, имен тегов • Нет HTML • Нет стилей 40
- 45. Не знаем оразметке и как используются значения 41
- 46. 42 <div{el} class="example"> {text} </div> { el: <div>, text:#text, set: function(name, value){ // black magic box } } Описание Интерфейс к экземпляру Работаем с интерфейсом Отдаем значения, но что там происходит не знаем
- 47. Не знаем какиеклассы в разметке, не используем селекторы в JavaScript 43
- 48. 44 <div{el} class="example"> <h1>{text}</h1> <ul{content}/> </div> el =fragment.firstChild text = el.firstChild.firstChild content = el.lastChild Описание Получение ссылок Жизнь без селекторов (пути генерирует шаблонизатор)
- 49.
- 50. 46 <b:style src="block.css"/> ! <div class="blockblock_{hidden}"> {caption} </div> Подключение стилей .block { ... } .block_hidden { ... } block.cssblock.tmpl
- 51.
- 52. 48 <b:style src="./example.css"/> <div class="wrapper"> <b:includesrc="./button.tmpl"> <b:after ref="caption"> {count}</b:after> </b:include> </div> Включение шаблонов Результат example.tmpl <b:style src="./button.css"/> <b:style src="./example.css"/> <div class="wrapper"> <button class="button"> {caption} {count} </button> </div> <b:style src="./button.css"/> <button class="button"> {caption} </button> button.tmpl
- 53.
- 54. 50 <b:style src="option.css"/> ! <div class="xo-bookings-change-status-popup-option xo-bookings-change-status-popup-option_{disabled} xo-bookings-change-status-popup-option_{hidden}"> <spanclass="xo-bookings-change-status-popup- option__caption xo-bookings-change-status-popup- option__caption_{selected}"> {title} </span> </div> До
- 55. 51 <b:style src="option.css"/> <b:isolate/> ! <div class="option{disabled} {hidden}"> <span class="caption caption_{selected}"> {title} </span> </div> После
- 56.
- 57.
- 58. Но фишка нетолько в префиксах… 54
- 59.
- 60. 56 Безопасное дополнение стилей <b:stylesrc="./button.css"/> <button class="button"> click me </div> button.tmpl <b:isolate/> <b:style> .button { color: green; } </b:style> <b:include src="./button.tmpl"/> ok-button.tmpl <b:isolate/> <b:style> .button { color: red; } </b:style> <b:include src="./button.tmpl"/> cancel-button.tmpl
- 61. 57 <b:isolate/> <b:style> .abc-foo { color:red; } .xyz-foo { color: blue; } </b:style> <div class="panel"> <b:include src="./foo.tmpl" isolate="abc-"/> <b:include src="./foo.tmpl" isolate="xyz-"/> </div> Изоляция включений <b:style src="./foo.css"/> <div class="foo"> example </div> example.tmpl foo.tmpl
- 62. 58 Изоляция включений: результат <b:stylesrc="./foo.css?prefix=hs83shyf_abc-"/> <b:style src="./foo.css?prefix=hs83shyf_xyz-"/> <b:style> .hs83shyf_abc-foo { color: red; } .hs83shyf_xyz-foo { color: blue; } </b:style> <div class="hs83shyf_panel"> <div class="hs83shyf_abc-foo"> example </div> <div class="hs83shyf_xyz-foo"> example </div> </div>
- 63. 59 Пространства имен <b:style src="./bootstrap.css"ns="bt"/> <b:style src="./glyphs.css" ns="glyph"/> <b:style src="./style.css"/> ! <div class="glyph:active bt:active active"> ... </div> (Побочный продукт методики)
- 64. Гарантия уникальности классов = болеесильные оптимизации 60
- 65. 61 Например <b:isolate/> <b:style src="./style.css"/> <div class="foobar"> .. </div> .foo { color: red; width: 100px; } .bar { color: green; } example.tmpl style.css
- 66. 62 Оптимизация: слияние стилей <b:isolate/> <b:stylesrc="./style.css"/> <div class="baz"> .. </div> .baz { /* color: red; */ width: 100px; color: green; } example.tmpl style.css
- 67.
- 68. «Эээ… но унас же есть Web Components…» 64 Кто-то из зала
- 69. Все таки ихпока нет* ;) 65 * в процессе разработки и имплементации
- 70. Web Components – деклативнаяобертка для инкапсулированных ресурсов (DOM, CSS, JS) 66 В моем понимании
- 71. В простом случае: ! 1DOM фрагмент + DOM-манипуляции* 67 * мог бы делать шаблонизатор
- 72. В комплексном случае: ! Многофрагментов + возвращаемся к проблеме шаблонизации 68
- 73. Web Components 69 Хорошо длявиджетов (проигрыватели, карты и т.д)
- 74. Web Components 70 Не решаетпроблем самих компонент и приложений
- 75. Не совсем прошаблонизатор, но мы храним шаблоны в отдельных файлах 71 И остальные тоже скоро будут так делать ;)
- 76.
- 77. Live update – обновлениеDOM-фрагментов без перезагрузки страницы 73
- 78. 74 <div class="sidebar"> ... <ul class="list"> <li>item1</li> <li>item 2</li> </ul> ... </div> <div class="list-wrapper"> <h2>Header</h2> <ul class="list"> </ul> </div> Замена DOM-фрагмента Старый DOM Новый DOM
- 79. 74 <div class="sidebar"> ... <ul class="list"> <li>item1</li> <li>item 2</li> </ul> ... </div> <div class="list-wrapper"> <h2>Header</h2> <ul class="list"> </ul> </div> insertBefore Замена DOM-фрагмента Старый DOM Новый DOM
- 80. 74 <div class="sidebar"> ... <ul class="list"> <li>item1</li> <li>item 2</li> </ul> ... </div> <div class="list-wrapper"> <h2>Header</h2> <ul class="list"> </ul> </div> replaceChild insertBefore Замена DOM-фрагмента Старый DOM Новый DOM
- 81. Live update экономит времяи разгоняет разработку 75
- 82.
- 83.
- 84. 78 Результат basis.template.theme('base').define({ foo: resource('path/to/file.tmpl'), ... }); basis.template.theme('myTheme').define({ foo: resource('path/to/file.tmpl'), ... }); ! varview = new basis.ui.Node({ template: basis.template.get('foo'), ... }); Набор шаблонов базовой темы Еще одна тема Использование шаблона по имени
- 85. Тема = HTML+ CSS 79
- 86. Тоже без перезагрузки страницы 80 Ноэто побочный эффект ;)
- 87. Экземпляры шаблонов хранят мета-информацию* 81 *только в dev-режиме
- 88. Это дает возможность определятьк какому шаблону относится DOM-узел 82
- 89. Heat map показывает гдеи как часто меняется DOM 83
- 90.
- 91.
- 92. Анализ и выявлениепроблем • какие классы используются в разметке, но их нет в стилях • какие селекторы никогда не сработают • конфликты стилей • и т.д. 86
- 93. Оптимальная сборка • Минимизацияклассов • Удаление разметки и стилей, которые не используются • и т.д. 87
- 94.
- 95. И все благодаряDOM 89
- 96. В строковых шаблонизаторах многоеиз этого невозможно или крайне сложно 90
- 97.
- 98. Главное начать думатьв терминах DOM 92
- 99.
- 100.