polymer - new era of web development
TRANSCRIPT
POLYMERNew Era
of Web Development
ЧТО ТАКОЕ POLYMER?
Elements
Core(polymer.js)
Foundation(platform.js)
Библиотека, которая используетновейшие веб-технологии
для создания пользовательских HTML элементов
ЧТО ТАКОЕ POLYMER?
Elements
Core (polymer.js)
Foundation (platform.js)
ВСЕ ЕСТЬ ЭЛЕМЕНТ
ВСЕ ЕСТЬ ЭЛЕМЕНТLayout
Data
View
Services/libs
<polymer-layout><polymer-flex-layout><polymer-grid-layout>
<polymer-media-query><polymer-page>
<polymer-localstorage><polymer-xhr><polymer-jsonp><polymer-file><polymer-meta>
<your-custom-lib><google-doc><google-map><google-youtube><google-sheets>
ЗАГЛЯНЕМ ГЛУБЖЕ
ЗАГЛЯНЕМ ГЛУБЖЕ
Декларирование элемента
ЗАГЛЯНЕМ ГЛУБЖЕ
Шаблон элемента
ЗАГЛЯНЕМ ГЛУБЖЕ
Shadow DOM
ЗАГЛЯНЕМ ГЛУБЖЕ
Code and logic…
ПОДРОБНЕЕ О ВЕБ-КОМПОНЕНТАХ (ШАБЛОНЫ)
http://www.html5rocks.com/en/tutorials/webcomponents/template/
• Поведение как у привычных шаблонов• Контент шаблона инертен (не происходит подгрузки внешних элементов) пока шаблон не активирован
• Не возникает краевых эффектов с внешними элементами• Как-бы «не в документе» - селекторы его не возвращают содержимое шаблона
Shadow DOM
Всем выйти из сумрака!
http://illustrators.ru/illustrations/195271
SHADOW DOM
…
… childchild
shadow host
Document TreeShadow Trees
Shad
ow
shadow root
chil chil…
… …
…
множество DOM деревьев в пределах родительского
SHADOW DOM
• Light DOM
SHADOW DOM
• Light DOM
• Shadow DOM
Light DOM + Shadow DOM = Logical DOM (с этим работает разработчик)
SHADOW DOM
• Light DOM
• Shadow DOM
• Composed (rendered) DOM
Браузер использует Composed DOM для вывода на странице
SHADOW DOMPolymer позволяет перейти
на светлую сторону от императивной работы с Shadow DOM к декларативной
HTML IMPORTS
• Нативные способы доставки ресурсов(<script src>, <link rel="stylesheet">, <img>, <video>, <audio>)
• А если нужно доставить HTML?
• <iframe>
• AJAX (xhr.responseType = ‘document')
• CrazyHacks™ (<script type="text/html">)
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
HTML IMPORTS• Веб-компоненты позволяют делать это проще
• … даже с другого домена
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
HTML IMPORTS• Мы хотим больше! (HTML/CSS/JS)
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
HTML IMPORTS• А что с производительностью?
• Vulcanize (https://github.com/Polymer/vulcanize)
• активно используется кэширование браузера
• асинхронная загрузка компонентов
• импорты не блокируют парсинг
• импорты не заставляют компонент «исполняться» сразу
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
DATA BINDING• Двусторонняя (two-way) связка данных
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Экземпляры одного шаблона
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Итеративные шаблоны
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Шаблоны с условием
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Использование шаблонов по ссылке
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Использование шаблонов по ссылке … или так
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Binding to text
• Binding to attributes
• Binding to input values<input>, <select>, <option>, <textarea>
DATA BINDING {{ВЫРАЖЕНИЯ}}
• Устраняет использование сложной логики в представлениях (view)
• Выражения не являются скриптом
• Не вставляют HTML (позволяют избежать XSS)
• Поддерживают вложенность
DATA BINDING ДЕКЛАРАТИВНЫЕ ОБРАБОТЧИКИ СОБЫТИЙ
DATA BINDING АВТОМАТИЧЕСКИЙ ПОИСК ЭЛЕМЕНТА
СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ
СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ• Polymer умеет вставлять файлы стилей в элементы
(нативный Shadow DOM это НЕ умеет)
СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ• Polymer умеет вставлять файлы стилей в элементы
(нативный Shadow DOM это НЕ умеет)
Разворачивается в
НАТИВНАЯ ПОДДЕРЖКА
POLYMER
Elements
Core (polymer.js)
Foundation (platform.js)
когда все браузеры реализуют спецификацию
этот слой станет не нужен
ЧТО ЕСТЬ УЖЕ СЕЙЧАС?
• Core Elements
• Paper Elements (+Material Design)
• Community Elements (Github, etc…)
POLYMER DESIGNER
Создание прототипов простым перетаскиванием
https://www.polymer-project.org/tools/designer/
СПАСИБО ЗА ВНИМАНИЕ• https://www.polymer-project.org/• https://plus.google.com/+PolymerProject• http://customelements.io/• http://habrahabr.ru/post/180377/
Кириллов АлександрTwitter : @saratovsourceLinkedIn: ru.linkedin.com/in/kirillovalexander/