Готовые веб-компоненты
В интернете, среди готовых веб-компонент, в основном пока встречаются только элементы интерфейса (кнопки, меню, текстовые поля, диалоговые окна, выбор даты, таблицы ...), но бывает уже попадаются более сложные веб-компоненты (графики, голосовые, шаблоны для приложений ...), веб-компоненты заточенные под различные API (Google, Firebase, Twitch ...).
Вот некоторые места, где вы можете найти веб-компоненты:
На самом деле разнообразных веб-компонент на порядок больше, просто они находятся в закрытых репозиториях. Многие компании уже несколько лет используют веб-компоненты.
Вот несколько видео с саммитов, можете посмотреть, как они их делают, используют и какие задачи они у себя решают с помощью веб-компонент:
Даже существующее небольшое количество веб-компонент существенно облегчают разработку. Уже сейчас есть большинство существующих элементов интерфейса в формате веб-компонент. Многие веб-компоненты сделаны очень качественно, имеют множество настроек, оптимизированы, документированы, постоянно обновляются и главное бесплатны (но не все). На создание подобных веб-компонент на том же уровне, у вас бы ушли месяцы, но не уйдут, вы просто устанавливаете их и используете, не забивая себе ничем голову. Вот некоторые примеры веб-компонент, которые сделаны в лучших традициях, надо стремиться делать что-то подобное. (Polymer Elements, Vaadin Elements)
Вы наверно уже приметили, что во многих веб-компонентах фигурирует название Polymer. Что еще за Polymer? Polymer - это библиотека для создания веб-компонент и одновременно фреймворк для создания приложений. Суть в том, что веб-компоненты можно писать используя только спецификацию и полифиллы для поддержки всех браузеров (как это было при написании employees-sample, h1-sample в предыдущих разделах), а можно еще при разработке использовать свои инструменты, какую-нибудь библиотеку или фреймворк (Polymer, Vue.js, React ...).
Веб-компонента сделанная с использованием только спецификации и полифиллов будет работать везде.
Веб-компонента сделанная с помощью сторонней библиотеки будет работать не везде. Работа веб-компоненты будет зависеть от возможностей используемой библиотеки и ваших потребностей.
Используя библиотеку Polymer написано довольно много веб-компонент. Чтобы использовать эти готовые веб-компоненты вам придется вместе с ними добавлять и библиотеку Polymer на страницу, но как будет рассмотрено в следующем разделе, это далеко не самый оптимальный вариант для систем. И Polymer и сделанные с помощью него веб-компоненты в большинстве случаев использовать в WebTutor и других системах не получится.(касается Polymer ver.1-2, в Polymer ver.3 таких проблем нет)
Рассмотрим, что надо учитывать при выборе вспомогательной для разработки веб-компонент библиотеки, чтобы ваши веб-компоненты работали во всех системах.