POLYMER
New Era
of
Web Development
ЧТО ТАКОЕ POLYMER?
Библиотека, которая использует
новейшие веб-технологии
Elements
Core
(polymer.js)
Foundation
(pl...
ЧТО ТАКОЕ POLYMER?
Elements
Core
(polymer.js)
Foundation
(platform.js)
ВСЕ ЕСТЬ ЭЛЕМЕНТ
ВСЕ ЕСТЬ ЭЛЕМЕНТ
Layout
Data
View
Services/libs
<polymer-layout>
<polymer-flex-layout>
<polymer-grid-layout>
<poly...
ЗАГЛЯНЕМ ГЛУБЖЕ
ЗАГЛЯНЕМ ГЛУБЖЕ
Декларирование элемента
ЗАГЛЯНЕМ ГЛУБЖЕ
Шаблон элемента
ЗАГЛЯНЕМ ГЛУБЖЕ
Shadow DOM
ЗАГЛЯНЕМ ГЛУБЖЕ
Code and logic…
ПОДРОБНЕЕ О ВЕБ-КОМПОНЕНТАХ
(ШАБЛОНЫ)
• Поведение как у привычных шаблонов
• Контент шаблона инертен (не происходит под...
Shadow DOM
Всем выйти
из сумрака!
http://illustrators.ru/illustrations/195271
SHADOW DOM
множество DOM деревьев в пределах родительского
…
shadow host
Document Tree
child … child
Shadow Trees
S...
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 DOM
Polymer позволяет перейти
на светлую сторону
от императивной работы с Shadow DOM к декларативной
HTML IMPORTS
• Нативные способы доставки ресурсов
(<script src>, <link rel="stylesheet">, <img>, <video>, <audio>)
• А ...
HTML IMPORTS
• Веб-компоненты позволяют делать это проще
• … даже с другого домена
HTML IMPORTS
• Мы хотим больше! (HTML/CSS/JS)
HTML IMPORTS
• А что с производительностью?
• Vulcanize (https://github.com/Polymer/vulcanize)
• активно используется к...
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>,...
DATA BINDING
{{ВЫРАЖЕНИЯ}}
• Устраняет использование сложной логики в
представлениях (view)
• Выражения не являются ск...
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://customelement...
of 39

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.
Published on: Mar 4, 2016
Published in: Software      
Source: www.slideshare.net


Transcripts - Polymer - New Era of Web Development

  • 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/

Related Documents