Download - Polymer - New Era of Web Development
![Page 1: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/1.jpg)
POLYMERNew Era
of Web Development
![Page 2: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/2.jpg)
ЧТО ТАКОЕ POLYMER?
Elements
Core(polymer.js)
Foundation(platform.js)
Библиотека, которая используетновейшие веб-технологии
для создания пользовательских HTML элементов
![Page 3: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/3.jpg)
ЧТО ТАКОЕ POLYMER?
Elements
Core (polymer.js)
Foundation (platform.js)
![Page 4: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/4.jpg)
ВСЕ ЕСТЬ ЭЛЕМЕНТ
![Page 5: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/5.jpg)
ВСЕ ЕСТЬ ЭЛЕМЕНТ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>
![Page 6: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/6.jpg)
ЗАГЛЯНЕМ ГЛУБЖЕ
![Page 7: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/7.jpg)
ЗАГЛЯНЕМ ГЛУБЖЕ
Декларирование элемента
![Page 8: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/8.jpg)
ЗАГЛЯНЕМ ГЛУБЖЕ
Шаблон элемента
![Page 9: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/9.jpg)
ЗАГЛЯНЕМ ГЛУБЖЕ
Shadow DOM
![Page 10: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/10.jpg)
ЗАГЛЯНЕМ ГЛУБЖЕ
Code and logic…
![Page 11: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/11.jpg)
ПОДРОБНЕЕ О ВЕБ-КОМПОНЕНТАХ (ШАБЛОНЫ)
http://www.html5rocks.com/en/tutorials/webcomponents/template/
• Поведение как у привычных шаблонов• Контент шаблона инертен (не происходит подгрузки внешних элементов) пока шаблон не активирован
• Не возникает краевых эффектов с внешними элементами• Как-бы «не в документе» - селекторы его не возвращают содержимое шаблона
![Page 12: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/12.jpg)
Shadow DOM
Всем выйти из сумрака!
http://illustrators.ru/illustrations/195271
![Page 13: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/13.jpg)
SHADOW DOM
…
… childchild
shadow host
Document TreeShadow Trees
Shad
ow
shadow root
chil chil…
… …
…
множество DOM деревьев в пределах родительского
![Page 14: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/14.jpg)
SHADOW DOM
• Light DOM
![Page 15: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/15.jpg)
SHADOW DOM
• Light DOM
• Shadow DOM
Light DOM + Shadow DOM = Logical DOM (с этим работает разработчик)
![Page 16: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/16.jpg)
SHADOW DOM
• Light DOM
• Shadow DOM
• Composed (rendered) DOM
Браузер использует Composed DOM для вывода на странице
![Page 17: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/17.jpg)
SHADOW DOMPolymer позволяет перейти
на светлую сторону от императивной работы с Shadow DOM к декларативной
![Page 18: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/18.jpg)
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/
![Page 19: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/19.jpg)
HTML IMPORTS• Веб-компоненты позволяют делать это проще
• … даже с другого домена
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
![Page 20: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/20.jpg)
HTML IMPORTS• Мы хотим больше! (HTML/CSS/JS)
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
![Page 21: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/21.jpg)
HTML IMPORTS• А что с производительностью?
• Vulcanize (https://github.com/Polymer/vulcanize)
• активно используется кэширование браузера
• асинхронная загрузка компонентов
• импорты не блокируют парсинг
• импорты не заставляют компонент «исполняться» сразу
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
![Page 22: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/22.jpg)
DATA BINDING• Двусторонняя (two-way) связка данных
![Page 23: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/23.jpg)
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Экземпляры одного шаблона
![Page 24: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/24.jpg)
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Итеративные шаблоны
![Page 25: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/25.jpg)
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Шаблоны с условием
![Page 26: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/26.jpg)
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Использование шаблонов по ссылке
![Page 27: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/27.jpg)
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Использование шаблонов по ссылке … или так
![Page 28: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/28.jpg)
DATA BINDING (ТИПЫ СВЯЗЫВАНИЯ)
• Binding to text
• Binding to attributes
• Binding to input values<input>, <select>, <option>, <textarea>
![Page 29: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/29.jpg)
DATA BINDING {{ВЫРАЖЕНИЯ}}
• Устраняет использование сложной логики в представлениях (view)
• Выражения не являются скриптом
• Не вставляют HTML (позволяют избежать XSS)
• Поддерживают вложенность
![Page 30: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/30.jpg)
DATA BINDING ДЕКЛАРАТИВНЫЕ ОБРАБОТЧИКИ СОБЫТИЙ
![Page 31: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/31.jpg)
DATA BINDING АВТОМАТИЧЕСКИЙ ПОИСК ЭЛЕМЕНТА
![Page 32: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/32.jpg)
СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ
![Page 33: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/33.jpg)
СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ• Polymer умеет вставлять файлы стилей в элементы
(нативный Shadow DOM это НЕ умеет)
![Page 34: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/34.jpg)
СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ• Polymer умеет вставлять файлы стилей в элементы
(нативный Shadow DOM это НЕ умеет)
Разворачивается в
![Page 35: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/35.jpg)
НАТИВНАЯ ПОДДЕРЖКА
![Page 36: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/36.jpg)
POLYMER
Elements
Core (polymer.js)
Foundation (platform.js)
когда все браузеры реализуют спецификацию
этот слой станет не нужен
![Page 37: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/37.jpg)
ЧТО ЕСТЬ УЖЕ СЕЙЧАС?
• Core Elements
• Paper Elements (+Material Design)
• Community Elements (Github, etc…)
![Page 38: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/38.jpg)
POLYMER DESIGNER
Создание прототипов простым перетаскиванием
https://www.polymer-project.org/tools/designer/
![Page 39: Polymer - New Era of Web Development](https://reader034.vdocuments.net/reader034/viewer/2022050614/589e1f3d1a28ab605b8b6495/html5/thumbnails/39.jpg)
СПАСИБО ЗА ВНИМАНИЕ• 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/