Если предприятие может развертывать веб-компоненты, сможете и вы!
Сегодня я не хочу обсуждать заменят ли веб-компоненты Frontend Frameworks. Кроме того, я не горю желанием обсуждать, являются ли Frontend Frameworks будущим веб-разработки, так же как я не хочу обсуждать умерли ли веб-компоненты. В следующих статьях я сосредоточусь на крупных технологических компаниях, которые уже встали на путь веб-компонентов.
В следующих статьях я рассмотрю разные компании: Salesforce, Youtube, Github, SAP и другие. Все они решили полагаться на веб-компоненты по-разному, кто-то больше, кто-то меньше. Мы узнаем, почему эти компании делают ставку на веб-компонент и как они его реализуют. В этой статье мы более подробно рассмотрим Github, чтобы проанализировать их подход к использованию веб-компонентов в существующей монолитной кодовой базе. Хочу подчеркнуть, что я не работаю на Github и не знаю их внутренней инфраструктуры. Так что, если вам случится там работать, не стесняйтесь давать мне отзывы, если упомянутые вещи применимы.
Если вы новичок в теме Веб-компоненты, я бы посоветовал вам сначала прочитать эту статью, чтобы получить представление о том, что такое веб-компоненты. Если вы хотите углубиться в технические детали, вы можете следовать одной из моих статей:
Гитхаб
Когда Github был запущен более десяти лет назад, его кодовая база внешнего интерфейса в основном использовала jQuery. С годами их монолит GitHub рос в размерах, и они увидели необходимость в улучшении инкапсуляции, прежде чем внешний интерфейс станет неуправляемым. Они выбрали Веб-компоненты, потому что их кодовая база уже была структурирована в поведение, подобное компонентам. Кроме того, они могут экспериментировать с веб-компонентами вместе со своей существующей инфраструктурой внешнего интерфейса, поскольку это не требует каких-либо предварительных затрат или «покупки» для конкретной платформы.
Но Github также столкнулся со многими проблемами при переходе к интерфейсной инфраструктуре с использованием веб-компонентов. Есть некоторые общие болевые точки, такие как рендеринг на стороне сервера, доступность и другие, с которыми все разработчики сталкиваются в связи с текущим состоянием веб-компонентов.
Библиотеки веб-компонентов
Чтобы решить эти проблемы, Github решил создать собственную библиотеку веб-компонентов Catalyst, чтобы облегчить их жизнь. Github разработал библиотеку с учетом конкретных потребностей своих разработчиков и вдохновился библиотекой Google Lit и Stimulus. Кроме того, они передают части своего кода Rails, используя ViewComponent, фреймворк для создания повторно используемых компонентов в Rails.
Catalyst, наша библиотека с открытым исходным кодом, упрощающая написание веб-компонентов — github.blog
Миграция монолитной архитектуры интерфейса в слабосвязанную архитектуру микроинтерфейса — это не то, что вы можете сделать за одну ночь. Вместо этого Github регулярно анализирует свои кодовые базы и ищет хорошие компоненты-кандидаты для извлечения. Эти компоненты обобщаются в надежный, строго поведенческий, свободный от зависимостей веб-компонент.
Преимущества использования Catalyst с самого начала заключаются в том, что библиотека абстрагируется от некоторых распространенных ошибок при написании веб-компонентов и применяет передовой опыт. — github.блог
Самое интересное в их процессе то, что они начинают использовать свою библиотеку Catalyst внутри монолитной структуры. Затем, после тестирования в рабочей среде, они переносят элемент в собственный репозиторий. Тем не менее, к извлеченным компонентам может быть добавлен некоторый код, специфичный для приложения, поскольку они используются в разных контекстах. Это делает компоненты связанными с монолитным приложением. Чтобы компонент работал в других контекстах, он должен быть гибким и обобщенным.
И вот в чем подсказка: прежде чем извлекать компонент Catalyst, они делают настраиваемые настраиваемые элементы, удаляютфункции, специфичные для Catalyst, и преобразуют его в простой веб-компонент без каких-либо зависимостей. Вы можете спросить:
Зачем удалять библиотеку, которая, по утверждению команды, упрощает написание веб-компонентов? — github.blog
Хотя Catalyst полезен для разработчиков, мы хотим, чтобы наши компоненты не имели зависимостей. Требование к разработчикам вне организации GitHub понимать Catalyst, прежде чем добавлять код обратно в компонент, — это дополнительные трения, на которые мы не хотим навлекаться.
Кроме того, удаление зависимостей и стандартного кода всегда полезно для повышения производительности компонентов и уменьшения их размера.
Компоненты с открытым исходным кодом
В настоящее время Github извлек 17 пользовательских элементов в свой репозиторий Github-Elements с открытым исходным кодом. Итак, где найти веб-компоненты во вселенной Github? Давайте проверим страницу Github и найдем пользовательские элементы. На первый взгляд кажется, что Github редко использует веб-компоненты.
Давайте заглянем в репозиторий Github с открытым исходным кодом, чтобы увидеть, где нам нужно искать конкретно. Мы видим, что Github создал элемент буфера обмена. Наверное, каждый разработчик хоть раз использовал эту кнопку, чтобы скопировать ссылку для клонирования репозитория:
При проверке исходного кода мы видим, что Github распространяет компонент с помощью кастомного элемента:
Github передает значение для копирования, обратную связь об успехе для пользователя и некоторые другие атрибуты компоненту. Мы видим, что элемент обобщен в надежный и строго поведенческий веб-компонент. Компонент является гибким, поэтому любой другой может повторно использовать его в своем веб-приложении.
Кроме того, при анализе файла элемента package.json мы видим, что он полностью свободен от зависимостей:
Github включает только зависимости для разработки, чтобы правильно протестировать компонент и обеспечить лучший опыт разработчика с использованием Typescript, eslint и т. д.
Регистрация веб-компонента может потребовать некоторых шаблонов, но мы упрощаем ее с помощью соглашений об именах и небольшого количества декораторов TypeScript. — github.блог
Вы можете легко использовать этот компонент, добавив его в качестве зависимости, запустив:
$ npm install --save @github/clipboard-copy-elementИ импортируйте его как модуль ES в свою кодовую базу:
import '@github/clipboard-copy-element'
Анализируя соответствующую папку в node_modules, мы видим, что зависимость составляет всего 3000 байт. Это было бы невозможно, если бы Github использовал библиотеку для создания.
Последние мысли
Как и многие другие компании, Github решила уделять больше внимания веб-стандартам. Инкапсуляция частей их существующей кодовой базы в более мелкие, обобщенные и гибкие веб-компоненты делает их существующую кодовую базу менее связанной. Самое главное, что компоненты можно повторно использовать в любой веб-среде, независимо от какой-либо внешней среды. Это гарантирует устойчивость извлеченных компонентов к любым изменениям инфраструктуры. Таким образом, Github готовится к долгосрочной перспективе, независимо от того, будут ли веб-компоненты будущим или фреймворки для внешнего интерфейса продолжат свое существование.
Я всегда рад ответить на вопросы и открыт для критики. Не стесняйтесь обращаться ко мне в любое время! Свяжитесь со мной через LinkedIn,подпишитесь на меня вTwitter или подпишитесь, чтобы получать мои истории по электронной почте.
Вот ссылка для неограниченного доступа ко всему контенту здесь, на Medium. Если вы зарегистрируетесь по этой ссылке, я заработаю небольшую сумму без каких-либо дополнительных затрат для вас.
об авторе
Я аналитик по разработке программного обеспечения в Accenture Song. Что меня больше всего движет, так это мое стремление создать что-то, что может быть полезным и изменить жизнь других. Например, вы устали просматривать свою историю, чтобы найти информацию, которую вы видели несколько дней назад? Мое расширение Web Highlights для Chrome поможет вам и повысит вашу продуктивность, организовав ваши исследования структурированным и эффективным способом. Как и в книгах и статьях, выделяйте текст на любой веб-странице или в PDF-файле. Ваши основные моменты синхронизируются непосредственно с веб-приложением на web-highlights.com, где вы можете найти их где угодно.
Дальнейшее чтение
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Больше контента в публикации Level Up Coding.
Подписывайтесь: Twitter, LinkedIn, Информационный бюллетень
Level Up меняет рекрутинг в сфере технологий ➡️ Присоединяйтесь к нашему коллективу талантов
