Polymer - New Era of Web Development
1 like1,334 views
Документ описывает Polymer, библиотеку для веб-разработки, использующую современные веб-технологии для создания пользовательских HTML-элементов. Он охватывает ключевые аспекты Polymer, включая элементы, связывание данных и стилизацию, а также функционал shadow DOM и импорты HTML. В конце представлены ссылки на ресурсы для более глубокого изучения и инструменты для создания прототипов.
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)
- 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>
- 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 АВТОМАТИЧЕСКИЙ ПОИСК ЭЛЕМЕНТА
- 33. СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ • Polymer умеет вставлять файлы стилей в элементы (нативный Shadow DOM это НЕ умеет)
- 34. СТИЛИЗАЦИЯ ЭЛЕМЕНТОВ • Polymer умеет вставлять файлы стилей в элементы (нативный Shadow DOM это НЕ умеет) Разворачивается в
- 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/