что такое web components
Введение в веб-компоненты. Часть 1
От переводчика: Представляю вашему вниманию перевод многообещающего стандарта Веб-компонентов от Google, который может стать трендом в ближайшие несколько лет. В данный момент, знание этого стандарта не несёт практического применения, поэтому, если вы не фанат всего нового и интересного, вам возможно будет скучно читать данный перевод.
Перевод выложен на github, поэтому, если вы хотите помочь с переводом или исправить ошибку сделайте pull request, ну или пишите в личку.
Статус: Эксперементальный драфт
Введение
Компонентная модель для Web’а (или Web Components) состоит из четырёх модулей, которые, будучи использованными вместе, позволят разработчикам web-приложений создавать виджеты с богатыми визуальными возможностями, легкие в разработке и повторном использовании, что в данный момент невозможно с использованием только CSS и JS-библиотек.
Вместе декораторы и пользовательские элементы называются компонентами
Шаблоны
Содержимое элемента анализируется парсером, но оно неактивно: скрипты не запускаются, изображения не загружаются и т. д. Элемент не выводится.
В скрипте такой элемент имеет специальное свойство content, которое содержит статическую DOM-структуру определённую в шаблоне.
Например, разработчику может понадобиться определить DOM-структуру, которая создается несколько раз в документе, а затем создать его экземпляр, когда это будет необходимо.
Добавление статического DOM-узла в документ делает его «живым», как если бы этот DOM-узел был получен через свойство innerHTML.
Декораторы
Декоратор это нечто, что улучшает или переопределяет представление существующего элемента. Как и все аспекты представлений, поведение декораторов контролируется с помощью CSS. Однако, возможность определять дополнительные аспекты представления, используя разметку — уникальная черта декораторов.
Элемент указывает на место, куда декоратор (точнее, его содержимое) должен быть вставлен.
Декоратор применяется, используя CSS-свойство decorator:
Декоратор и CSS описанные выше заставят данную разметку:
+Но её рендер будет как у этой разметки (стили user agent опущены для краткости):
Если документ изменился так, что CSS-селектор, где был объявлен декоратор, более не действителен — обычно, когда селектор со свойством decorator более не применяется к элементу или правило с декоратором было изменено в атрибуте style, декоратор более не применяется, возвращая рендеринг элемента в первоначальное состояние..
Даже несмотря на то, что CSS-свойство decorator может указывать на любой ресурс в сети, декоратор не будет применяться, пока его определение загружается в текущий документ.
Разметка, которая генерируется представлениями, ограничивается чисто презентационным применением: она никогда не может запустить скрипт (в том числе встроенные обработчики событий), и она не может быть доступна для редактирования.
События в декораторах
Декораторы также могут навешивать обработчики событий для реализации интерактивности. Поскольку декораторы преходящи, не эффективно навешивать обработчики событий на ноды в шаблоне или полагаться на любое состояние шаблона, так как ноды в шаблоне пересобираются каждый раз как декоратор применяется или снимается с элемента.
Вместо этого, декораторы регистрируют обработчики событий у контроллера событий. Чтобы зарегистрировать обработчик событий, шаблон включает в себя элемент Bar
Вызов функции lisnen означает, что когда кнопка будет нажата, сработает обработчик события.
Контроллер событий перенаправит событие, наступившее в на любой ноде, на которой декоратор был применён, в обработчик события.
Рис. Обработка и переназначение событий
Когда слушатель событий вызывается, значением target события является нода, на которую декоратор был применен, а не содержимое его шаблона. Например, если декоратор, указанный выше, такого содержания:
Переопределение свойства target необходимо, тк декоратор определяет отображение; он не влияет на структуру документа. Пока декоратор применён, свойство target переопределяется на ноду, на которую он применён.
Также, если скрипт меняет контент шаблона, изменения игнорируются, точно также, как установка textContent элемента > V
Для этого понадобилось два декоратора. Один представляет detail элемент в закрытом виде, другой в открытом. Каждый декоратор использует обработчик события клика мыши, для изменения состояния открыт/закрыт. Атрибут select элемента будет рассмотрен подробнее ниже.
Пользовательские элементы
Пользовательские элементы — новый тип DOM-элементов, которые могут быть определены автором.
Пользовательские элементы могут определять вид отображения через декораторы. В отличии от декораторов, которые могут быть применены или сняты на нужный элемент, тип пользовательского элемента фиксирован. Но пользовательские элементы могут определять совершенно новое отображение и поведение, которые нельзя определить через декораторы, из-за элементарной природы последних.
Элемент определяет пользовательский элемент.
Атрибут extends определяется элемент, функционал которого мы хотим расширить. Каждый экземпляр пользовательского элемента будет иметь tagName определённый в атрибуте extends.
Атрибут name определяет пользовательский элемент, который будет связан с этой разметкой. Пространство имён у атрибута name такое же, как у имён тэгов стандартных элементов, поэтому для устранения коллизий, используется префикс x-.
Разные браузеры, определяют HTML элементы по-разному, однако все их интерпретации руководствуются семантикой HTML.
Тк не все браузеры поддерживают пользовательские элементы, авторы должны расширять HTML элементы, которые имеют наиболее близкое значение для нового пользовательского элемента. Например, если мы определяем пользовательский элемент, который является интерактивным и реагирует на клики, выполняя некоторые действия, мы должны расширять кнопку ( ).
Представление
Пользовательский элемент может содержать шаблон:
Если пользовательский элемент содержит шаблон, копия этого шаблона будет вставлена в теневой DOM элемента конструктором пользовательских элементов.
Теневой DOM будет описан ниже.
Использование пользовательских элементов в разметке
Т.к. пользовательские элементы использую существующие HTML тэги (div, button, option и тд), нам нужен атрибут для определения когда мы хотим использовать пользовательский элемент. Таким атрибутом является is, а значением его является название пользовательского элемента. Например:
Использование пользовательских элементов в скриптах
Вы можете создать пользовательский элемент из скрипта, используя стандартный метод document.createElement:
Пользовательский элемент может объявлять методы API добавляя их в свой prototype, в элементе …
Для того, чтобы обеспечить простую деградацию, this внутри элемента
Технически, скрипт внутри элемента
Нельзя создать пользовательский элемент указывая is атрибут у существующего DOM-элемента. Выполнение следующего кода ничего не даст:
Обновление элемента
Когда объявление пользовательского элемента будет загружено, каждый элемент с атрибутом is установленном в имя пользовательского элемента будет обновлён до пользовательского элемента. Обновление должно быть идентично удалению элемента и замене его на пользовательский элемент.
Когда каждый элемент заменяется, не всплывающее (non-bubbling), неотменяемое (non-cancellable) событие возникает на удаляющемся элементе. Скрипт, который хочет задержать взаимодействие с остальной часть документа до тех пор, пока пользовательский элемент не загрузиться может подписаться на специальное событие:
Авторы, которые хотят избежать показа нестилизованного контента, могут использовать CSS для изменения отображения не заменённого, обычного элемента, пока пользовательский элемент не загрузиться.
Методы жизненного цикла
Пользовательский элемент может подписаться на четыре метода жизненного цикла:
Обработчики inserted и removed могут быть вызваны несколько раз, каждый раз, когда пользовательский элемент вставляется и удаляется.
Подписаться на эти обработчики можно вызвав метод HTMLElementElement.lifecycle:
Расширение пользовательских элементов
В дополнении к HTML-элементам, можно расширить пользовательский элемент указанием имени пользовательского элемента в атрибуте extends элемента :
Обработка ошибок
Есть несколько возможностей для обработки ошибок при рендеринге пользовательских элементов:
От переводчика: в следующей части мы рассмотрим применение shadow DOM в Веб-компонентах, про внешние пользовательские элементы и декораторы, и про изоляцию, ограничение и инкапсуляцию Веб-компонентов
Веб-компоненты: что это такое и как они работают
Код, который можно повторно использовать в разных проектах, является основой современного веб-дизайна. Использование различных фронтенд-фреймворков и Sass-библиотек существенно ускоряет рабочий процесс и позволяет быстро найти решение практически любой проблемы. Однако многоразовые динамические элементы все еще находятся в стадии разработки и остается только догадываться, какое влияние они окажут на веб-дизайн в целом. Эти элементы называются веб-компонентами и их создатели пока ожидают, когда будет завершена спецификация W3C.
Далеко не все разработчики знают, как именно работают веб-компоненты, так как о них сравнительно мало говорят. Поэтому не помешает в условиях легкого информационного голода поговорить о функционале веб-компонентов и о том, как они могут изменить будущее фронтэнд-кодирования.
Небольшое пояснение
Веб-компонент представляет собой DOM-элемент, то есть это объектная модель документа, программный интерфейс, который не зависит от платформы и языка программирования. DOM позволяет скриптам и программам получить доступ к содержимому HTML-документов, также возможно изменение содержимого, структуру и оформление файлов подобного типа. Каждый веб-компонент предназначен для экономии времени разработчиков при создания таких веб-сайтов, где используются аналогичные элементы на многих веб-страницах.
Пока функционал находится в стадии тестирования, но W3C примет положительное решение по веб-компонентам в самое ближайшее время. Суть веб-компонентов заключается в идее создания динамических элементов интерфейса без написания JavaScript- кода. Кроме этого веб-компоненты можно собирать в собственные библиотеки. Так, например, если разработчику нужно вставить карту на веб странице, он может добавить специальный тег и карта будет корректно отображаться. Но есть проблема – браузеры. Использование веб-компонентов в современном веб-дизайне возможно только при условии поддержки всего множества технологий, которые были использованы при их создании.
Если говорить кратко, то в основе любого веб-компонента лежат четыре уникальных технологий W3C:
Каждая из этих функций автономна и имеет собственные спецификации на сайте W3C. Но вместе все эти спецификации позволяют осуществить идеалистическую концепцию веб-компонентов. Многим разработчикам пока непонятно, каким именно образом компонент может дублировать код везде, где это нужно. Весь процесс тесно завязан на импорт HTML, который все еще находится в стадии разработки.
Но как только работа будет завершена, любой разработчик получит возможность создать HTML-тег, который сможет использовать в качестве веб-компонента. И при желании этот код можно выложить в свободный доступ. Возможности развития веб-компонентов практически безграничны.
В конечном счете цель создателей веб-компонентов заключается в том, чтобы уменьшить сложность разработки веб-страниц.
Что такое Polymer?
Так как для создания веб-компонента приходится иметь дело с большими фрагментами необработанного кода, вполне естественно, что разработчики хотят сделать этот процесс проще. И это можно осуществить с помощью фреймфорка Polymer – инструмента с открытым исходным кодом. В основном Polymer представляет собой обычный фреймворк, но со столь высоким уровнем абстракции, что разработчик может написать компонент гораздо быстрее и с меньшим количеством кода.
Polymеr – это одна из немногих WC-библиотек, где поддерживаются рекомендации разработчиков Google Chrome. Так что не приходится сомневаться, что будущее веб-компонентов будет связано именно с этим браузером.
В это можно не верить, но Polymer уже используется в некоторых продуктах Google, таких, к примеру, как Google Sites. Это может показаться странным выбором, поскольку данный фреймворк пока не поддерживается браузером. Вот перечень стабильных браузеров, где осуществляется поддержка все четырех основных технологий W3C.
Не столь популярные браузеры, такие как Opera, вряд ли смогут поддерживать все. Но вышеприведенный список достаточно полон, чтобы разработчики начали осваивать Polymer и своими глазами увидеть, насколько он полезен в работе. Для расширения кругозора можно изучить следующие материалы (eng):
Polymer против React
Вопрос использования веб-компонентов и Polymer вызывает бурные дискуссии в среде разработчиков. Противники Polymer аргументируют свою позицию тем, что созданная в недрах Facebook библиотека React является наиболее сильной и жизнеспособной альтернативой веб-компонентам. React использует свою собственную Shadow DOM и опирается на свои react-компоненты для быстрого создания интерфейсов. Учитывая, что сейчас многие разработчики изучают React, их позиция вполне понятна. Тем не менее, оба фреймворка преследуют одну и ту же цель – создание многоразовых элементов для динамических веб-сайтов.
Но есть множество причин, по которым веб-компоненты оказываются более полезными. Чтобы научиться работать с React, нужно знать npm, Gulp/Grunt, Babel, возможно JSX и некоторых других веб-технологии. И во всем этом очень непросто разобраться. А идея веб-компонентов как раз и заключается в том, чтобы их использование было максимально простым, особенно в связке с Polymer.
Если разработчику нужно создать небольшой и не особо интерактивный сайт, то сочетание Web Components/Polymer является оптимальным решением.
Будущее веб-компонентов
Теперь пара слов о нативной поддержке интерфейсов и технологий, используемых в веб-компонентах. Как правило, и это не удивительно, больше всего веб-компоненты поддерживает Chrome. Но если разработчик решит освоить Polymer, у него появится возможность создать такой компонент, который будет работать во всех браузерах, включая IE6. И это отличная новость для всех разработчиков интерфейсов, готовых развиваться и работать с новейшими технологиями.
Поскольку Polymer является проектом Google, вероятно, что данный фреймворк будет развиваться на протяжении многих лет. Веб-компоненты – это всерьез и надолго.
Как создавать собственные HTML элементы с помощью Web Components
О веб-компонентах в настоящий момент говорят как о предстоящем «тектоническом сдвиге в веб-разработке», обещая постоянное изменение ландшафта веб дизайна. Крупные игроки движутся вперед, чтобы воплотить веб-компоненты в реальность. Google и Mozilla уже постепенно выкатывают нативную поддержку в своих браузерах.
Вы спросите: а что вообще такое «веб-компоненты»? Вкратце, веб-компоненты дают вам способ создания кастомных HTML элементов, которые могут сделать почти все, что вам необходимо. Вместо того, чтобы захламлять ваши сайты длинной разметкой, скриптами и повторяющимся кодом, вы оборачиваете все это в красивые и аккуратные кастомные HTML элементы.
Понимание веб-компонент
Вы видите только несколько строк, но вот как реально выглядит элемент :
По умолчанию браузер прячет этот длинный код, так что вам не нужно его видеть или заботиться о его написании, когда хотите разместить видео. Вы просто пишете теги и и все в порядке.
Раньше только производители браузеров могли создавать элементы таким образом. Но представьте, если бы вы сами могли использовать этот подход для других видов контента?
Возьмем к примеру слайд-шоу картинок. Обычно для него требуется несколько div-элементов со специальными классами: для обертки всего слайд-шоу, каждого слайда, а также для добавления подписей (captions) и миниатюр (thumbnails). Еще нужно будет установить какие-то общие параметры слайд-шоу, такие как например эффекты перехода слайдов (slide transition effects), встраивая для этого JQuery / JavaScript код.
Что если бы вы могли пропустить все это и просто использовать:
Это именно то, что можно сделать при помощи веб-компонентов.
Создание собственных HTML элементов
Если вам нужно что-то короткое и простое для размещения контента, который без этого был бы слишком громоздким, можете шагнуть вперед и создать свой собственный веб-компонент.
Веб-компонентами легко можно делиться, таким образом разработчики имеют в своем распоряжении возможность использовать сторонние компоненты для наиболее распространенных задач проекта. В свободном доступе есть компоненты для всего, от распознавания голоса.
Давайте взглянем на то, что же находится за кулисами.
Что делает веб-компонент
Веб-компоненты (как они существуют на данный момент) состоят из четырех частей:
Кастомные элементы
Кастомные элементы объявляются в простом виде, например так:
Когда вы создаете кастомный элемент, можете делать это полностью с нуля, или же можете расширить существующий HTML элемент (к примеру ) и изменить его функциональные возможности или представление (отображение) так, как нужно.
Примечание: стоит отметить, что тег был признан устаревшим в 2013 году из-за возникших осложнений. Его еще могут вернуть, но в то же время существует варианты с polyfill, о которых будет сказано чуть позже. Спасибо Эдди Османи (Addy Osmani) за то, что указал на это!
Теневой DOM
Теневой DOM является действительно основным аспектом работы веб-компонентов. Ранее мы посмотрели на элемент и показали, что несмотря на видимые нам несколько строк, в действительности имеется довольно много кода, скрытого по умолчанию. Место, где «живет» этот скрытый код называется «Теневой DOM» (shadow DOM).
Производители браузеров используют этот теневой DOM годами для реализации нативной поддержки таких элементов, как input, audio, video и т.д. Теперь же они могут использоваться любым разработчиком через веб-компоненты.
Основная идея заключается в том, что вы берете весь код, который реально не надо видеть во время написания разметки, и прячете его в теневой DOM, чтобы не мешался. Это позволяет нам иметь дело лишь с соответствующей информацией, например при использовании элемента это высота, ширина и путь к файлу.
И наоборот, CSS и JavaScript со страницы не повлияют на ваш веб-компонент, за исключением стилевых хуков (style hooks), которые вы можете создать специально для разрешения внешних CSS-правил. Все это означает не более чем беспокойство об именовании id и классов, дабы избежать конфликтов.
Если вы хотите увидеть, как выглядит теневой DOM, это легко. Удостоверьтесь что используете последнюю версию Chrome, откройте Dev Tools (инструменты разработчика), кликните по иконке шестеренки для открытия настроек и, наконец, установите флажок Show user agent shadow DOM:
Когда вы просматриваете элемент с теневым DOM, вы видите его полный код. Взгляните на с включенным и выключенным показом shadow DOM: http://html5-demos.appspot.com/gangnam
Для полного понимания теневого DOM прочтите: Intro to Shadow DOM
Шаблоны
HTML импорты
Поддержка браузерами и Polyfills
Возможности, предоставляемые веб-компонентами, дают привлекательную идею с головой погрузиться в их использование, однако на данный момент еще не реализована поддержка в браузерах. Сейчас поддержка выглядит следующим образом:
http://jonrimmer.github.io/are-we-componentized-yet/
Нативная поддержка реализуется в Chrome, Opera и Firefox, но еще не завершена. IE и Safari еще не заявляли о своих планах, однако, учитывая, что большинство браузеров будут поддерживать веб-компоненты, считается, что в конечном счете и остальные браузеры последуют этому примеру.
Polymer от Google
Трудно не склониться к использованию Polymer, учитывая что Chrome в настоящее время является наиболее распространенным браузером. Вы могли бы предположить, что в процессе разработки будет учитываться то, как код веб-компонент проиндексируется поисковиком Google.
Polymer поставляется с полной библиотекой готовых веб-компонентов. Он включает в себя функционально ориентированные «Polymer Core elements» и дизайн-ориентированные «Paper elements».
При создании кастомных элементов с использованием Polymer, вместо такого формата применяется
Polymer позиционируется как «developer preview» вместо production ready, однако также говорится
. несмотря на это, многие уже успешно применяют Polymer в production.
Поддержка браузерами
X-Tags от Mozilla
Поддержка браузерами
Поддержка IE8
Если вам нужно поддерживать IE8, то на сегодня, к сожалению, нет подходящих средств, т.к. все существующие polyfills для веб-компонентов имеют поддержку IE9+. По оценкам, имеется от 2,1% до 3,82% пользователей с IE8, но, конечно, если ваша собственная статистика говорит о другом, вам придется самим принять решение по этому поводу.
Компоненты Ember.js и Angular.js
Одним из возможных путей подготовки себя к переходу на использование веб-компонент является работа с Ember.js или AngularJS. Оба имеют собственные системы для создания компонент и оба обещают перейти к использованию нативного кода для веб-компонент, когда будет реализована полная их поддержка.
Компоненты, созданные сообществом
Узнайте больше
Заключение
Надеюсь, что вам понравилась статья о том, что такое веб-компоненты и почему это должно вас волновать! Существует много всего для погружения в эту тему, но рассмотрев фундаментальные основы, у нас есть много возможностей для создания кастомных веб-компонентов. Что вы думаете? В каких случаях вы бы сами их использовали?