最初发布于ING 科技博客。

TL;DR: Web 开发可能很困难,无论您是制作自己的组件、实现设计系统、支持许多不同的浏览器、合并可访问性还是添加第三方依赖项。 Lion 旨在通过将功能完整、可访问、高性能和框架无关组件的基础从您手中解放出来,让您的生活更轻松!在ing-bank/lion查看回购。

有些人可能已经知道,ING 在构建 Web 组件方面有着悠久而丰富的历史,从 Polymer 库开始,一直到最近发布的 LitElement。

需要复习吗?Web Components 是一组浏览器标准,允许我们编写浏览器原生、可重用、封装和模块化的组件。

Web 组件标准终于成熟了,今天,有很多方法可以构建和使用您的 Web 组件,例如:Angular Elements、Stencil、Vue、[Svelte]10005 等等。并且随着新的Chromium Edge的发布,这意味着所有主流浏览器都原生支持 Web 组件。

所以今天,我很高兴与大家分享 ING 正在开源其自己的 Web 组件核心库:Lion! 🎉

为什么是狮子?

想象以下虚构场景:

Lea 是一名在 Betatech 工作的开发人员,正在开发一个新的内部应用程序。

框架不可知

寻找组件很困难,并且会导致很多挫败感。

Lea 为她的用例找到了一个完美的组件,但不幸的是,它是用特定的 JavaScript 框架编写的,而 Betatech 使用了不同的框架,所以很遗憾她无法使用它。

此外,公司有自己的视觉标识,并覆盖完全样式化的组件以使它们看起来像公司标识,有时可能比从头开始设计需要更多的工作。

Lea 找到了一个组件,它提供了所有需要的功能,但是,它看起来与 Betatechs 的身份大不相同。

自定义功能

一旦您找到了完美的组件,您可能会发现该组件缺少您想要实现的某种功能。

Lea 决定复制她找到的组件的代码,并自己实现该功能,因此现在必须维护整个组件,这成为项目的额外负担。

辅助功能

您的组件应该可供所有类型的用户使用。可访问性很难做到正确,但这是一项基本功能,此外,如果不进行重大更改,则无法在后期修复可访问性问题,因此从一开始就包含可访问性至关重要。

在某处,Lea 发现她在网上找到的一个组件存在可访问性问题。她无法在她的代码中解决这个问题,所以她要求维护人员帮助她。他们告诉她他们无法修复它,因为他们不想做出重大改变。

或者,或者,

Lea 编写自己的组件,由于她最初编写 HTML 结构的方式,可访问性问题很难修复,并且还会导致重大更改。

总结

莉亚的故事让人觉得有关联吗?

它突出了现代 Web 开发中的多个常见问题:

• 查找和添加依赖项很重要

• 仅仅因为外表而挑选东西可能并不总是最好的选择

• 调整行为或样式可能很难维持

• 如果一个包很受欢迎,并不意味着它具有良好的可访问性或性能

我们可以做些什么来解决这些问题?

• 🤔 想象一下拥有纯粹专注于功能的组件,而将设计留给你

• 🤔 想象一下,这些组件具有出色的可访问性和性能

• 🤔 想象一下这些组件具有高度的可扩展性和灵活性

现在停止想象,看看狮子🦁

什么是狮子?

我们希望推动网络向前发展——一次一个组件。

Lion 是一个白标、开源、与框架无关的组件库,可以成为您编纂的内部设计系统的基础。在设计和可用性上保持一致已经是一项艰巨的挑战,我们希望通过 Lion 来帮助您完成一些工作。

白标

Lion 是白标 Web 组件的核心包。这意味着核心组件仅包含非常少的样式,但具有所有基本功能。通常会创建白标产品,以便其他人可以轻松地使用自己的视觉识别重新命名它们。这很棒,因为这意味着每个人都可以使用我们组件的核心功能,同时带来自己的品牌或设计系统,因为令人惊讶的是,并不是每个人都喜欢橙色。

这正是我们在 ING 所做的。我们自己的 ing-web 组件扩展了 Lion 组件并应用了我们自己的 ING 视觉标识,这主要是 Lion 之上的一个薄层。

查看Lion 演示的。看起来很普通,不是吗?现在将 Lion 与 ing-web 进行比较:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ZlQY8irs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https: //raw.githubusercontent.com/ing-bank/lion/master/demo/stories/side-by-side.png)

🎯 专注

Lion 的设计重点是全球使用和可重用性。因此,从一开始就包含以下功能:

• ♻️ 可重用性 - 我们的组件旨在在全球范围内分发和使用

• 🚹 可访问性 - 我们的组件旨在让每个人都可以访问

• 🚀 性能 - 我们的组件旨在小巧、高性能和快速

这些功能使我们能够在全球范围内推出我们的组件并拥有单一的事实。它确保 ING 中的每个人都有一套可靠的构建块来构建他们的应用程序,并立即启动和运行。

经验教训

ING 很早就开始使用 Web 组件,而 Lion 并不是我们构建的第一个组件库。所以你可能想知道,这些组件与上一代有何不同?

Lion 是从头开始构建的,以允许可访问性和可扩展性,因为我们了解到这些东西在开发的后期几乎不可能更改/实现。我们想强调一些在制作 Lion 时学到的经验教训:

• 并非所有东西都必须是 Web 组件,对于某些功能,常规 JavaScript 更好。

• 尽可能接近原生语义 HTML 元素。

• 从一开始就包含可访问性。

• 并非所有内容都需要在影子 DOM 中,这对于 aria 关系和可访问性尤其重要。

• UI 组件很难

每个人都应该使用 Web 组件,但不是每个人都应该编写它们

-埃里克·克罗斯

🙋u200d加入我们!

领养狮子!

Lion 可以通过为您的组件库提供白标、功能性、可访问性和高性能基础来帮助您实施设计系统。您需要做的就是带上您自己的设计!因此,如果您的公司正在寻求编纂您的设计系统,Lion 是一个很好的起点。

另外,您可以使用狮子来创建您喜欢的设计系统的Web组件版本,例如:BULMA,Bootstrap,材料,[Bolt]](https://boltdesignsystem.com/),(https://boltdesignsystem.com/),[Argon[Argon]]][尾巴]1212121212121212121212121212121212121212121212121212121211111111999999999991119999999性色机。 .

此外,Lion 拥有的用户和贡献者越多,Lion 基础就越稳定,这对使用 Lion 的每个人都有帮助。

为狮子做贡献!

在撰写本文时,Lion 仍处于测试阶段。在发布稳定版本之前,我们很想得到您的反馈,所以:您喜欢开源,您想帮助 Lion 吗?

你可以这样做:

• 报告/修复问题

• 处理一个全新的组件(首先从一个问题开始讨论)

• 改进文档

• ...每一个贡献都很重要!甚至文档中的错字修复🤓

对于您可能有的任何反馈或问题,请随意创建一个 github 问题。

您还可以在#lion频道的 Polymer slack 上找到我们。

您可以通过访问https://www.polymer-project.org/slack-invite加入 Polymer slack。

🔨 扩展组件

您可以使用 Lion 作为基础来实现您自己的编码设计系统。

让我们看看如果 Lea 选择了 Lion,她的故事会如何发展。

首先,安装你需要的东西

npm i lit-element @lion/tabs

通过重用 Lion 的功能创建一个lea-tabs组件。这为 Lea 提供了她自定义选项卡组件所需的所有功能和可访问的核心。

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);

Lea 还希望能够根据 Betatechs 的视觉标识来设置选项卡和选项卡面板的样式。为此,她创建了一个lea-tab-panel组件和一个lea-tab组件,然后她可以根据自己的需要对其进行完全样式化,并最终将其放置在lea-tabs组件中。您可以在下面的示例中看到 Lea 如何实现这一点。

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);

出色的! Lea 现在可以像这样使用标签组件:

<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>

好了,Lea 的组件已经完成了,所以让我们编写一些文档。请参阅实时 Lea 选项卡文档页面。你可以在 github](https://github.com/ing-bank/lion/tree/master/demo/)上看到lea-tabs[的完整代码。

P.S.:请注意,Lea 现在自己负责更新lea-tabs的文档,对 Lion 文档的改进不会自动反映在 Lea 的文档中。

为什么要开源?

组件库的需求量很大。通过开源我们的可扩展组件,我们可以帮助您_做自己的事情_,同时从开源社区获得所有好处。更重要的是,对 Lion 所做的任何贡献都会直接影响和受益于全球范围内使用它的每个设计系统(包括 ing-web)。这意味着我们通过帮助人们使用我们的组件并从社区获得宝贵的贡献来获得两全其美!

看看我们的存储库!,如果您想了解最新消息,请务必观看和/或加注星标 - 目前还没有推特,但您可以关注我Thomas Allmer- 嘿👋

但还有更多!

构建应用程序很困难,有时,您需要的不仅仅是正确的组件,还需要以下内容:验证、表单、覆盖、本地化等。但不要害怕;狮子帮你搞定了!

您可以在我们的文档中查看它们,我们将在以后的博客文章中更深入地介绍 Lion 的附加系统。

谢谢

最后,我们想通过说几句谢谢来结束这个公告:

ING,感谢我们给了我们参与这个项目的机会,并与开源社区一起使它变得更好。

曾在 Lion 上工作过的每个人(尤其是 Lion 团队),包括所有贡献者(36 个贡献者并且还在增加!)。

最后但并非最不重要的一点是Pascal Schilp,将我的涂鸦变成一个可追随的故事。