💠 🚢 🖕🏻 ING bringt Lion auf den Markt: Eine Bibliothek mit produktiven, erschwinglichen und flexiblen Webkomponenten 📇 🔖 🔉

Hallo alle zusammen. Im Vorfeld des Starts des Kurses „Fullstack JavaScript Developer“ haben wir für Sie eine Übersetzung von interessantem Material vorbereitet.

TL; DR: Die Webentwicklung ist schwierig, unabhängig davon, ob Sie eigene Komponenten erstellen, Entwurfssysteme verwenden, Unterstützung für verschiedene Browser implementieren, Barrierefreiheit bereitstellen oder Abhängigkeiten von Drittanbietern hinzufügen. Lion ist bestrebt, Ihnen das Leben zu erleichtern, indem es die Implementierung von voll funktionsfähigen, erschwinglichen, produktiven und unspezifischen Komponenten übernimmt. Schauen Sie sich das Ing-Bank / Lion- Repository an .

Einige von Ihnen wissen möglicherweise bereits, dass ING eine lange und reiche Geschichte in der Erstellung von Webkomponenten hat, von der Polymerbibliothek bis zum jüngsten LitElement.

Wollen Sie Ihr Gedächtnis aufzufrischen ? Webkomponenten sind eine Reihe von Browserstandards, mit denen wir native, wiederverwendbare, gekapselte und modulare Komponenten schreiben können.

Die Standards für Webkomponenten sind endlich stärker geworden, und heute gibt es viele Möglichkeiten, Webkomponenten zu implementieren und zu verwenden, z. B .: Angular Elements , Stencil , Vue , Svelte und viele, viele andere. Mit der Veröffentlichung von Chromium Edge wurde klar, dass jetzt alle gängigen Browser Webkomponenten sofort unterstützen.

Daher freue ich mich, Ihnen heute alles mitteilen zu können, was ING zur kostenlosen Verwendung in seiner Bibliothek von Webkomponenten Lion öffnet!

Warum Löwe?

Stellen Sie sich das folgende fiktive Szenario vor:
Leah ist eine Entwicklerin von Betatech und arbeitet an einer neuen internen Anwendung für das Unternehmen.

Rahmenunabhängig

Das Finden von Komponenten ist nicht einfach und das Ergebnis kann Sie enttäuschen.

Leah findet die perfekte Komponente für seine Aufgabe, aber leider ist sie in einem bestimmten JavaScript-Framework geschrieben, sodass Sie sie nicht einfach herunterladen und verwenden können.

Darüber hinaus verfügen Unternehmen über ihre eigene visuelle Identität und schreiben Komponenten neu, die bereits vollständig an ihre Unternehmensidentität angepasst sind. Manchmal kann dies mehr Arbeit bedeuten als das Styling von Grund auf neu.

Lea findet eine Komponente, die alle erforderlichen Funktionen bietet, aber nicht zur Identität von Betatechs passt.

Funktionsanpassung

Nachdem Sie die ideale Komponente gefunden haben, stellen Sie möglicherweise irgendwann fest, dass die Komponente keine spezifische Funktionslast trägt, die Sie benötigen.

Lea beschließt, den Code der gefundenen Komponente zu kopieren und die Funktion selbst zu implementieren. Daher müssen Sie jetzt die gesamte Komponente unterstützen, was das Projekt zusätzlich belastet.

Verfügbarkeit

Ihre Komponenten sollten für jeden Benutzer zugänglich sein. Die Barrierefreiheit ist nicht einfach, aber es ist notwendig, dass Barrierefreiheitsprobleme zu einem späteren Zeitpunkt nur schwer behoben werden können, ohne dass kritische Änderungen vorgenommen werden müssen. Daher ist es äußerst wichtig, die Barrierefreiheit von Anfang an sicherzustellen.

Während des Betriebs entdeckt Lea ein Problem mit der Verfügbarkeit einer Komponente, die sie im Internet gefunden hat. Sie kann es nicht im Code reparieren, deshalb bittet sie die Autoren der Komponente, ihr zu helfen. Aber sie antworten, dass sie mit nichts helfen können, weil sie nichts ändern wollen.

Oder

Leah schreibt ihre eigene Komponente, aber Barrierefreiheitsprobleme sind aufgrund der Art und Weise, wie sie die HTML-Struktur ursprünglich geschrieben hat, schwer zu beheben, und die Korrektur wird kritische Änderungen mit sich bringen.

Zusammenfassen

Denkst du nicht, dass Leahs Geschichte direkt relevant ist?
Es befasst sich mit mehreren häufigen Problemen in der modernen Webentwicklung:

Das Finden und Hinzufügen von Abhängigkeiten ist keine leichte Aufgabe.
Die Auswahl einer Komponente aufgrund ihres Erscheinungsbilds ist keine gute Idee.
Anpassungen an Verhalten oder Stil sind manchmal schwierig beizubehalten.
Wenn das Paket beliebt ist, bedeutet dies nicht, dass es eine gute Verfügbarkeit oder Leistung aufweist.

Was kann getan werden, um diese Probleme zu lösen?

Stellen Sie sich vor, Sie haben Komponenten, deren Hauptaufgabe darin besteht, Funktionen bereitzustellen, und das Design liegt in Ihrem Ermessen.
Stellen Sie sich vor, diese Komponenten verfügen über eine hervorragende Verfügbarkeit und Leistung.
Stellen Sie sich vor, diese Komponenten sind erweiterbar und flexibel.

Jetzt hör auf zu träumen und achte auf Lion.

Was ist Löwe?

Wir wollen das Web fördern - eine Komponente nach der anderen.
Lion ist eine Open-Source-White-Label-Bibliothek, die nicht von Frameworks abhängt und zur Grundlage des Designsystems Ihres Unternehmens werden kann. Konsistenz in Aussehen und Funktionalität ist eine schwierige Aufgabe und wir hoffen, dass wir mit Lion Ihre Arbeit erleichtern können.

weißes Etikett

Lion ist das grundlegende White-Label-Paket von Webkomponenten. Dies bedeutet, dass die Komponenten einen minimalen Stil haben, aber alle grundlegenden Funktionen vorhanden sind. White-Label-Produkte werden häufig entwickelt, um anderen Benutzern die Möglichkeit zu geben, die visuelle Identität der Komponente an sich selbst anzupassen. Das ist großartig, denn es bedeutet, dass jeder die grundlegenden Funktionen unserer Komponenten mit seinem eigenen Branding- oder Designsystem nutzen kann, da überraschenderweise nicht jeder die orange Farbe mag.

Das machen wir bei ING. Unsere eigenen Ing-Web-Komponenten erweitern Lion-Komponenten und wenden unsere visuelle ING-Identität an, die eine dünne Schicht auf Lion darstellt.

Schauen Sie sich die Lion- Demo an. Sieht ziemlich rustikal aus, oder? Vergleichen Sie nun mit Lion in Verbindung mit ing-web:

Hauptfokus

Lion wurde mit dem Schwerpunkt auf globaler Nutzung und Wiederverwendbarkeit entwickelt. Infolgedessen wurden von Anfang an folgende Funktionen hinzugefügt:

Wiederverwendung - Unsere Komponenten können weltweit vertrieben und verwendet werden.
Zugänglichkeit - Unsere Komponenten sind so konzipiert, dass sie für alle zugänglich sind.
Produktivität - Unsere Komponenten müssen klein, produktiv und schnell sein.

All diese Funktionen ermöglichen es uns, unsere Komponenten global zu erweitern und bei der Arbeit an ihnen gegenseitiges Verständnis zu finden. Dies stellt sicher, dass jeder bei ING über solide Bausteine verfügt, um seine Anwendung zu erstellen und schnell loszulegen.

Gewonnene Erkenntnisse

ING begann sehr früh mit der Verwendung von Webkomponenten, und Lion ist nicht die erste von uns erstellte Komponentenbibliothek. Daher fragen Sie sich möglicherweise, wie sich diese Komponenten von der vorherigen Generation unterscheiden.

Lion wurde von Grund auf neu entwickelt, um Zugänglichkeit und Erweiterbarkeit zu gewährleisten, da wir wussten, dass es fast unmöglich war, diese Dinge in späteren Entwicklungsstadien hinzuzufügen. Ich möchte einige Lektionen hervorheben, die wir bei der Erstellung von Lion gelernt haben:

Nicht alles sollte zu einer Webkomponente werden. Es ist besser, reguläres JavaScript zu verwenden, um bestimmte Funktionen hinzuzufügen.
Bleiben Sie so nah wie möglich an nativen HTML-Elementen.
Arbeiten Sie von Anfang an an der Barrierefreiheit.
Nicht alles sollte sich im Schatten-DOM befinden. Dies ist besonders wichtig für Arienbeziehungen und Zugänglichkeit.
UI-Komponenten sind kompliziert.

« -, .»
Erik Kroes

Lion!

Lion kann Sie bei der Implementierung Ihres Design-Systems unterstützen, indem es ein White-Label-, funktionales, erschwingliches und produktives Framework für Ihre Komponentenbibliothek bereitstellt. Alles was Sie brauchen, ist Ihr eigenes Design hinzuzufügen! Wenn Ihr Unternehmen Ihr Design-System systematisieren möchte, ist Lion daher ein guter Anfang!

Darüber hinaus können Sie mit Lion Webkomponentenversionen Ihrer bevorzugten Designsysteme erstellen, z. B. Bulma , Bootstrap , Material , Bolt , Argon , Tailwind .

Je mehr Lion-Benutzer und Mitwirkende vorhanden sind, desto stabiler ist die Basis, was sich auf alle auswirkt, die Lion verwenden.

Tragen Sie zur Entwicklung von Lion bei!

Zum Zeitpunkt des Schreibens befindet sich Lion noch in der Beta. Wir würden uns freuen, Ihr Feedback zu erhalten, bevor wir zur stabilen Version gelangen. Wenn Sie also Open Source mögen und Lion helfen möchten, können Sie dies tun:

Problem erstellen und schließen;
Arbeiten an einer völlig neuen Komponente (beginnen Sie mit der Erörterung des Problems);
Verbesserung der Dokumentation;
... jeder Beitrag ist wichtig! Auch Korrektur von Tippfehlern in der Dokumentation

Fühlen Sie sich frei, die Ausgabe auf github zu öffnen, um Feedback oder Fragen zu senden, die Sie möglicherweise haben. Sie finden uns auch im Polymer Slack Channel #lion .

Sie können sich dem lockeren Polymer über den Link anschließen .

Komponentenerweiterung

Sie können Lion als Basis für die Implementierung Ihres eigenen Designsystems verwenden.

Mal sehen, wie die Geschichte von Lea passiert ist, wenn sie sich für Lion entschieden hat.

Installieren Sie zunächst alles, was Sie benötigen:

npm i lit-element @lion/tabs

Erstellen Sie eine Komponente, lea-tabsindem Sie die Lion-Funktionalität wiederverwenden. Dadurch konnte Leah die gesamte Funktionslast und Zugänglichkeit erhalten, die für die Implementierung ihrer eigenen Registerkartenkomponente erforderlich sind.

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 möchte auch in der Lage sein, die Registerkarte und das Registerkartenfeld entsprechend der visuellen Identität von Betatechs zu gestalten. Zu diesem Zweck erstellt sie die Lea-Tab-Panel- und Lea-Tab- Komponenten , die sie nach Belieben stylen und schließlich die Lea-Tabs- Komponente einfügen kann . Wie Lea das gemacht hat, sehen Sie im folgenden Beispiel.

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

Perfekt! Jetzt kann Lea die Komponente tabswie folgt verwenden:

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

Nun, da die Lea-Komponente fertig ist, ist es Zeit, eine Dokumentation zu schreiben. Sie können sich die Live-Seite zur Lea-Dokumentation ansehen . lea-tabsSie können den vollständigen Code auf GitHub sehen .

PS: Bitte beachten Sie, dass Lea jetzt für die Aktualisierung der Lea-Tabs-Dokumentation verantwortlich ist und Änderungen an der Lion-Dokumentation automatisch in der Lea-Dokumentation berücksichtigt werden.

Warum Open Source?

Komponentenbibliotheken sind sehr gefragt. Durch die Bereitstellung des Zugriffs auf den Quellcode unserer erweiterbaren Komponenten unterstützen wir Sie dabei, das zu tun, was Sie benötigen, und nutzen gleichzeitig alle Vorteile der Open-Source-Community. Darüber hinaus wirkt sich jeder Beitrag zu Lion direkt auf jedes Designsystem aus, das es verwendet (einschließlich ing-web)) auf globaler Ebene. Dies bedeutet, dass wir das Beste aus beiden Welten bekommen, Menschen mit unseren Komponenten helfen und wertvolle Beiträge von der Community erhalten!

Schauen Sie sich unser Repository an ! Und wenn Sie auf dem Laufenden bleiben möchten, stellen Sie sicher, dass Sie mit dem Tracking beginnen und / oder ein Sternchen setzen - wir haben (noch) kein Twitter, aber Sie können mich trotzdem abonnieren: Hallo, ich bin Thomas Olmer .

Aber das ist nicht alles!

Das Erstellen von Anwendungen ist schwierig, und manchmal benötigen Sie etwas mehr als eine bestimmte Komponente, z. B. Validierung, Formulare, Überlagerungen, Lokalisierung usw. Aber keine Angst, Lion wird Ihnen helfen!

Informationen dazu finden Sie in unserer Dokumentation. Weitere Informationen zu zusätzlichen Lion-Systemen finden Sie in den folgenden Blog-Beiträgen.

Danksagung

Abschließend möchten wir den Artikel mit Dank an
ING beenden, der uns die Möglichkeit gegeben hat, an diesem Projekt zu arbeiten und es gemeinsam mit der Open-Source-Community so cool zu machen.

An alle, die an Lion gearbeitet haben (insbesondere an das Lion-Team), einschließlich aller Mitwirkenden (39, und das ist nicht die Grenze!).

Und der letzte Dank, aber nicht weniger wichtig: Pascal Shilp , der meine Kritzeleien in eine interessante Geschichte verwandelt hat.

Wir laden Sie ein, an unserer kostenlosen Lektion zum Thema teilzunehmen: „SvelteJs. Schnellstart . "

ING bringt Lion auf den Markt: Eine Bibliothek mit produktiven, erschwinglichen und flexiblen Webkomponenten