Фреймворки для веб-компонент
Современные инструменты веб-разработчика (инструменты в браузере, фреймворки, библиотеки, сборщики, редакторы ...) существенно ускоряют работу.
Веб-компоненты можно делать и без использования этих вспомогательных инструментов, но с ними это делать гораздо проще.
В веб-компонентах нет ничего, что помешает вам использовать их совместно с используемым вами фреймворком и остальным инструментарием.
Современные фреймворки в основном заточены под разработку приложений. То есть подразумевается, что вы и ваша команда, полностью контролируете разработку, используете один и тот же фреймворк, элементы интерфейса, библиотеки, все у вас замечательно, оптимизировано, ничего между собой не конфликтует итд итп.
Но разрабатывая в системах(в нашем случае WebTutor) где помимо вас и вашей команды с системой работают, владельцы системы и несколько сторонних разработчиков, которые с вами не связаны, все становится не так радужно. В данном случае на помощь приходят веб-компоненты, которые позволяют инкапсулировать ваш код. Но есть два момента, которые надо учитывать.
1) Конфликты версий фреймворка
Некоторые фреймворки не будут работать если на странице присутствует такой же фреймворк, только другой версии.
То есть к примеру веб-компоненты, сделанные используя React разных версий, будут работать на одной странице, а если использовался Polymer ver.1-2, то не будут. (с Polymer 3 такой проблемы уже нет)
P.S. у большинства популярных фреймворков данная проблема уже решена
2) Конфликты веб-компонент с одинаковым названием
В спецификации веб-компонент, а точнее в спецификации Custom Elements, написано, что вы не можете зарегистрировать один и тот же тег более одного раза.
То есть к примеру если один разработчик добавил свою веб-компоненту на страницу и назвал ее my-button, то другой разработчик добавить свою веб-компоненту с таким же названием уже не сможет.
P.S. данная проблема уже решается, но пока не решена... ссылка
Хотя описанные выше две проблемы уже решаются, к примеру первая проблема поидее почти решена и в большинстве популярных фреймворков нет конфликтов версий + решение второй проблемы тоже на подходе, но на данный момент с проблемами можно столкнуться, лучше пока не забывать про их существование и сделать определенные выводы:
- для создания веб-компонент желательно использовать фреймворк, который не конфликтует сам с собой при наличии другой его версии на странице. (также всегда есть вариант писать веб-компоненты на чистом JavaScript не используя фреймворки)
- используйте уникальные названия для своих веб-компонент
Выводы на самом деле сильно зависят от ваших задач и ситуации. Если вы планируете писать качественные веб-компоненты, которыми потом планируете делиться или хотите их продавать, то стоит придерживаться выводов. Если вы поддерживаете систему единолично или со своими коллегами, используете фреймворк одной версии и планируете писать веб-компоненты только для использования внутри компании и внешних разработчиков у вас нет, то можете действовать на свое усмотрение.
Эти два момента влияют, в зависимости от ситуации, у каждого она своя. Кто-то единолично поддерживает свои проекты использует фреймворк одной версии и никаких конфликтов и проблем не будет, а кто-то делает веб-компоненты для дальнейшего распространения в других системах и ему приходится учитывать все эти моменты.
Polymer
Если вы уже имели дело с веб-компонентами или интересовались ими, то скорее всего слышали про библиотеку Polymer.
Polymer - это бесплатная JavaScript библиотека с открытым исходным кодом для создания веб приложений с использованием технологии Web Components. Данная библиотека разрабатывается командой Google и добровольцами с GitHub. Именно эта библиотека и их команда проталкивала поддержку спецификации веб-компонент в W3C и проталкивала реализацию спецификации среди браузеров + сделала набор полифиллов webcomponentsjs. Насколько я знаю они занимаются продвижением и созданием веб-компонент еще с 2012 года. За эти годы они провели множество работы по развитию и популяризации веб-компонент.
С помощью Polymer сделаны самые качественные на данный момент бесплатные наборы веб-компонент(Polymer Elements, Vaadin Elements).
Независимо от того будете ли вы использовать Polymer или нет, вам надо знать про существование Polymer и его экосистемы, чтобы быть в курсе последних событий касающихся веб-компонент, а также для получения ответов на возникающие у вас вопросы.
Вот некоторые из этих мест:
- сайт Polymer Project, webcomponents.org, твиттеры сотрудников Polymer Team, ежегодный Polymer Summit, это лучшее место для получения самых последних новостей, лучших практик связанных с веб-компонентами
- Polymer канал на Slack, место где вы можете задать вопросы касательно веб-компонент
- Polymer Elements и Vaadin Elements, наверно лучшие на данный момент веб-компоненты, репозитории которых помогут вам при создании своих веб-компонент
Какой фреймворк использовать?
На данный момент, поддержка веб-компонент осуществлена поидее во всех популярных фреймворках. Главное, чтобы ваш фреймворк не конфликтовал сам с собой, когда на странице будут находится его разные версии, в остальном выбирайте на свое усмотрение.