Get best of the week

ING Launches Lion: A Library of Productive, Affordable, and Flexible Web Components

Hello everyone. In anticipation of the start of the “Fullstack JavaScript Developer” course , we have prepared for you a translation of interesting material.




TL; DR: Web development is difficult regardless of whether you create your own components, use design systems, implement support for various browsers, provide accessibility or add third-party dependencies. Lion strives to make your life easier by taking on the implementation of full-featured, affordable, productive, and non-specific components. Check out the ing-bank / lion repository .

Some of you may already know that ING has a long and rich history of creating web components, from the Polymer library to the recent LitElement.

Want to refresh your memory ? Web components are a set of browser standards that allow us to write native, reusable, encapsulated, and modular components.

Web component standards have finally become stronger, and today there are many ways to implement and use web components, such as: Angular Elements , Stencil , Vue , Svelte and many, many others. And with the release of Chromium Edge, it became clear that now all major browsers will support web components out of the box.

Therefore, today I am pleased to share with you all that ING opens for free use in its library of web components Lion!

Why lion


Imagine the following fictional scenario:
Leah is a developer from Betatech, she is working on a new internal application for the company.

Framework agnostic


Finding components is not easy and the result may disappoint you.

Leah finds the perfect component for his task, but, unfortunately, it is written in a specific JavaScript framework, so you can’t just get it and use it.

In addition, companies have their own visual identity and rewriting components that are already fully stylized to fit their company identity, sometimes it can mean more work than styling from scratch.

Lea finds a component that offers all the necessary functionality, but it does not fit the Betatechs identity.

Functional adaptation


After you find the perfect component, at some point you may find that the component does not carry any specific functional load that you need.

Lea decides to copy the code of the found component and implement the function on his own, and as a result, now you have to support the entire component, which places an additional burden on the project.

Availability


Your components should be accessible to any user. Accessibility is not easy, but it is necessary, moreover, accessibility problems can be difficult to fix at later stages without resorting to critical changes, so it is extremely important to ensure accessibility from the very beginning.

During operation, Lea discovers a problem with the availability of a component that she found on the Internet. She cannot fix it in the code, therefore she asks the authors of the component to help her. But they answer that they cannot help with anything, because they do not want to change anything.

Or,

Leah writes her own component, but accessibility problems are difficult to fix because of how she originally wrote the HTML structure, and the correction will entail critical changes.

Summarize


Don't you think that Leah’s story is directly relevant?
It addresses several common issues in modern web development:

  • Finding and adding dependencies is not an easy task;
  • Choosing a component because of its appearance is not a good idea;
  • Adjustments to behavior or style are sometimes difficult to maintain;
  • If the package is popular, this does not mean that it has good availability or performance.

What can be done to solve these problems?

  • Imagine that you have components whose main task is to provide functionality, and the design is at your discretion.
  • Imagine these components have excellent availability and performance.
  • Imagine these components are extensible and flexible.

Now stop dreaming and pay attention to Lion.

What is Lion?


We want to promote the web - one component at a time.
Lion is an open-source white-label library that does not depend on frameworks and can become the basis of your company's design system. Consistency in appearance and functionality is a difficult task and we hope that with Lion we can make your work easier.

White label


Lion is the basic white-label package of web components. This means that the components have a minimal style, but all the basic functionalities are present. White label products are often designed to provide other users with the ability to adapt the visual identity of the component to themselves. This is great, because it means that everyone can use the basic functionalities of our components using their own branding or design system, because, surprisingly, not everyone likes the orange color.

That is what we are doing at ING. Our own ing-web components extend Lion components and apply our visual ING identity, which is a thin layer on top of Lion.

Look at the Lion demo. Looks pretty rustic, right? Now compare with Lion in conjunction with ing-web:



Primary focus


Lion was developed with a focus on global use and reusability. As a result of this, the following features have been added from the very beginning:

  • Reuse - our components are designed to be distributed and used globally;
  • Accessibility - our components are designed to be accessible to all;
  • Productivity - Our components must be small, productive and fast.

All these features allow us to globally expand our components and find mutual understanding when working on them. This ensures that everyone at ING has a solid set of building blocks to build their application and get started quickly.

Lessons learned


ING started using web components very early, and Lion is not the first component library we created. Therefore, you may wonder how these components differ from the previous generation.

Lion was built from the ground up to provide accessibility and extensibility, as we knew that it was almost impossible to add these things at later stages of development. I would like to highlight a few lessons that we learned while creating Lion:

  • Not everything should become a web component, it’s better to use regular JavaScript to add certain functionality;
  • Stay as close as possible to native HTML elements;
  • Work on accessibility from the start;
  • Not everything should be in the shadow DOM, this is especially important for aria relationships and accessibility;
  • UI components are complicated.

« -, .»
Erik Kroes

Lion!


Lion can help you implement your design system by providing a white-label, functional, affordable and productive framework for your component library. All you need is to add your own design! Therefore, if your company wants to systematize your design system, Lion will be a great start!

In addition, you can use Lion to create versions of web components of your favorite design systems, such as: Bulma , Bootstrap , Material , Bolt , Argon , Tailwind .

In addition, the more Lion users and contributors, the more stable its base will be, which will affect everyone who uses Lion.

Contribute to the development of Lion!


At the time of writing, Lion is still in beta. We'd love to get your feedback before we get to the stable release, so if you like open source and want to help Lion, you can do this:

  • Creating and closing issue;
  • Working on a completely new component (start by discussing issue);
  • Improving documentation;
  • ... any contribution is important! Even correction of typos in the documentation

Feel free to open issue on github to send any feedback or questions you may have. You can also find us in the Polymer slack channel #lion .

You can join the slack Polymer by the link .

Component Expansion


You can use Lion as a base for implementing your own design system.

Let's see how the story of Lea happened if she chose Lion.

To get started, install everything you need:

npm i lit-element @lion/tabs

Create a component lea-tabsby reusing the Lion functionality. This allowed Leah to get all the functional load and accessibility that will be needed to implement her own tab component.

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 also wants to be able to style the tab and tab-panel according to the visual identity of Betatechs. To do this, she creates the lea-tab-panel and lea-tab components , which she can style as she sees fit and eventually put the lea-tabs component inside . You can see how Lea did this in the example below.

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

Perfectly! Now Lea can use the component tabsas follows:

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

Well, now the Lea component is ready, it's time to write some documentation. You can look at the Lea documentation live page . lea-tabsYou can see the full code on GitHub .

PS: Please note that Lea is now responsible for updating the lea-tabs documentation, and changes to the Lion documentation will automatically be reflected in the Lea documentation.

Why open source?

Component libraries are in high demand. By providing access to the source code of our extensible components, we help you do what you need, while getting all the benefits of the open-source community. Moreover, any contribution made to Lion directly affects and benefits each design system that uses it (including ing-web) on a global scale. This means that we get the best of both worlds, helping people with our components and getting valuable input from the community!

Take a look at our repository ! And if you want to stay up to date, be sure to start tracking and / or put an asterisk - we do not have twitter (yet), but nevertheless you can subscribe to me: hello, I'm Thomas Olmer .

But that's not all!


Creating applications is difficult, and sometimes you need a little more than one specific component, for example, things like: validation, forms, overlays, localization, etc. But do not be afraid, Lion will come to the rescue!

You can find information about them in our documentation , and we will tell you more about additional Lion systems in the following blog posts.

Acknowledgments


Finally, we would like to end the article with thanks:
ING, for giving us the opportunity to work on this project and make it so cool together with the open-source community.

To everyone who worked on Lion (especially the Lion team), including all contributors (39, and that's not the limit!).

And the last thanks, but no less important: Pascal Shilp for turning my scribbles into an interesting story.

We invite you to join our free lesson on the topic: “SvelteJs. Quick start . "

More articles:


All Articles