Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

1. POLYMER
New Era
of
Web Development

2. ЧТО ТАКОЕ POLYMER?
Библиотека, которая использует
новейшие веб-технологии
Elements
Core
(polymer.js)
Foundation
(platform.js)
для создания
пользовательских HTML элементов

3. ЧТО ТАКОЕ POLYMER?
Elements
Core
(polymer.js)
Foundation
(platform.js)

4. ВСЕ ЕСТЬ ЭЛЕМЕНТ

5. ВСЕ ЕСТЬ ЭЛЕМЕНТ
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>

6. ЗАГЛЯНЕМ ГЛУБЖЕ

7. ЗАГЛЯНЕМ ГЛУБЖЕ
Декларирование элемента

8. ЗАГЛЯНЕМ ГЛУБЖЕ
Шаблон элемента

9. ЗАГЛЯНЕМ ГЛУБЖЕ
Shadow DOM

10. ЗАГЛЯНЕМ ГЛУБЖЕ
Code and logic…

11. ПОДРОБНЕЕ О ВЕБ-КОМПОНЕНТАХ
(ШАБЛОНЫ)
• Поведение как у привычных шаблонов
• Контент шаблона инертен (не происходит подгрузки внешних
элементов) пока шаблон не активирован
• Не возникает краевых эффектов с внешними элементами
• Как-бы «не в документе» - селекторы его не возвращают
содержимое шаблона

12. Shadow DOM
Всем выйти
из сумрака!
http://illustrators.ru/illustrations/195271

13. SHADOW DOM
множество DOM деревьев в пределах родительского
…
shadow host
Document Tree
child … child
Shadow Trees
Shadow
shadow root
chil chil
… …
…

14. SHADOW DOM
• Light DOM

15. SHADOW DOM
• Light DOM
• Shadow DOM
Light DOM + Shadow DOM = Logical DOM (с этим работает разработчик)

16. SHADOW DOM
• Light DOM
• Shadow DOM
• Composed (rendered) DOM
Браузер использует Composed DOM для вывода на странице

17. SHADOW DOM
Polymer позволяет перейти
на светлую сторону
от императивной работы с Shadow DOM к декларативной

18. HTML IMPORTS
• Нативные способы доставки ресурсов
(<script src>, <link rel="stylesheet">, <img>, <video>, <audio>)
• А если нужно доставить HTML?
• <iframe>
• AJAX (xhr.responseType = ‘document')
• CrazyHacks™ (<script type="text/html">)

19. HTML IMPORTS
• Веб-компоненты позволяют делать это проще
• … даже с другого домена

20. HTML IMPORTS
• Мы хотим больше! (HTML/CSS/JS)

21. HTML IMPORTS
• А что с производительностью?
• Vulcanize (https://github.com/Polymer/vulcanize)
• активно используется кэширование браузера
• асинхронная загрузка компонентов
• импорты не блокируют парсинг
• импорты не заставляют компонент «исполняться» сразу

22. DATA BINDING
• Двусторонняя (two-way) связка данных

23. DATA BINDING
(ТИПЫ СВЯЗЫВАНИЯ)
• Экземпляры одного шаблона

24. DATA BINDING
(ТИПЫ СВЯЗЫВАНИЯ)
• Итеративные шаблоны

25. DATA BINDING
(ТИПЫ СВЯЗЫВАНИЯ)
• Шаблоны с условием

26. DATA BINDING
(ТИПЫ СВЯЗЫВАНИЯ)
• Использование шаблонов по ссылке

27. DATA BINDING
(ТИПЫ СВЯЗЫВАНИЯ)
• Использование шаблонов по ссылке
… или так

28. DATA BINDING
(ТИПЫ СВЯЗЫВАНИЯ)
• Binding to text
• Binding to attributes
• Binding to input values
<input>, <select>, <option>, <textarea>

29. DATA BINDING
{{ВЫРАЖЕНИЯ}}
• Устраняет использование сложной логики в
представлениях (view)
• Выражения не являются скриптом
• Не вставляют HTML (позволяют избежать XSS)
• Поддерживают вложенность

30. DATA BINDING
ДЕКЛАРАТИВНЫЕ ОБРАБОТЧИКИ СОБЫТИЙ

31. DATA BINDING
АВТОМАТИЧЕСКИЙ ПОИСК ЭЛЕМЕНТА

32. СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ

33. СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ
• Polymer умеет вставлять файлы стилей в элементы
(нативный Shadow DOM это НЕ умеет)

34. СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ
• Polymer умеет вставлять файлы стилей в элементы
(нативный Shadow DOM это НЕ умеет)
Разворачивается в

35. НАТИВНАЯ ПОДДЕРЖКА

36. POLYMER
Elements
Core
(polymer.js)
Foundation
(platform.js)
когда все браузеры
реализуют спецификацию
этот слой станет не нужен

37. ЧТО ЕСТЬ УЖЕ СЕЙЧАС?
• Core Elements
• Paper Elements (+Material Design)
• Community Elements (Github, etc…)

38. POLYMER DESIGNER
https://www.polymer-project.org/tools/designer/
Создание прототипов простым перетаскиванием

39. СПАСИБО ЗА ВНИМАНИЕ
• https://www.polymer-project.org/
• https://plus.google.com/+PolymerProject
• http://customelements.io/
• http://habrahabr.ru/post/180377/
Кириллов Александр
Twitter: @saratovsource
LinkedIn: ru.linkedin.com/in/kirillovalexander/