Polymer – это один из способов заглянуть в удивительное будущее веб-компонентов. Мы хотим, чтобы создавать и использовать пользовательские элементы было легко. В течение последнего года команда усердно работала над набором полифиллов для развивающихся спецификаций. Кроме того, мы создали удобную библиотеку, которая упрощает создание веб-компонентов. Наконец, мы создаем набор элементов интерфейса и утилит, которые можно будет использовать в ваших приложениях. На конференции Chrome Dev Summit 2013 я подробно рассказал о различных компонентах Polymer и философии, лежащей в основе нашей мантры "Все есть элемент".
Слайды: http://html5-demos.appspot.com/static/cds2013/index.html
"Все является элементом" (от <select> до пользовательских элементов)
Слайды: http://html5-demos.appspot.com/static/cds2013/index.html#6
Создание веб-страниц в 1990-х годах было ограниченным, но мощным. В нашем распоряжении было всего несколько элементов. И самое главное – все было декларативным. Создать страницу, добавить элементы управления формой и создать приложение без написания большого количества кода JavaScript было удивительно просто.
Возьмем, к примеру, элемент <select>. В элемент встроено множество функций, которые можно использовать, просто объявив его:
- Настройка с помощью HTML-атрибутов
- Отрисовывает дочерние элементы (например,
<option>) с интерфейсом по умолчанию, который можно настраивать с помощью атрибутов. - Полезно в других контекстах, например
<form> - Имеет DOM API: свойства и методы
- Активирует события, когда происходит что-то интересное.
Веб-компоненты предоставляют инструменты, позволяющие вернуться к этому расцвету веб-разработки. В ней мы можем создавать новые элементы, напоминающие <select>, но разработанные для сценариев использования 2014 года. Например, если бы технология AJAX была изобретена сегодня, она, вероятно, была бы HTML-тегом (пример):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
или адаптивные элементы, которые привязываются к атрибуту queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Именно такой подход мы используем в Polymer. Вместо того чтобы создавать монолитные веб-приложения на основе JavaScript, давайте создадим элементы, которые можно использовать повторно. Со временем из небольших элементов можно собрать целое приложение. Черт, и все приложение может быть элементом:
<my-app></my-app>
Создание веб-компонентов с помощью Polymer
Слайды: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer содержит ряд удобных функций для создания приложений на основе веб-компонентов:
- Регистрация декларативного элемента:
<polymer-element> - Декларативное наследование:
<polymer-element extends="..."> - Декларативная двусторонняя привязка данных:
<input id="input" value=""> - Декларативные обработчики событий:
<button on-click="" - Опубликованные свойства:
xFoo.bar = 5<-><x-foo bar="5"> - Наблюдение за объектом:
barChanged: function() {...} - PointerEvents/PointerGestures по умолчанию
Мораль этой истории в том, что написание элементов Polymer - это декларативность. Чем меньше кода вам нужно написать, тем лучше ;)
Веб-компоненты: будущее веб-разработки
Слайды: http://html5-demos.appspot.com/static/cds2013/index.html#26
Я бы упустил важную деталь, если бы не упомянул стандарты, лежащие в основе веб-компонентов. В конце концов, Polymer основан на этих развивающихся базовых API.
Мы находимся на пороге очень интересного времени в веб-разработке. В отличие от других новых функций, добавляемых на веб-платформу, API, составляющие веб-компоненты, не являются яркими или ориентированными на пользователя. Они предназначены исключительно для повышения продуктивности разработчиков. Каждый из четырех основных API полезен сам по себе, но вместе они творят чудеса!
- Shadow DOM – инкапсуляция стилей и DOM.
- Пользовательские элементы – определение новых элементов HTML. Предоставьте им API со свойствами и методами.
- HTML Imports – это модель распространения пакета CSS, JS и HTML.
- Шаблоны – правильное создание шаблонов DOM для определения инертных фрагментов разметки, которые будут выведены позже.
Если вы хотите узнать больше об основах API, посетите сайт webcomponents.org.