Полезное
654 статьи › RSS

Веб-компоненты: что это такое и как они работают

Веб-дизайн

Код, который можно повторно использовать в разных проектах, является основой современного веб-дизайна. Использование различных фронтенд-фреймворков и 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 против 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 комментариев

Оставлять комментарии могут только пользователи.

Подписка на Freelance.Today





или

следи за новостями в соцсетях


Фриланс новости, биржи фриланса, freelance