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

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

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

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

Итак, сегодня я рад поделиться с вами тем, что ING открывает исходный код своей собственной базовой библиотеки веб-компонентов: Lion! 🎉

Почему Лев?

Представьте себе следующий вымышленный сценарий:

Леа - разработчик, который работает в Betatech и работает над новым внутренним приложением.

Фреймворк Agnostic

Найти компоненты сложно, и это может привести к большому разочарованию.

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

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

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

Настроить функциональность

Как только вы найдете свой идеальный компонент, в какой-то момент вы можете обнаружить, что компоненту не хватает какой-то функциональности, которой вы хотели бы достичь.

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

Доступность

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

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

Или, альтернативно

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

Резюме

Кажется ли, что история Ли интересна?

В нем освещено несколько общих проблем современной веб-разработки:

  • Поиск и добавление зависимости - большое дело
  • Выбор чего-то только по внешнему виду не всегда может быть лучшим выбором.
  • Регулировать поведение или стиль может быть сложно поддерживать
  • Если пакет популярен, это не значит, что у него хорошая доступность или производительность.

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

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

А теперь перестань воображать и посмотри на Льва

Что такое лев?

Мы хотим продвигать Интернет - по одному компоненту за раз.

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

Белая этикетка

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

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

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

🎯 Фокус

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

  • ♻️ Возможность повторного использования - наши компоненты предназначены для распространения и использования в глобальном масштабе.
  • 🚹 Доступность - наши компоненты должны быть доступны для всех
  • 🚀 Производительность - наши компоненты должны быть небольшими, производительными и быстрыми

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

Уроки выучены

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

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

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

Все должны использовать веб-компоненты, но не все должны их писать

- Эрик Крус

🙋‍ Присоединяйтесь к нам!

Принять Льва!

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

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

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

Сделайте вклад в Lion!

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

  • Сообщение / устранение проблем
  • Работа над совершенно новым компонентом (сначала начните с вопроса для обсуждения)
  • Улучшение документации
  • … Важен каждый вклад! Исправлены даже опечатки в документации 🤓

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

Вы можете присоединиться к Polymer Slack, посетив https://www.polymer-project.org/slack-invite.

🔨 Расширьте компоненты

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

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

Сначала установите то, что вам нужно

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

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

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

Итак, компонент Ли уже готов, так что давайте напишем документацию. См. Страницу документации по живым вкладкам Lea. Вы можете увидеть полный код lea-tabs на Github.

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

Почему открытый исходный код?

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

Взгляните на наш репозиторий! и если вы хотите быть в курсе, обязательно посмотрите и / или отметьте его - твиттера (пока) нет, но вы можете подписаться на меня Thomas Allmer - привет

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

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

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

Спасибо

Наконец, мы хотели бы завершить это объявление, сказав несколько слов благодарности:

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

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

И, наконец, что не менее важно, Паскаль Шильп, превративший мои каракули в историю.