ING открывает Lion: библиотеку производительных, доступных и гибких веб-компонентов

Автор оригинала: Thomas Allmer
  • Перевод
Всем привет. В преддверии старта курса «Fullstack разработчик JavaScript» подготовили для вас перевод интересного материала.





TL;DR: Веб-разработка дело трудное независимо от того, создаете вы свои собственные компоненты, используете дизайн-системы, реализуете поддержку различных браузеров, обеспечиваете доступность или добавляете сторонние зависимости. Lion стремится облегчить вашу жизнь, беря на себя реализацию полнофункциональных, доступных, производительных и не привязанных к определенному фреймворку компонентов. Загляните в репозиторий ing-bank/lion.

Возможно, некоторые из вас уже знают, что у ING долгая и богатая история создания веб-компонентов, начиная с библиотеки Polymer и заканчивая недавней LitElement.

Хотите освежить в памяти? Веб-компоненты – это набор стандартов браузера, которые позволяют нам писать нативные, переиспользуемые, инкапсулированные и модульные компоненты.

Стандарты веб-компонентов наконец-то окрепли, и на сегодняшний день существует множество способов реализации и использования веб-компонентов, таких как: Angular Elements, Stencil, Vue, Svelte и многих, многих других. А с выходом Chromium Edge стало ясно, что теперь все основные браузеры будут поддерживать веб-компоненты из коробки.

Поэтому сегодня я рад поделиться с вами всем тем, что ING открывает для свободного использования в своей библиотеке веб-компонентов Lion!

Почему Lion?


Представим следующий вымышленный сценарий:
Леа – разработчик из Betatech, она работает над новым внутренним приложением компании.

Framework Agnostic


Поиск компонентов дело непростое и результат может вас разочаровать.

Леа находит идеальный компонент для своей задачи, но, к сожалению, он написан на определенном JavaScript-фреймворке, поэтому его нельзя просто взять и использовать.

Кроме того, у компаний есть своя собственная визуальная идентичность и переписывание уже полностью стилизованных компонентов, чтобы «подогнать» их под айдентику компании, иногда может означать большее количество работы, чем создание стилизации с нуля.

Леа находит компонент, который предлагает весь нужный функционал, однако он не подходит под айдентику Betatechs.

Адаптация функционала


После того, как вы нашли идеальный компонент, в какой-то момент вы можете обнаружить, что компонент не несет в себе какую-то определенную нужную вам функциональную нагрузку.

Леа решает скопировать код найденного компонента и реализовать функцию самостоятельно, а в результате теперь приходится поддерживать компонент целиком, что ложится дополнительной нагрузкой на проект.

Доступность


Ваши компоненты должны быть доступны любому пользователю. Доступность — это непросто, но необходимо, к тому же, проблемы доступности может быть сложно исправить на более поздних этапах, не прибегая к критическим изменениям, поэтому крайне важно обеспечивать доступность с самого начала.

Во время работы Леа обнаруживает проблему с доступностью у компонента, который она нашла в интернете. Она не может ее исправить в коде, поэтому просит авторов компонента помочь ей. Но они отвечают, что не могут ничем помочь, потому что не хотят ничего менять.

Или же,

Леа пишет свой собственный компонент, но проблемы с доступностью сложно исправить уже из-за того, как она изначально написала HTML-структуру, к тому же исправление повлечет за собой критические изменения.


Резюмируем


Не кажется ли вам, что история Леа имеет прямое отношение к делу?
Она затрагивает несколько распространенных проблем современной веб-разработки:

  • Находить и добавлять зависимости – это непростое дело;
  • Выбор компонента из-за его внешнего вида – не лучшая идея;
  • Корректирки поведения или стиля порой трудно поддерживать;
  • Если пакет популярный, это еще не значит, что он обладает хорошей доступностью или производительностью.

Что можно сделать, чтобы решить эти проблемы?

  • Представьте, что у вас есть компоненты, основная задача которых – обеспечить функциональность, а дизайн остается на ваше усмотрение.
  • Представьте, что у этих компонентов отличная доступность и производительность.
  • Представьте, что эти компоненты расширяемые и гибкие.

А теперь перестаньте мечтать и обратите внимание на Lion.

Что такое Lion?


Мы хотим продвигать web – по одному компоненту за раз.
Lion – это white-label библиотека с открытым исходным кодом, которая не зависит от фреймворков и может стать основой дизайн-системы вашей компании. Согласованность внешнего вида и функционала – это трудная задача и мы надеемся, что с Lion сможем облегчить вашу работу.

White Label


Lion – это базовый пакет white-label веб-компонентов. Это значит, что у компонентов минимальная стилистика, но присутствуют все основные функциональные возможности. White label продукты часто создаются так, чтобы предоставить другим пользователям возможность адаптировать визуальную идентичность компонента под себя. Это здорово, потому что значит, что каждый может использовать основные функциональные возможности наших компонентов, задействовав свой собственный брендинг или дизайн-систему, потому что, удивительно, но не всем нравится оранжевый цвет.

Именно этим мы и занимаемся в ING. Наши собственные ing-web компоненты расширяют компоненты Lion и применяют нашу визуальную идентичность ING, которая представляет собой тонкий слой поверх Lion.

Посмотрите на демо Lion. Выглядит простовато, не так ли? А теперь сравните с Lion в связке с ing-web:



Основной фокус


Lion разрабатывался с фокусом на глобальное использование и возможность переиспользования. Вследствие этого следующие особенности были добавлены с самого начала:

  • Переиспользование – наши компоненты предназначены для распространения и использования в глобальном масштабе;
  • Доступность – наши компоненты предназначены для того, чтобы быть доступными для всех;
  • Производительность – наши компоненты должны быть небольшими, производительными и быстрыми.

Все эти особенности позволяют нам глобально разворачивать наши компоненты и находить взаимопонимание при работе над ними. Это гарантирует, что у каждого в ING есть солидный набор строительных блоков для создания своего приложения и быстрого старта.

Извлеченные уроки


ING начали использовать веб-компоненты очень рано, и Lion не первая библиотека компонентов, которую мы создали. Поэтому вы можете задаться вопросом, чем этим компоненты отличаются от предыдущего поколения?

Lion создавался с нуля, чтобы обеспечить доступность и расширяемость, поскольку мы знали, что почти невозможно добавить эти вещи на более поздних этапах развития. Хотелось бы выделить несколько уроков, которые мы извлекли при создании Lion:

  • Не все должно стать веб-компонентом, для добавления определённой функциональности лучше использовать обычный JavaScript;
  • Оставайтесь как можно ближе к нативным HTML-элементам;
  • Работайте над доступностью с самого начала;
  • Не все должно находиться в теневом DOM, это особенно важно для aria-отношений и доступности;
  • Компоненты пользовательского интерфейса – это сложно.

«Каждый должен использовать веб-компоненты, но не каждый должен их писать.»
Erik Kroes

Используйте Lion!


Lion может помочь вам в реализации вашей дизайн-системы, предоставив white-label, функциональную, доступную и производительную основу для вашей библиотеки компонентов. Все, что вам нужно, это добавить свой собственный дизайн! Поэтому если ваша компания хочет систематизировать вашу дизайн-систему, Lion станет отличным началом!

Помимо этого, вы можете использовать Lion для создания версий веб-компонентов ваших любимых дизайн-систем, таких как: Bulma, Bootstrap, Material, Bolt, Argon, Tailwind.

К тому же, чем больше пользователей и контрибьюторов у Lion, тем более стабильной будет его база, что отразится на всех, кто использует Lion.

Вносите свой вклад в развитие Lion!


На момент написания статьи Lion еще находится в бета-версии. Нам хотелось бы получить ваши отзывы, перед тем как мы перейдем к стабильному релизу, так что если вам нравится open source и вы хотите помочь Lion, вы можете сделать это:

  • Создавая и закрывая issue;
  • Работая над абсолютно новым компонентом (начните с обсуждения issue);
  • Улучшая документацию;
  • … любой вклад важен! Даже исправление опечаток в документации

Не стесняйтесь открывать issue на github для отправки любых отзывов или вопросов, которые могут у вас возникнуть. А еще вы можете найти нас в слэке Polymer в канале #lion .

Присоединиться к слэку Polymer вы можете по ссылке.

Расширение компонентов


Вы можете использовать Lion как базу для реализации своей собственной дизайн-системы.

Посмотрим, как сложилась история Леа, если бы она выбрала Lion.

Для начала, установите все необходимое:

npm i lit-element @lion/tabs

Создайте компонент lea-tabs, переиспользовав функционал Lion. Это позволило Леа получить всю функциональную нагрузку и доступность, которая понадобится для реализации ее собственного компонента вкладок.

import { css } from 'lit-element';
import { LionTabs } from '@lion/tabs';

export class LeaTabs extends LionTabs {
  static get styles() {
    return [
      super.styles,
      css`
        /* my stylings */
      `
    ];
  }

  connectedCallback() {
    super.connectedCallback();
    this._setupFeature();
  }

  _setupFeature() {
    // being awesome
  }
}

customElements.define('lea-tabs', LeaTabs);

Еще Леа хочет иметь возможность стилизовать tab и tab-panel в соответствии с визуальной идентичностью Betatechs. Для этого она создает компонент lea-tab-panel и lea-tab, которые она может стилизовать по своему усмотрению и в итоге поместить вовнутрь компонента lea-tabs. Вы можете посмотреть, как Леа сделала это в примере ниже.

import { LitElement, html, css } from 'lit-element';

export class LeaTab extends LitElement {
  static get styles() {
    return css`/* my stylings */`;
  }

  render() {
    return html`
      <!-- dom as needed -->
      <slot></slot>
    `;
  }
}

customElements.define('lea-tab', LeaTab);

Прекрасно! Теперь Леа может использовать компонент tabs следующим образом:

<lea-tabs>
  <lea-tab slot="tab">Info</lea-tab>
  <lea-tab-panel slot="panel">
    Info page with lots of information about us.
  </lea-tab-panel>
  <lea-tab slot="tab">Work</lea-tab>
  <lea-tab-panel slot="panel">
    Work page that showcases our work.
  </lea-tab-panel>
</lea-tabs>

Ну вот, теперь компонент Леа готов, пора написать какую-нибудь документацию. Вы можете посмотреть на live-страницу документации Леа. Полный код lea-tabs вы можете увидеть на GitHub.

P.S.: Обратите внимание, что Леа теперь сама отвечает за обновление документации lea-tabs, и изменения в документации Lion будут автоматически отражаться на документации Леа.

Почему Open Source?

Библиотеки компонентов пользуются огромным спросом. Открывая доступ к исходному коду наших расширяемых компонентов, мы помогаем вам делать то, что вам нужно, при этом получая все преимущества open-source сообщества. Более того, любой вклад, внесенный в Lion, напрямую влияет и приносит пользу каждой дизайн-системе, использующей его (в том числе ing-web) в глобальном масштабе. Это означает, что мы получаем лучшее из обоих миров, помогая людям с помощью наших компонентов и получая ценный вклад от сообщества!

Взгляните на наш репозиторий! И если вы хотите оставаться в курсе событий, обязательно начните отслеживать и/или поставьте звездочку – у нас нет твиттера (пока), но тем не менее вы можете подписаться на меня: привет, я Томас Олмер.

Но это еще не все!


Создавать приложения сложно, и иногда вам нужно немного больше, чем один конкретный компонент, например, такие вещи, как: валидация, формы, оверлеи, локализация и т. д. Но не бойтесь, Lion придет на помощь!

Вы можете найти информацию о них в нашей документации, а мы расскажем подробнее о дополнительных системах Lion в следующих публикациях в блоге.

Благодарности


Наконец, мы хотели бы закончить статью словами благодарности:
ING, за предоставленную нам возможность поработать над этим проектом и делать его таким классным вместе с open-source сообществом.

Всем, кто работал над Lion (особенно команде Lion), включая всех контрибьюторов (39, и это не предел!).

И последняя благодарность, но не менее важная: Паскалю Шилпу за то, что превратил мои каракули в интересную историю.

Приглашаем присоединиться к нашему бесплатному уроку по теме: «SvelteJs. Быстрый старт».
OTUS. Онлайн-образование
Цифровые навыки от ведущих экспертов

Комментарии 13

    0
    Хотите интересный фактик?

    Ваши компоненты все без исключения обрушатся на попытке переноса их в другой документ (importNode() или adoptNode()), если дело будет происходить не в хроме. Да и насчёт хрома я уверен не на 100%.
      0

      Для багов есть раздел issues на гитхабе. Какой смысл писать о нём в комментариях? Вы считаете, что нашли глобальный недостаток библиотеки, который ставит на ней крест?

        0
        Какой смысл писать о нём в комментариях?

        Если автор пишет статьи на хабр — то и комментарии прочитает. Наверное.

        Вы считаете, что нашли глобальный недостаток библиотеки, который ставит на ней крест?

        Нет. Предлагаю подумать вам над тем, что иногда лопата — это лопата.
          0

          Давайте попробую иначе объяснить. Вот представьте, что вы пишете свою библиотеку, сделали хорошую документацию, вам она (дока) не нужна, вы и так весь АПИ отлично помните, но людям будет удобно. И вот вы выкладываете её в опенсорс, пишете статью и тут же получаете пафосный комментарий о баге. Приятно будет? Нельзя было тихонько завести ишъю? Я понимаю, что большинство исключительно использует наработки других, даже не пытаясь что-то давать взамен, но вы хоть на секунду ставьте себя на место авторов, испытывайте хоть немного благодарности (ведь вы каждый день совершенно бесплатно пользуетесь кучей таких наработок), а не тупое желание самоутвердиться типа "смотрите какой баг я сразу нашёл". Фу таким быть.

            0
            Вижу, вы так и не задумались над тем, над чем я предложил вам подумать. Вместо этого вы предпочли продолжить придумывать вашу собственную версию реальности.

            Ну, удачи.
              0

              Невозможность переноса в другой документ делает лопату лопатой? Над этим что ли я должен подумать? Вы уж либо расшифруйте, либо не несите бред.

                0
                facepalm.jpg

                Если в комментарии написано «хотите интересный фактик?» — это означает, что в комментарии описан интересный фактик. Не более и не менее.
                А вот что по-хорошему меня поражает, так это объемы истерики, которые вы ухитрились сгенерировать в качестве реакции. Это было бы даже наверное забавно, если б не было так грустно.
                  0

                  С чего вы взяли, что присутствует какая-то истерика? Я уже объяснил, что нужно было сделать с этим интересным фактиком. Ишъю уже заведён или вы просто местный балабол?

                    0
                    С чего вы взяли, что присутствует какая-то истерика?

                    С того, что вы выдумали себе целую альтеративную реальность с ужасными людьми, которые даже во сне думают, как бы самоутвердиться за счёт бедных ранимых авторов опенсорса.
                    Если взять количество усилий, которые я потратил на изначальное замечание за k, количество усилий на ваши комментарии за m, а мои ответы за n, то k <<<<<<< n < m (количество операторов приблизительно выражает разницу). И я в этом продолжаю участвовать только потому, что люди с забавными альтернативными реальностями мне по-человечески любопытны.

                    Я уже объяснил, что нужно было сделать с этим интересным фактиком.

                    Я уже объяснил, что ваши объяснения не имеют смысла.

                    Ишъю уже заведён или вы просто местный балабол?

                    Любопытно, что за всё это время вы так и не осознали разницу между issue и интересным фактиком.
                      0
                      альтернативными реальностями

                      и в чём альтернативность? Вы действительно верите, что большинство разработчиков хоть иногда задумываются, что каждый день совершенно бесплатно пользуются огромным количеством чужой работы? Я вот уверен в обратном. Большинство ленятся даже завести ишъю, если найденная проблема не касается их лично. Утверждение, что таким образом можно хоть как-то выразить благодарность за существующий опенсорс вызывает удивление. Вот вы — ярчайший представитель. Я уже дважды предложил вам потратить каких-то пару минут и внести свой вклад, но вам лень.


                      не осознали разницу между issue и интересным фактиком

                      прекрасно осознаю разницу. Созданный ишъю — признак ответственного и благодарного разработчика, а ваш фактик — признак либо человека пытающегося самоутвердиться, либо балабола. Так кто вы? Этим вопросом я в третий раз предлагаю вам пройти на гитхаб и стать ответственным и благодарным разработчиком, а не выбирать между двумя не самыми приятными вариантами.

        0

        А расскажите, в чем именно дело? Они используют lit-element, это в нем какой-то косяк или тут что-то еще?

          0
          Если вы пороетесь в гугле на тему того, как переносить кастомные элементы — можете наткнуться на довольно уже старые обсуждения этого всего в w3c, багтрекерах, и подобных местах. Беда в том, что стандартизаторы так и не договорились до конца, похоже.

          Тут многоэтапная фигня:
          1) Хром и не-хром переносят элементы по-разному. Хром — единственный, кто оставляет у элемента всё тот же прототип, остальные (как минимум FF, но по-моему другие браузеры тоже ведут себя как FF) меняют прототип элемента как минимум однажды. Из этого, в частности, вытекает то, что в хроме кастомные элементы можно переносить между документами, не регистрируя такой кастомный элемент в новом документе. И оно будет работать, а у других — не будет. Хотя по стандарту вообще-то надо регистрировать.
          2) FF, насколько я его понял (но надо учесть, что я не рыл вопрос очень уж глубоко) — сначала даунгрейдит элемент до HTMLUnknownElement, а потом апгрейдит обратно, если он зарегистрирован. То есть, прототип пару раз поменяется.
          3) Ну и еще одна отдельная вишенка на торте — adoptNode() не вызывает конструктора! Оно вызовет сначала adoptedCallback(), потом connectedCallback(), и всё. Если в конструкторе происходит что-то интересное (я не уверен полностью, но в этой репе в конструкторе что-то не совсем банальное таки происходит, типа addEventListener у кнопки) — то это всё при переносе ноды перестанет работать.

          Это я «случайно» обнаружил вообще мимоходом, когда ковырял html2canvas ради скриншотов страниц. Оно перед тем, как что-то делать — создаёт клон текущего документа в ифрейме. На этом-то вебкомпоненты (не эти, а мои, но разницы мало) и посыпались.
            0

            Ясно-понятно. Полезное знание!

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое