Polymer — это ворота в удивительное будущее веб-компонентов. Мы хотим упростить использование и создание пользовательских элементов. В течение прошлого года команда усердно работала над набором полифилов для развивающихся спецификаций. Кроме того, мы создали удобную библиотеку сахара, упрощающую создание веб-компонентов. Наконец, мы создаем набор элементов пользовательского интерфейса и служебных элементов для повторного использования в ваших приложениях. На саммите разработчиков Chrome 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, посетите веб-компоненты.org.