Код, который можно повторно использовать в разных проектах, является основой современного веб-дизайна. Использование различных фронтенд-фреймворков и Sass-библиотек существенно ускоряет рабочий процесс и позволяет быстро найти решение практически любой проблемы. Однако многоразовые динамические элементы все еще находятся в стадии разработки и остается только догадываться, какое влияние они окажут на веб-дизайн в целом. Эти элементы называются веб-компонентами и их создатели пока ожидают, когда будет завершена спецификация W3C.
Далеко не все разработчики знают, как именно работают веб-компоненты, так как о них сравнительно мало говорят. Поэтому не помешает в условиях легкого информационного голода поговорить о функционале веб-компонентов и о том, как они могут изменить будущее фронтэнд-кодирования.
Небольшое пояснение
Веб-компонент представляет собой DOM-элемент, то есть это объектная модель документа, программный интерфейс, который не зависит от платформы и языка программирования. DOM позволяет скриптам и программам получить доступ к содержимому HTML-документов, также возможно изменение содержимого, структуру и оформление файлов подобного типа. Каждый веб-компонент предназначен для экономии времени разработчиков при создания таких веб-сайтов, где используются аналогичные элементы на многих веб-страницах.
Пока функционал находится в стадии тестирования, но W3C примет положительное решение по веб-компонентам в самое ближайшее время. Суть веб-компонентов заключается в идее создания динамических элементов интерфейса без написания JavaScript- кода. Кроме этого веб-компоненты можно собирать в собственные библиотеки. Так, например, если разработчику нужно вставить карту на веб странице, он может добавить специальный тег и карта будет корректно отображаться. Но есть проблема – браузеры. Использование веб-компонентов в современном веб-дизайне возможно только при условии поддержки всего множества технологий, которые были использованы при их создании.
Если говорить кратко, то в основе любого веб-компонента лежат четыре уникальных технологий W3C:
- Пользовательские элементы, которые нужны для добавления новых HTML элементов в DOM.
- Shadow DOM – правила о том, как создать уникальный DOM, инкапсулированный в HTML-разметку.
- Импорт HTML – возможность импортирования HTML-код и повторного использования компонентов на других страницах.
- Шаблон HTML – инструмент для создания повторно использовануемого кода с пояснениями визуальных характеристик
Каждая из этих функций автономна и имеет собственные спецификации на сайте W3C. Но вместе все эти спецификации позволяют осуществить идеалистическую концепцию веб-компонентов. Многим разработчикам пока непонятно, каким именно образом компонент может дублировать код везде, где это нужно. Весь процесс тесно завязан на импорт HTML, который все еще находится в стадии разработки.
Но как только работа будет завершена, любой разработчик получит возможность создать HTML-тег, который сможет использовать в качестве веб-компонента. И при желании этот код можно выложить в свободный доступ. Возможности развития веб-компонентов практически безграничны.
В конечном счете цель создателей веб-компонентов заключается в том, чтобы уменьшить сложность разработки веб-страниц.
Что такое Polymer?
Так как для создания веб-компонента приходится иметь дело с большими фрагментами необработанного кода, вполне естественно, что разработчики хотят сделать этот процесс проще. И это можно осуществить с помощью фреймфорка Polymer – инструмента с открытым исходным кодом. В основном Polymer представляет собой обычный фреймворк, но со столь высоким уровнем абстракции, что разработчик может написать компонент гораздо быстрее и с меньшим количеством кода.
Polymеr – это одна из немногих WC-библиотек, где поддерживаются рекомендации разработчиков Google Chrome. Так что не приходится сомневаться, что будущее веб-компонентов будет связано именно с этим браузером.
В это можно не верить, но Polymer уже используется в некоторых продуктах Google, таких, к примеру, как Google Sites. Это может показаться странным выбором, поскольку данный фреймворк пока не поддерживается браузером. Вот перечень стабильных браузеров, где осуществляется поддержка все четырех основных технологий W3C.
- Google Chrome
- Firefox
- Edge
- Safari 7+
- IE11
- Mobile Chrome(Android)
- Mobile Safari(iOS 7+)
Не столь популярные браузеры, такие как Opera, вряд ли смогут поддерживать все. Но вышеприведенный список достаточно полон, чтобы разработчики начали осваивать Polymer и своими глазами увидеть, насколько он полезен в работе. Для расширения кругозора можно изучить следующие материалы (eng):
- Начало работы с веб-компонентами и Polymer 2,0 — Часть 1
- Как создать свое первое приложение с Polymer
- Туториал разработчиков Google
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, вероятно, что данный фреймворк будет развиваться на протяжении многих лет. Веб-компоненты – это всерьез и надолго.
0 комментариев