Polymer - New Era of Web Development

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.

Transcript

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 … … child child shadow host Document Tree Shadow Trees Shadow shadow root chil chil … … … … множество DOM деревьев в пределах родительского
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/