Содержание
9 библиотек веб-компонентов / Хабр
1. Material components web
Если использовать в заголовке слово «Material», то это гарантированно даст первые места в рейтингах UI-библиотек. Веб-библиотека Google Material-components — это версия веб-компонента библиотеки Material-UI. Эти веб-компоненты можно включить в широкий спектр контекстов и сред.
Статья переведена при поддержке компании EDISON Software, которая разрабатывает электронную систему медицинского осмотра, а также занимается поддержкой программного обеспечения.
2. Polymer elements
Библиотека Polymer от Google позволяет создавать инкапсулированные веб-компоненты многократного использования, которые работают как стандартные элементы HTML, так же просто, как импорт и использование любого другого элемента HTML. Polymer elements — это организация GitHub, содержащая более 100 повторно используемых компонентов Polymer в качестве автономных репозиториев, которые можно просматривать и использовать в готовом виде.
Пример:
<!-- Import a component --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script> <!-- Use it like any other HTML element --> <paper-checkbox>Web Components!</paper-checkbox>
3. Vaadin web components
Это довольно новая библиотека, содержащая набор из почти 30 развивающихся веб-компонентов с открытым исходным кодом для создания пользовательского интерфейса мобильных и настольных веб-приложений в современных браузерах.
4. Wired elements
Wired elements — это набор «нарисованных от руки» (набравший 7000 звездочек). И з этих элементов можно создавать каркасы и они нарисованы так, что никакие два рендеринга не будут абсолютно одинаковыми — как две отдельные нарисованные от руки фигуры. Экспериментировать с ними можно здесь, и даже на React и на Vue.
5. Elix
Elix — это community-driven многократно используемый набор настраиваемых веб-компонентов для общих шаблонов пользовательского интерфейса.
Чтобы обеспечить стандарты высокого качества, компоненты сравниваются с контрольным списком золотого стандарта для веб-компонентов, который использует встроенные элементы HTML в качестве индикатора качества.
6. Time elements
<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm </local-time> -- <local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30 </local-time>
Эта довольно старая библиотека (1500 тыс. звезд). Является в основном компонентом, предоставляющим пользовательские подтипы стандартного HTML-элемента time. Отформатировав временную метку в виде локализованной строки или относительного текста, который автоматически обновляется в браузере пользователя, вы можете создавать собственные расширения для использования в любом месте.
7. UI5-webcomponents
Эта библиотека, созданная SAP. Представляет собой набор легких, многократно используемых и независимых элементов пользовательского интерфейса.
Компоненты которые не построены поверх UI5, остаются автономными элементами. Вы можете использовать поверх frameworkов и приложений. Дизайн компонентов приведен в соответствие с SAP Fiori Design Guidelines и включает дизайн Fiori 3. Протестируйте живую игровую площадку и API.
8. Patternfly
Run demo:
git clone [email protected]:patternfly/patternfly-elements.git cd patternfly-elements npm install # this will take a while due to lerna bootstrap npm run storybook
PatternFly Elements — это коллекция из почти 20 гибких и легких веб-компонентов и инструментов для их создания. Элементы PatternFly легки по размеру и наглядны (что в значительной степени является стандартом веб-компонента), работают в React, Vue, Angular, vanilla JS, везде, где используются элементы HTML.
9. Web components org
Это не библиотека, а поисковый портал Гугловских веб-компонентов, построенный на элементах Polymer и друзьях.
Я перечисляю его здесь, так как это полезный способ обновления новых веб-компонентов от команды Polymer и предоставляет некоторые полезные ресурсы для прочтения при начале работы с веб-компонентами.
Ещё ресурсы, заслуживающие внимания
- HTML Elements
- GitHub(web-components)
- michaelauderer/stencil-styled-components
- obetomuniz/awesome-webcomponents
- mateusortiz/webcomponents-the-right-way
- nepaul/awesome-web-components
- mappmechanic/awesome-stenciljs
- RIAEvangelist/awesome-webcomponents
Еще интересные публикации
- Как заставить ваши веб-приложения работать в автономном режиме
- Ещё 5 дерзких тренировочных проектов для разработчика (Layer, Squoosh, Калькулятор, Website Crawler, Music Player )
9 проектов, о которых стоит знать в 2019 году / Хабр
Автор материала, перевод которого мы сегодня публикуем, полагает, что если вы собираетесь использовать при проектировании интерфейсов своих приложений веб-компоненты и подыскиваете подходящую библиотеку, независимую от UI-фреймворков, вам стоит взглянуть на те проекты, о которых пойдёт здесь речь.
Предварительные сведения
Когда я, постоянно слыша о Stencil, Svelte и Lit HTML, задумал этот материал и начал поиск библиотек веб-компонентов, я думал о том, что мне непросто будет найти что-то интересное, основанное на возможностях HTML. Это было именно так из-за того, что тогда я ещё не осознал полного потенциала веб-компонентов. Я представлял собой человека, мышление которого ограничено рамками библиотек и фреймворков. Моё желание напоминало мне нечто вроде «поиска интересной HTML-библиотеки». Но теперь я понимаю, что найти хорошую библиотеку веб-компонентов не так уж и сложно.
Все веб-компоненты, благодаря тем базовым технологиям, на которых они построены, пользуются немалой популярностью, они, по определению, могут друг с другом взаимодействовать и хорошо показывают себя при их совместном использовании в рамках одного проекта. При этом то, что создаётся с использованием стандарта Web Components, скажем — некие компоненты или виджеты, будет, во-первых, работать во всех современных браузерах, а во-вторых, окажется совместимым с любой JavaScript-библиотекой или с любым JavaScript-фреймворком, которые используют HTML.
1. Библиотека Material Web Components
Обычно, если в названии библиотеки UI-компонентов есть слово «Material», это выводит её в лидеры рейтингов и загрузок. Библиотека Material Web Components от Google — это веб-версия библиотеки Material. Хотя рассматриваемая библиотека всё ещё находится в процессе разработки, компоненты, которые имеются в её составе, уже могут найти применение в огромном множестве веб-проектов. За развитием этой библиотеки, определённо, будет очень интересно наблюдать.
2. Набор репозиториев PolymerElements
Библиотека Polymer от Google позволяет создавать самодостаточные веб-компоненты, подходящие для многократного использования, которые работают по тому же принципу, что и стандартные HTML-элементы. Пользоваться этими веб-компонентами так же просто, как и обычными HTML-элементами. В репозитории PolymerElements собрано более 100 веб-компонентов, созданных средствами Polymer, представленных в виде самостоятельных репозиториев.
Вот пример работы с подобным веб-компонентом:
<!-- Импорт компонента --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script> <!-- Использование компонента похоже на использование обычного HTML-элемента --> <paper-checkbox>Web Components!</paper-checkbox>
3. Библиотека Vaadin Components
Полагаю, что Vaadin Components — это многообещающий проект. Данная библиотека содержит около 30 развивающихся опенсорсных веб-компонентов, предназначенных для разработки мобильных и настольных интерфейсов, рассчитанных на современные браузеры. Состояние репозитория библиотеки позволяет говорить о том, что над ней ведётся активная работа.
4. Библиотека Wired Elements
Библиотека Wired Elements набрала почти 7 тысяч звёзд на GitHub. Она позволяет создавать элементы, которые выглядят так, будто они нарисованы от руки.
Они напоминают макеты, при этом при каждом выводе на экран элементы меняются, то есть даже одна и та же страница, просматриваемая в разное время, будет выглядеть по-разному. Не знаю, пригодится ли кому-нибудь такая библиотека, бесспорно лишь то, что страницы, оформленные с её использованием, выглядят потрясающе. Здесь с ней можно поэкспериментировать. Вот пример её использования с React. А вот — с Vue.
5. Библиотека Elix
Elix — это набор веб-компонентов, покрывающий нужды стандартных шаблонов разработки интерфейсов. Высокое качество этих компонентов достигается благодаря обеспечению их соответствия рекомендациям, изложенным в этом документе. Например, в соответствии с этими рекомендациями качественными считаются стандартные HTML-элементы. Надо отметить, что проект Elix поддерживает сообщество единомышленников, и они ищут тех, кто может к ним присоединиться.
6. Библиотека time-elements
Библиотека time-elements существует уже довольно давно, она пользуется умеренной популярностью на GitHub.
В её основе лежит компонент, расширяющий возможности стандартного HTML-элемента <time>. С помощью этой библиотеки можно представлять отметки времени в виде локализованных строк, или в виде текста, автоматически обновляемого в браузере пользователя. Вот пример работы с этой библиотекой:
<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm </local-time> -- <local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30 </local-time>
7. Библиотека UI5 Web Components
Библиотека UI5 Web Components разработана в рамках проекта OpenUI5 силами SAP. Она представляет собой набор легковесных независимых элементов пользовательского интерфейса, подходящих для многократного использования. Надо отметить, что эти компоненты не являются надстройкой над UI5. Они представляют собой самостоятельные элементы, их можно использовать совместно с различными средами для разработки веб-интерфейсов.
Дизайн компонентов соответствует данному руководству SAP.
8. Проект PatternFly Elements
Проект PatternFly Elements — это коллекция из примерно 20 удобных веб-компонентов, а также инструменты для их разработки. Эти веб-компоненты подходят для использования их в любых сферах веб-разработки, хорошо сочетаются с различными библиотеками и фреймворками. Например, ими можно пользоваться при разработке веб-проектов с использованием React, Vue, Angular или обычного JavaScript.
Для того чтобы поэкспериментировать с PatternFly Elements, выполните следующую последовательность команд:
git clone [email protected]:patternfly/patternfly-elements.git cd patternfly-elements npm install # займёт некоторое время из-за использования lerna bootstrap npm run storybook
9. Проект webcomponents.org
Проект webcomponents.org — это портал, представляющий собой каталог веб-компонентов, построенных с использованием Polymer и дружественных проектов.
Он хорош тем, что с его помощью можно быть в курсе новых разработок команды Polymer. Также тут можно найти интересные материалы по веб-компонентам.
Итоги
В этом материале мы рассмотрели 9 проектов, связанных с веб-компонентами. Надеемся, вы, пройдясь по соответствующим репозиториям и сайтам, сможете найти то, что искали. Если тема веб-компонентов вам интересна — здесь, здесь и здесь вы можете найти списки веб-компонентов и дополнительные материалы по работе с ними.
Уважаемые читатели! Какими библиотеками веб-компонентов вы пользуетесь?
9 библиотек пользовательского интерфейса веб-компонентов, которые вы должны знать в 2021 году | Джонатан Саринг
Ищете веб-компоненты, не зависящие от фреймворка? Взгляните
Изображение из codeburst от @webrealizer
Когда я начал искать библиотеки веб-компонентов для написания этой статьи, я сначала подумал: «Где я могу найти классную библиотеку lit-html?» Это потому, что я еще не раскрыл весь потенциал веб-компонентов.
Это фреймворк/библиотека мышления. Это как спросить, хочу крутую html библиотеку. Все веб-компоненты совместимы по определению, чтобы хорошо работать с другими.
Пользовательские компоненты и виджеты, основанные на стандартах веб-компонентов, будут работать в современных браузерах и могут использоваться с любой библиотекой или инфраструктурой JavaScript, которые работают с HTML.
После всей этой болтовни о веб-компонентах, Stencil, Svelte, Lit HTML и т. д. я решил взглянуть на то, какие библиотеки веб-компонентов доступны в Интернете сегодня, чтобы получить преимущество в будущем. Не стесняйтесь предлагать больше!
Совет : Создайте свою собственную библиотеку! Сегодня это проще, чем когда-либо, с такими инструментами, как bit.dev и Bit (GitHub), которые позволяют динамически собирать существующие компоненты пользовательского интерфейса из ваших приложений и делиться ими между проектами в команде.
Попробуйте!
Создайте свой «iTunes», например, библиотеку компонентов в bit.dev
Совместно используйте повторно используемые компоненты кода в команде · Bit
Легко делитесь повторно используемыми компонентами между проектами и приложениями, чтобы строить быстрее в команде. Сотрудничайте в разработке…
bit.dev
Обычно заголовок «Материал» размещает библиотеку компонентов пользовательского интерфейса прямо в верхней части списка звезд и количества загрузок. Веб-библиотека Material-components-web от Google — это версия библиотеки Material-UI для веб-компонентов. Хотя эти веб-компоненты все еще находятся в стадии разработки, они могут быть включены в широкий спектр контекстов и сред. Обязательно отследите это.
material-components/material-components-web-components
Material Web Components — Material Design, реализованный как Web Components …
github.com
Библиотека Polymer от Google позволяет создавать инкапсулированные многоразовые веб-компоненты, которые работают как стандартные HTML-элементы с таким же простым интерфейсом, как импорт и использование любого другого HTML-элемента.
Polymer elements — это организация GitHub, содержащая более 100 повторно используемых компонентов Polymer в виде автономных репозиториев, которые вы можете просматривать и использовать в готовом виде. Пример:
Веб-компоненты!
PolymerElements
PolymerElements имеет 30 доступных репозиториев. Следуйте их коду на GitHub.
github.com
- Мысль: сохранить все компоненты в одном репозитории и сделать их по отдельности доступными для поиска и использования в одной коллекции Bit?
Я думаю, что это многообещающе. Это довольно новая библиотека, содержащая набор из почти 30 развивающихся веб-компонентов с открытым исходным кодом для создания пользовательского интерфейса мобильных и настольных веб-приложений в современных браузерах.
Разработка активна, и я обязательно буду следить за этой библиотекой. Проверьте это.
vaadin/vaadin
Развивающийся набор веб-компонентов с открытым исходным кодом для создания мобильных и настольных веб-приложений в современных браузерах. …
github.com
Компоненты Wired в коллекции Bit
Элементы Wired — это коллекция элементов с 7 тысячами звезд, которые кажутся нарисованными от руки. Созданные для каркасов, элементы нарисованы так, что никакие два рендеринга не будут абсолютно одинаковыми — как две отдельные фигуры, нарисованные от руки. Полезный? может быть. Потрясающий? определенно 🙂 Играйте с ними онлайн здесь, даже с React и Vue.
wiredjs/wired-elements
Коллекция элементов, которые выглядят нарисованными от руки. Отлично подходит для каркасов. — wiredjs/wired-elements
github.com
wired-elements by wiredjs · Bit
Коллекция элементов, которые кажутся нарисованными от руки. Отлично подходит для каркасов.
— 19 компонентов Javascript. Примеры…
bit.dev
Elix — это управляемый сообществом многоразовый набор настраиваемых веб-компонентов для распространенных шаблонов пользовательского интерфейса. Для обеспечения высоких стандартов качества компоненты оцениваются по контрольному списку золотого стандарта для веб-компонентов, который использует встроенные элементы HTML в качестве индикатора качества. Я очень взволнован этим, и они ищут участников… 🙂
elix/elix
Высококачественные настраиваемые веб-компоненты для распространенных шаблонов пользовательского интерфейса — elix/elix
github.com
--
1 апреля 2014 г. 16:30
1 апреля 2014 г. 21:30
Эта довольно старая библиотека с 1,5 тысячами звездочек представляет собой компонент, предоставляющий настраиваемые подтипы стандартного HTML 9.
0107 <время> элемент. Отформатировав отметку времени как локализованную строку или относительный текст, который автоматически обновляется в браузере пользователя, вы можете создавать собственные расширения для использования в любом месте. Хороший.
github/time-elements
Расширения веб-компонента для стандартного элемента. — github/time-elements
github.com
Созданная SAP UI5, эта библиотека представляет собой набор легковесных, многократно используемых и независимых элементов пользовательского интерфейса. Однако компоненты не созданы поверх UI5, а являются автономными элементами. Вы можете использовать его в разных платформах и приложениях. Дизайн компонентов соответствует Руководству по проектированию SAP Fiori и включает в себя дизайн Fiori 3. Проверьте живую игровую площадку и API.
SAP/ui5-webcomponents
Веб-компоненты UI5 — корпоративный сахар поверх нативных API! Создавайте пользовательские интерфейсы SAP Fiori с помощью…
github.
com
Запустите демонстрацию:
git clone [email protected]:patternfly/patternfly-elements.git
cd patternfly-elements
npm install # это займет некоторое время благодаря lerna bootstrap
npm run storybook
PatternFly Elements представляет собой набор из почти 20 гибких и легких веб-компонентов и инструментов для их создания. Элементы PatternFly легкие по размеру и шаблонные (что в значительной степени является стандартом веб-компонентов), работают в React, Vue, Angular, vanilla JS, везде, где используются элементы HTML.
patternfly/patternfly-elements
Элементы PatternFly: набор веб-компонентов пользовательского интерфейса. Внесите свой вклад в разработку patternfly/patternfly-elements, создав…
github.com
Это не библиотека, а скорее портал поиска веб-компонентов Google, построенный на базе Polymer Elements и друзей. Я перечисляю его здесь, так как это полезный способ обновления новых веб-компонентов от команды Polymer и предоставляет некоторые полезные ресурсы для чтения при начале работы с веб-компонентами.
webcomponents.org
Джастин Уиллис из Ionic присоединяется к нам на этой неделе, чтобы поговорить о разработке гибридных приложений с помощью Ionic и некоторых удивительных работах, которые они… HTML Elements имеет 18 доступных репозиториев. Следуйте их коду на GitHub.
github.com
GitHub (веб-компоненты)
Как люди создают программное обеспечение. На GitHub доступно 30 репозиториев. Следуйте их коду на GitHub.
github.com
michaelauderer/stencil-styled-components
Небольшая библиотека для переноса концепции стилизованных компонентов в StencilJS. — michaelauderer/stencil-styled-components
github.com
obetomuniz/awesome-webcomponents
Кураторский список потрясающих инструментов, статей и ресурсов по веб-компонентам. — obetomuniz/awesome-webcomponents
github.com
mateusortiz/webcomponents-the-right-way
Это руководство предназначено для ознакомления с веб-компонентами.
Здесь каждый может внести свой вклад! …
github.com
nepaul/awesome-web-components
Кураторский список потрясающих веб-компонентов. Внесите свой вклад в разработку nepaul/awesome-web-components, создав…
github.com
mappmechanic/awesome-stenciljs
Список потрясающих веб-компонентов, созданных с помощью StencilJS — mappmechanic/awesome-stenciljs
0005
github.com
RIAEvangelist/awesome-webcomponents
Внесите свой вклад в развитие RIAEvangelist/awesome-webcomponents, создав учетную запись на GitHub.
github.com
webcomponents.org
Джастин Уиллис из Ionic присоединяется к нам на этой неделе, чтобы поговорить о разработке гибридных приложений с помощью Ionic и некоторых удивительных работах, которые они…
www.webcomponents.org
How We Build Micro Интерфейсы
Создание микроинтерфейсов для ускорения и масштабирования процесса веб-разработки.
blog.bitsrc.io
Как мы создаем дизайн-систему
Создание дизайн-системы с компонентами для стандартизации и масштабирования нашего процесса разработки пользовательского интерфейса.
blog.bitsrc.io
11 библиотек компонентов пользовательского интерфейса React, которые вы должны знать в 2019 году
11 библиотек компонентов React с отличными компонентами для создания пользовательского интерфейса вашего следующего приложения в 2019 году. 11 библиотек компонентов Vue UI, которые вы должны знать в 2019 году
11 библиотек компонентов Vue.js, инструментов и фреймворков для вашего следующего приложения в 2019 году. app в 2019 году.
blog.bitsrc.io
Что такое Lit? – Lit
Lit — простая библиотека для создания быстрых и легких веб-компонентов.
В основе Lit лежит базовый класс компонентов, убивающий шаблоны, который обеспечивает реактивное состояние, стили с ограниченной областью действия и декларативную систему шаблонов, которая является крошечной, быстрой и выразительной.
Что я могу построить с помощью Lit?
Постоянная ссылка на «Что я могу построить с Lit?» #
Вы можете создать практически любой веб-интерфейс с помощью Lit!
Первое, что нужно знать о Lit, это то, что каждый компонент Lit является стандартным веб-компонентом . Веб-компоненты обладают суперспособностью взаимодействия: изначально поддерживаемые браузерами, веб-компоненты могут использоваться в любой среде HTML, с любой структурой или вообще без нее.
Это делает Lit идеальным выбором для разработки совместно используемые компоненты или системы проектирования . Компоненты Lit можно использовать в нескольких приложениях и сайтах, даже если эти приложения и сайты построены на различных интерфейсных стеках. Разработчикам сайтов, использующим компоненты Lit, не нужно писать или даже видеть какой-либо код Lit; они могут просто использовать компоненты так же, как и встроенные элементы HTML.
Lit также идеально подходит для прогрессивного улучшения базовых HTML-сайтов .
Браузеры распознают компоненты Lit в вашей разметке и автоматически инициализируют их — независимо от того, создается ли ваш сайт вручную, управляется ли он через CMS, создается с помощью серверной среды или создается с помощью таких инструментов, как Jekyll или одиннадцати.
Конечно, вы также можете создавать высокоинтерактивные многофункциональные приложения из компонентов Lit, точно так же, как вы делаете это с такими фреймворками, как React или Vue. Возможности и опыт разработчиков Lit сопоставимы с этими популярными альтернативами, но Lit сводит к минимуму блокировку, обеспечивает максимальную гибкость и удобство сопровождения за счет использования собственной компонентной модели браузера.
Когда вы создаете приложение с помощью Lit, легко добавлять «ванильные» веб-компоненты или веб-компоненты, созданные с помощью других библиотек. Вы даже можете обновиться до основной новой версии Lit или перейти на другую библиотеку — по одному компоненту за раз, не прерывая разработку продукта.
Каково это разрабатывать с Lit?
Постоянная ссылка на «Каково это разрабатывать с Lit?» #
Если вы занимались какой-либо современной веб-разработкой на основе компонентов, вы должны чувствовать себя как дома с Lit. Даже если вы раньше не работали с компонентами, мы думаем, что Lit будет для вас очень доступным.
Каждый компонент Lit представляет собой автономную единицу пользовательского интерфейса, собранную из более мелких строительных блоков: стандартных HTML-элементов и других веб-компонентов. В свою очередь, каждый компонент Lit сам по себе является строительным блоком, который можно использовать — в документе HTML, другом веб-компоненте или компоненте фреймворка — для создания более крупных и сложных интерфейсов.
Вот небольшой, но нетривиальный компонент (таймер обратного отсчета), который иллюстрирует, как выглядит код Lit, и выделяет несколько ключевых функций:
Несколько замечаний: удобное и универсальное расширение нативного HTMLElement .
Вы расширяете его, чтобы определить свои собственные компоненты.
Lit не требует компиляции или сборки во время разработки, поэтому при желании его можно использовать практически без инструментов. Первоклассная поддержка IDE (дополнение кода, линтинг и т. д.) и инструменты для производства (локализация, минимизация шаблонов и т.
д.) легко доступны.
Почему я должен выбрать Лит?
Постоянная ссылка на «Почему я должен выбрать Lit?» #
Как мы уже отмечали, Lit — отличный выбор для создания всевозможных веб-интерфейсов, сочетающий в себе преимущества веб-компонентов, основанные на взаимодействии, с современным эргономичным интерфейсом разработчика.
Обозначается также:
- Простой. Основываясь на стандартах веб-компонентов, Lit добавляет именно то, что вам нужно, чтобы быть счастливым и продуктивным: реактивность, декларативные шаблоны и несколько продуманных функций, которые уменьшают шаблонность и облегчают вашу работу.
- Быстро. Обновления выполняются быстро, потому что Lit отслеживает динамические части вашего пользовательского интерфейса и обновляет только те из них, когда изменяется базовое состояние — нет необходимости перестраивать все виртуальное дерево и сравнивать его с текущим состоянием DOM.
- Легкий.
