Были ли у вас проблемы с добавлением визуализации биологических данных на ваш веб-сайт? Вы также хотели, чтобы был более простой способ использования компонентов в ваших проектах? Или вы разработчик и хотите, чтобы ваш компонент можно было легко использовать, написав всего несколько строк кода? Тогда читайте дальше!
Веб-компоненты — это набор API-интерфейсов веб-платформы, которые позволяют создавать новые настраиваемые многократно используемые инкапсулированные теги HTML для использования на веб-страницах и в веб-приложениях. Например. — Используя веб-компоненты, вы можете создать HTML-тег (скажем, shape), который принимает имя многоугольника в качестве ввода от пользователя и рисует его на веб-странице — ‹shape name="square"›.
В этом году проект GSoC BioJS был генератором йоменов, который позволяет очень легко создавать новые веб-компоненты и обновлять существующие компоненты до веб-компонентов. Чтобы увидеть пример, посмотрите на био-пв, вы можете прочитать, как использовать его в своем проекте здесь. Теперь взгляните на его веб-компонент. Вы можете увидеть разницу ниже -
- Шаги по использованию компонента -
2. Шаги по использованию веб-компонента -
Вы можете использовать веб-компонент в своем проекте всего за 9–10 строк, тогда как раньше это занимало сотни строк кода. Заинтересованы? Давайте рассмотрим дальше, чтобы понять, как это делается, каковы преимущества и что вам нужно сделать, чтобы создать свой веб-компонент.
Как это сделано?
Теперь у вас есть общее представление о том, что делает Генератор веб-компонентов BioJS? Наденьте свои кодовые шляпы, потому что пришло время погрузиться глубже. Генератор использует yeoman для создания всех шаблонов для создания веб-компонентов и создания каркасов старых компонентов для их обновления в веб-компоненты. Давайте прочитаем об этом один за другим -
Создание нового компонента -
Чтобы создать новый компонент, вам нужно много кода, чтобы начать работу над проектом. Будь то установка некоторых основных модулей npm, добавление кода для его тестирования на локальном сервере, создание файла README или объединение всего кода для размещения вашего проекта. Генератор делает все это и создает структуру каталогов (см. изображение ниже), чтобы помочь вам запустить ваш проект. Вам просто нужно ответить на несколько вопросов и ГОТОВО!
Теперь, чтобы написать свой компонент, вы можете выполнить следующие шаги:
- Установите зависимости
- Напишите код в index.js и основные стили в style.less
- Запустите npm run less, чтобы собрать css.
- Запустите npm run build, чтобы собрать скрипт.
- Используйте свой компонент в examples/index.html и протестируйте его с помощью запуска npm.
Готово, ваш проект готов к выпуску.
Чтобы увидеть пример нового компонента, созданного с помощью генератора, посмотрите на Инструмент гомологии BioJS, который находит и показывает все возможные гомологи гена для данного организма и гена с использованием Регистра InterMine.
Обновление старого компонента -
Генератор веб-компонентов BioJS значительно упростит процесс обновления вашего компонента. Для этого используется hybridJS. Вы должны импортировать свой старый компонент и внести небольшие изменения, чтобы обернуть его как веб-компонент. Шаги для этого -
- Импортируйте файл сборки/пакет npm вашего старого компонента.
- Напишите код в index.js, чтобы обновить его до веб-компонента, и добавьте стили в style.less.
- Запустите npm run less, чтобы собрать css.
- Запустите npm run build, чтобы собрать скрипт.
- Используйте свой компонент в examples/index.html и протестируйте его с помощью запуска npm.
Вы уже читали о био-пв и видели, как его веб-компонент значительно упростил задачу. Другой пример — Complex Viewer. В то время как раньше вам нужно было написать около 100 строк сложного кода -
Используя его веб-компонент, вы можете делать то же самое примерно в 20 строках, просто используя его как тег HTML и передавая конфигурации в качестве атрибутов:
О подробном процессе обновления и создания веб-компонентов вы можете прочитать здесь.
Бонус:
