Get best of the week

ING推出Lion：高效，负担得起的灵活Web组件库

大家好。预期“ Fullstack JavaScript Developer”课程的开始，我们已为您准备了有趣的材料的翻译。




TL; DR：无论您是创建自己的组件，使用设计系统，实现对各种浏览器的支持，提供可访问性还是添加第三方依赖性，Web开发都是困难的。 Lion致力于通过实施功能齐全，价格适中，生产性高且非特定性的组件来使您的生活更轻松。查看ing-bank / lion信息库。

你们中的某些人可能已经知道，从Polymer库到最新的LitElement，ING在创建Web组件方面有着悠久而丰富的历史。

想刷新您的记忆吗？Web组件是一组浏览器标准，使我们能够编写本机，可重用，封装和模块化的组件。

Web组件标准终于变得更加强大，并且今天有许多实现和使用Web组件的方法，例如：Angular Elements，Stencil，Vue，Svelte以及许多其他方法。随着Chromium Edge的发布，很明显，现在所有主要的浏览器都将立即支持Web组件。

因此，今天，我很高兴与您分享ING在其Web组件库Lion中免费开放的所有内容！

为什么狮子


想象以下虚构的场景：
Leah是Betatech的一名开发人员，她正在为公司开发新的内部应用程序。

框架不可知


查找组件并不容易，结果可能会让您失望。

Leah找到了完成任务的完美组件，但是不幸的是，它是用特定的JavaScript框架编写的，因此您不能只是获取并使用它。

此外，公司拥有自己的视觉识别和重写组件，这些组件已经过完全样式化以适合其公司识别，有时这意味着比从头开始设计更多的工作。

Lea找到了一个组件，该组件提供了所有必要的功能，但不符合Betatechs的身份。

功能适应


找到理想的组件后，有时您可能会发现该组件没有承载所需的任何特定功能负载。

Lea决定复制找到的组件的代码并自己实现该功能，因此，现在您必须支持整个组件，这给项目增加了负担。

可用性


任何用户都应该可以访问您的组件。可访问性并不容易，但是有必要，而且，在不诉诸重大更改的情况下，很难在以后的阶段解决可访问性问题，因此从一开始就确保可访问性极为重要。

在操作过程中，Lea发现了她在Internet上找到的组件的可用性问题。她无法在代码中修复它，因此她要求组件的作者来帮助她。但是他们回答说，他们无能为力，因为他们不想改变任何东西。

或者，

莉亚（Leah）编写了自己的组件，但是由于她最初编写HTML结构的方式而导致难以解决可访问性问题，并且更正将涉及关键的更改。

总结


您不认为利亚的故事与之直接相关吗？
它解决了现代Web开发中的几个常见问题：

  • 查找和添加依赖项不是一件容易的事。
  • 因为外观而选择组件不是一个好主意；
  • 有时很难保持对行为或风格的调整。
  • 如果该软件包很受欢迎，则并不意味着它具有良好的可用性或性能。

如何解决这些问题？

  • 假设您有一些组件，其主要任务是提供功能，而设计则由您自行决定。
  • 想象一下，这些组件具有出色的可用性和性能。
  • 想象一下，这些组件是可扩展且灵活的。

现在停止做梦，并注意狮子。

什么是狮子？


我们要推广网络-一次一个组成部分。
Lion是一个开放源代码的白色标签库，它不依赖于框架，并且可以成为您公司设计系统的基础。外观和功能的一致性是一项艰巨的任务，我们希望借助Lion，我们可以使您的工作更加轻松。

白色标签


Lion是Web组件的基本白色标签包。这意味着组件具有最小的样式，但是所有基本功能都存在。白标产品通常旨在为其他用户提供使组件的视觉标识适应其自身的能力。这很棒，因为这意味着每个人都可以使用自己的品牌或设计系统来使用组件的基本功能，因为令人惊讶的是，并不是每个人都喜欢橙色。

那就是我们在ING所做的。我们自己的ing-web组件扩展了Lion组件，并应用了我们的可视ING身份，这是Lion上的一薄层。

看狮子演示。看起来很乡村吧？现在将Lion与ing-web进行比较：



主要重点


Lion的开发着眼于全球使用和可重用性。因此，从一开始就添加了以下功能：

  • 重用-我们的组件旨在在全球范围内分发和使用；
  • 可访问性-我们的组件旨在为所有人提供；
  • 生产力-我们的组件必须小巧，高效且快速。

所有这些功能使我们能够在全球范围内扩展我们的组件并在使用它们时找到相互理解。这样可以确保ING的每个人都有一套可靠的构建块来构建他们的应用程序并快速上手。

得到教训


ING很早就开始使用Web组件，而Lion并不是我们创建的第一个组件库。因此，您可能想知道这些组件与上一代有何不同。

Lion是从头开始构建的，以提供可访问性和可扩展性，因为我们知道在开发的后期阶段几乎不可能添加这些东西。我想强调一些我们在创建Lion时吸取的教训：

  • 并非所有内容都应该成为网络组件，最好使用常规JavaScript添加某些功能；
  • 尽可能靠近原生HTML元素；
  • 从一开始就研究可访问性；
  • 并非所有内容都应该在影子DOM中，这对于aria关系和可访问性尤其重要；
  • UI组件很复杂。

« -, .»
Erik Kroes

Lion!


Lion通过为组件库提供一个白标，功能齐全，价格合理且高效的框架来帮助您实现设计系统。您需要做的就是添加自己的设计！因此，如果您的公司希望系统化您的设计系统，Lion将是一个很好的开始！

此外，您可以使用Lion创建自己喜欢的设计系统的Web组件版本，例如：Bulma，Bootstrap，Material，Bolt，Argon，Tailwind。

此外，Lion用户和贡献者越多，其基础越稳定，这将影响使用Lion的每个人。

促进狮子的发展！


在撰写本文时，Lion仍处于测试阶段。我们希望在发布稳定版本之前得到您的反馈，因此，如果您喜欢开源并希望为Lion提供帮助，则可以执行以下操作：

  • 创造和解决问题；
  • 研究一个全新的组件（从讨论问题开始）；
  • 改善文件；
  • ...任何贡献都很重要！甚至纠正文档中的错别字

随时在github上打开问题，以发送您可能有的任何反馈或问题。您也可以在Polymer松弛通道中找到我们#lion 。

您可以通过链接加入松弛的Polymer 。

组件扩展


您可以将Lion用作实现自己的设计系统的基础。

让我们看看如果她选择了狮子，莉亚的故事是如何发生的。

首先，请安装所需的一切：

npm i lit-element @lion/tabs

lea-tabs通过重用Lion功能来 创建组件。这使Leah获得了实现自己的选项卡组件所需的所有功能负载和可访问性。

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

好了，现在Lea组件已经准备好了，该写一些文档了。您可以查看Lea文档的实时页面。lea-tabs您可以在GitHub上查看完整的代码。

PS：请注意，Lea现在负责更新lea-tabs文档，对Lion文档的更改将自动反映在Lea文档中。

为什么要开源？

组件库的需求量很大。通过提供对我们可扩展组件源代码的访问，我们可以帮助您完成所需的工作，同时获得开源社区的所有好处。此外，对Lion所做的任何贡献都会直接影响并受益于使用Lion的每个设计系统（包括ing-web）在全球范围内。这意味着我们将两全其美，帮助人们使用我们的组件，并从社区中获得宝贵的意见！

看看我们的仓库！而且，如果您想保持最新状态，请务必开始跟踪和/或添加星号-我们还没有Twitter，但您仍然可以订阅我：您好，我是Thomas Olmer。

但这还不是全部！


创建应用程序很困难，有时您需要的不仅仅是一个特定的组件，例如，诸如验证，表单，覆盖图，本地化之类的东西。但是请不要害怕，Lion会救出来的！

您可以在我们的文档中找到有关它们的信息，我们将在以下博客文章中为您提供有关其他Lion系统的更多信息。

致谢


最后，我们要以以下感谢结束本文：
ING，它为我们提供了参与此项目的机会，并使其与开源社区一起变得如此酷。

致所有在Lion上工作的人（尤其是Lion团队），包括所有贡献者（39，这不是极限！）。

最后感谢，但同样重要的是：Pascal Shilp将我的涂鸦变成了有趣的故事。

我们邀请您参加有关以下主题的免费课程：“ SvelteJs。快速开始。“

More articles:


All Articles