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

Всем привет. В преддверии старта курса «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. Быстрый старт».