Источник: Nuances of Programming
Приготовьтесь отправиться в путешествие по изучению прототипирования приложения с помощью веб-компонентов, модулей es6, event target, bit cli и т. д. Вместе мы узнаем, как использовать веб-компоненты и изучим несколько дополнительных особенностей.
В этой статье мы выполним прототипирование RSS reader с использованием веб-компонентов. Конечный результат будет выглядеть следующим образом:
Код можно найти на GitHub.
Почему веб-компоненты??
Поговорим о том, почему стоит выбрать веб-компоненты для UI-стратегии. Есть несколько причин:
- Техническая перспективность. Веб-компоненты представляют собой стандарт и поддерживаются браузером. Краткая история сети показывает, что выбор стандарта приносит пользу.
- Framework-agnostic. Когда несколько команд работают над одним приложением с несколькими библиотеками, такими как Vue и React, достижение одной функциональности между этими библиотеками представляет трудную задачу. Необходима стандартизация!
- Повторно используемая система дизайна. Еще один способ применения framework-agnostic компонентов проявляется при необходимости создания системы дизайна для команды.
- Размер bundle. Несмотря на то, что React является более завершенным с точки зрения использования API и поддержки библиотек, порой размер действительно имеет значение.
Что такое веб-компоненты?
Благодаря веб-компонентам можно развивать инкапсулированный от основного документа компонент. Веб-компоненты предлагают:
- Пользовательский элемент — это API Javascript, с помощью которого можно определить новый тип html-тега в соответствии с коллекцией компонентов.
- Шаблоны HTML — представляют собой теги <template> и <slot>, с помощью которых можно определить layout шаблона.
- Shadow DOM — специфичный для компонента. Это своего рода изолированное окружение для DOM компонента, отделенное от основного документа.
Вместе эти три API позволяют инкапсулировать функциональность компонента и с легкостью отделить его от основного APP. По сути, с его помощью можно расширить api DOM с дополнительными тегами.
Как работает lit?
Lit — это абстракция над оригинальным api, предоставляющая две основные возможности:
Lit-html — библиотека для созданияповторно используемых html-шаблонов в контексте javascript.
Эта библиотека использует функцию под названием теговые шаблоны вместе с es6, которые выглядят следующим образом:
tag `some ${boilerPlate} in my string`
С помощью этой функции можно выполнить парсинг строки с пользовательским элементом. Это ядро lit-html, сочетающее шаблоны в javascript прямо в браузере. В случае с lit, функция render внутри элемента lit может содержать следующее выражение:
Документацию можно посмотреть здесь.
lit-element — базовый класс для компонентов. Он предоставляет способ определения props, привязку к жизненному циклу компонента и унифицированный интерфейс компонента.
Чтобы разобраться подробнее, рассмотрим компонент nav-bar:
Создание RSS-Reader!
Для тех, кто не знаком с RSS, это протокол синдикации, созданный на рубеже веков, который предоставляет пользователям и приложениям доступ к обновлениям онлайн содержимого.
Исходный код проекта можно найти в этом репозитории.
Основные ограничения по дизайну:
- Lit-element. В этом проекте используются lit-html и lit-element от команды разработчиков polymer. Это отличная библиотека для работы над стандартами веб-компонентов, устраняющая множество проблем при работе с шаблонами, однако стоит отметить, что создание lit было вдохновлено библиотекой hyper, которую также стоит изучить.
- Отсутствие Bundle (практически). В попытке изучить несколько новых функций сети, этот проект использует модули es6. Однако это лишь исключение из правила, парсер RSS от Bobby Brennan — это “обычный” пакет браузера.
- Подходит только для браузера. У этого проекта отсутствует компонент backend.
- Все модули доступны на платформе компонентов bit.devдля повторного использования. bit cli и платформа — это одни из лучших способов обмена компонентами JS и в особенности веб-компонентами.
- В этом проекте используются timers и eventTarget вместо workers. Workers не работают с модулями es6.
- Этот репозиторий находится на стадии прототипирования, поэтому не содержит тестирования.
Рассмотрим основные entry points приложения. index.html
Главная функция в файле reader.js:
Суть заключается в том, что все части соединяются посредством событий, а каждый компонент приложения независим. Чтобы увидеть остальную часть приложения, загляните в репозиторий.
Общие
- index.html — в качестве главного layout проекта.
- reader.js — главный файл javascript проекта, устанавливающий event emitters.
Папка Elements — веб-компоненты lit-element.
- item-list.js — список элементов feed, отображающий текущий выбранный feed.
- nav-bar.js — редактирование и использование feed.
- rss-item.js/nav-item.js — представляет фрагмент внутри соответствующих списков.
Папка RSS. Хранилище и возможности rss
- events.js — содержит все названия событий и функцию создания событий.
- feed-key.js — функция для создания уникального ключа feed в хранилище.
- rss-client.js — получает и парсирует rss feed.
- rss-store — главное состояние приложения.
Папка Utils
- defer-function.js используется для отправки асинхронных событий.
- define-elements.js по возможности избегает глобальных веб-компонентов.
Следует отметить, что модульность заложена в структуре приложения. Все папки проекта содержат компоненты различных типов.
bit CLI — это основной движок для возможности повторного использования. С помощью инструмента Bit можно написать модульный код, а также управлять исходным кодом и зависимостями.
Рассмотрим еще один компонент. Фрагмент кода для компонента rss client.
Обратите внимание, что в этом компоненте присутствует инверсия контроля, а главные зависимости клиента получены в функции factory. Также используется функция setTimeout, которая вызывает себя в качестве основного timer для опроса feed. Это действие выполняется каждые 10 секунд для упрощения отладки.
Некоторые проблемы этого проекта:
- `customElements.define` является глобальным. Как было сказано выше, компоненты определены глобально. Помимо этого, во всех рассмотренных мной примерах метод define вызывается внутри модуля, что приводит к инкапсуляции и коллизии имен при росте базы кода компонента в приложении. В попытке переместить все это в одно место я создал компонент define-element.
- Не так легко использовать повторно. Чтобы повторно использовать в React компонент, нужно упаковать в него веб-компонент. Это необходимо для контроля над распространением событий и props.
- При работе с модулями es6 и выходе из node разрешение модуля трудно определить интуитивно. Можно ожидать, что папка преобразуется в index.js, если рассматривать ее как систему модулей. Однако если представить ее в качестве веб-сервера, возвращающего ассеты, ситуация приобретает смысл. Также добавление этих .js портит внешний вид кода.
Что мы рассмотрели?
Мы изучили прототип приложения RSS reader, а также его структурирование для повышения модульности. Мы узнали, почему стоит использовать веб-компоненты, а также как интегрировать их в приложение. И наконец, мы рассмотрели несколько проблем, связанных с использованием веб-компонентов.
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Doron Tsur: Prototyping with Web Components: Build an RSS Reader
