polymer - new era of web development

POLYMERNew Era

of Web Development

ЧТО ТАКОЕ POLYMER?

Elements

Core(polymer.js)

Foundation(platform.js)

Библиотека, которая используетновейшие веб-технологии

для создания пользовательских HTML элементов

ЧТО ТАКОЕ POLYMER?

Elements

Core (polymer.js)

Foundation (platform.js)

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

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

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

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

Декларирование элемента

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

Шаблон элемента

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

Shadow DOM

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

Code and logic…

ПОДРОБНЕЕ О ВЕБ-КОМПОНЕНТАХ (ШАБЛОНЫ)

http://www.html5rocks.com/en/tutorials/webcomponents/template/

• Поведение как у привычных шаблонов• Контент шаблона инертен (не происходит подгрузки внешних элементов) пока шаблон не активирован

• Не возникает краевых эффектов с внешними элементами• Как-бы «не в документе» - селекторы его не возвращают содержимое шаблона

Shadow DOM

Всем выйти из сумрака!

http://illustrators.ru/illustrations/195271

SHADOW DOM

…

… childchild

shadow host

Document TreeShadow Trees

Shad

ow

shadow root

chil chil…

… …

…

множество DOM деревьев в пределах родительского

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 DOMPolymer позволяет перейти

на светлую сторону от императивной работы с Shadow DOM к декларативной

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/

HTML IMPORTS• Веб-компоненты позволяют делать это проще

• … даже с другого домена

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

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

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

HTML IMPORTS• А что с производительностью?

• Vulcanize (https://github.com/Polymer/vulcanize)

• активно используется кэширование браузера

• асинхронная загрузка компонентов

• импорты не блокируют парсинг

• импорты не заставляют компонент «исполняться» сразу

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

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>, <option>, <textarea>

DATA BINDING {{ВЫРАЖЕНИЯ}}

• Устраняет использование сложной логики в представлениях (view)

• Выражения не являются скриптом

• Не вставляют HTML (позволяют избежать XSS)

• Поддерживают вложенность

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://customelements.io/• http://habrahabr.ru/post/180377/

Кириллов АлександрTwitter : @saratovsourceLinkedIn: ru.linkedin.com/in/kirillovalexander/