Bonjour à tous. En prévision du début du cours «Développeur Fullstack JavaScript», nous avons préparé pour vous une traduction de matériel intéressant.
TL; DR: le développement Web est difficile, que vous créiez vos propres composants, utilisiez des systèmes de conception, implémentiez la prise en charge de divers navigateurs, fournissiez l'accessibilité ou ajoutiez des dépendances tierces. Lion s'efforce de vous faciliter la vie en prenant en charge la mise en œuvre de composants complets, abordables, productifs et non spécifiques. Consultez le dépôt ing-bank / lion .Certains d'entre vous savent peut-être déjà qu'ING a une longue et riche histoire de création de composants Web, de la bibliothèque Polymer au récent LitElement.Vous voulez vous rafraîchir la mémoire ? Les composants Web sont un ensemble de normes de navigateur qui nous permettent d'écrire des composants natifs, réutilisables, encapsulés et modulaires.Les normes des composants Web sont finalement devenues plus strictes, et il existe aujourd'hui de nombreuses façons d'implémenter et d'utiliser des composants Web, tels que: Angular Elements , Stencil , Vue , Svelte et bien d'autres. Et avec la sortie de Chromium Edge, il est devenu clair que maintenant tous les principaux navigateurs prendront en charge les composants Web prêts à l'emploi.C'est pourquoi, aujourd'hui, je suis heureux de partager avec vous tout ce que ING ouvre gratuitement dans sa bibliothèque de composants Web Lion!Pourquoi lion
Imaginez le scénario fictif suivant:Leah est une développeur de Betatech, elle travaille sur une nouvelle application interne pour l'entreprise.Agnostique du cadre
Trouver des composants n'est pas facile et le résultat peut vous décevoir.Leah trouve le composant parfait pour sa tâche, mais, malheureusement, il est écrit dans un cadre JavaScript spécifique, vous ne pouvez donc pas simplement l'obtenir et l'utiliser.De plus, les entreprises ont leur propre identité visuelle et des composants de réécriture qui sont déjà entièrement stylisés pour correspondre à l'identité de leur entreprise, ce qui peut parfois signifier plus de travail que de créer un style à partir de zéro.Lea trouve un composant qui offre toutes les fonctionnalités nécessaires, mais il ne correspond pas à l'identité Betatechs.Adaptation fonctionnelle
Une fois que vous avez trouvé le composant idéal, à un moment donné, vous pouvez constater que le composant ne porte pas la charge fonctionnelle spécifique dont vous avez besoin.Lea décide de copier le code du composant trouvé et d'implémenter la fonction de son propre chef, et par conséquent, vous devez maintenant prendre en charge l'intégralité du composant, ce qui impose une charge supplémentaire au projet.Disponibilité
Vos composants doivent être accessibles à tout utilisateur. L'accessibilité n'est pas facile, mais elle est nécessaire, en outre, les problèmes d'accessibilité peuvent être difficiles à résoudre à des stades ultérieurs sans recourir à des changements critiques, il est donc extrêmement important d'assurer l'accessibilité dès le début.Pendant l'opération, Lea découvre un problème avec la disponibilité d'un composant qu'elle a trouvé sur Internet. Elle ne peut pas le corriger dans le code, elle demande donc aux auteurs du composant de l'aider. Mais ils répondent qu'ils ne peuvent rien aider, car ils ne veulent rien changer.
Ou bien,
Leah écrit son propre composant, mais les problèmes d'accessibilité sont difficiles à résoudre en raison de la façon dont elle a écrit à l'origine la structure HTML, et la correction entraînera des changements critiques.Résumer
Ne pensez-vous pas que l'histoire de Leah est directement pertinente?Il aborde plusieurs problèmes courants dans le développement Web moderne:- Trouver et ajouter des dépendances n'est pas une tâche facile;
- Choisir un composant en raison de son apparence n'est pas une bonne idée;
- Les ajustements au comportement ou au style sont parfois difficiles à maintenir;
- Si le package est populaire, cela ne signifie pas qu'il a une bonne disponibilité ou de bonnes performances.
Que peut-on faire pour résoudre ces problèmes?- Imaginez que vous avez des composants dont la tâche principale est de fournir des fonctionnalités, et la conception est à votre discrétion.
- Imaginez que ces composants aient une disponibilité et des performances excellentes.
- Imaginez que ces composants soient extensibles et flexibles.
Maintenant, arrêtez de rêver et faites attention à Lion.Qu'est-ce que Lion?
Nous voulons promouvoir le Web - un composant à la fois.Lion est une bibliothèque open source en marque blanche qui ne dépend pas des frameworks et peut devenir la base du système de conception de votre entreprise. La cohérence de l'apparence et des fonctionnalités est une tâche difficile et nous espérons qu'avec Lion, nous pourrons vous faciliter la tâche.marque blanche
Lion est le package de base de composants Web en marque blanche. Cela signifie que les composants ont un style minimal, mais toutes les fonctionnalités de base sont présentes. Les produits en marque blanche sont souvent conçus pour offrir aux autres utilisateurs la possibilité d'adapter l'identité visuelle du composant à eux-mêmes. C'est génial, car cela signifie que tout le monde peut utiliser les fonctionnalités de base de nos composants en utilisant leur propre système de marque ou de conception, car, étonnamment, tout le monde n'aime pas la couleur orange.C'est ce que nous faisons chez ING. Nos propres composants ing-web étendent les composants Lion et appliquent notre identité visuelle ING, qui est une fine couche au-dessus de Lion.Regardez la démo du Lion. Semble assez rustique, non? Comparez maintenant avec Lion conjointement avec ing-web:
Objectif principal
Lion a été développé en mettant l'accent sur l'utilisation mondiale et la réutilisabilité. En conséquence, les fonctionnalités suivantes ont été ajoutées dès le début:- Réutilisation - nos composants sont conçus pour être distribués et utilisés dans le monde entier;
- Accessibilité - nos composants sont conçus pour être accessibles à tous;
- Productivité - Nos composants doivent être petits, productifs et rapides.
Toutes ces fonctionnalités nous permettent d'étendre nos composants à l'échelle mondiale et de trouver une compréhension mutuelle lorsque vous travaillez dessus. Cela garantit que tout le monde chez ING dispose d'un ensemble solide de blocs de construction pour créer leur application et démarrer rapidement.Leçons apprises
ING a commencé à utiliser les composants Web très tôt, et Lion n'est pas la première bibliothèque de composants que nous avons créée. Par conséquent, vous vous demandez peut-être en quoi ces composants diffèrent de la génération précédente.Lion a été construit à partir de zéro pour fournir l'accessibilité et l'extensibilité, car nous savions qu'il était presque impossible d'ajouter ces éléments à des stades de développement ultérieurs. Je voudrais souligner quelques leçons que nous avons apprises lors de la création de Lion:- Tout ne doit pas devenir un composant Web, il est préférable d'utiliser du JavaScript standard pour ajouter certaines fonctionnalités;
- Restez aussi proche que possible des éléments HTML natifs;
- Travailler sur l'accessibilité dès le départ;
- Tout ne doit pas être dans le DOM fantôme, c'est particulièrement important pour les relations et l'accessibilité aria;
- Les composants de l'interface utilisateur sont compliqués.
« -, .»
Erik Kroes
Lion!
Lion peut vous aider à mettre en œuvre votre système de conception en fournissant un cadre en marque blanche, fonctionnel, abordable et productif pour votre bibliothèque de composants. Tout ce dont vous avez besoin est d'ajouter votre propre design! Par conséquent, si votre entreprise souhaite systématiser votre système de conception, Lion sera un excellent début!De plus, vous pouvez utiliser Lion pour créer des versions de composants Web de vos systèmes de conception préférés, tels que: Bulma , Bootstrap , Material , Bolt , Argon , Tailwind .De plus, plus il y aura d'utilisateurs et de contributeurs Lion, plus sa base sera stable, ce qui affectera tous ceux qui utilisent Lion.Contribuez au développement de Lion!
Au moment de la rédaction, Lion est toujours en version bêta. Nous aimerions recevoir vos commentaires avant d'arriver à la version stable, donc si vous aimez l'open source et que vous voulez aider Lion, vous pouvez le faire:- Création et fermeture du problème;
- Travailler sur un tout nouveau composant (commencer par discuter du problème);
- Amélioration de la documentation;
- ... toute contribution est importante! Même correction des fautes de frappe dans la documentation
N'hésitez pas à ouvrir le problème sur github pour envoyer vos commentaires ou questions que vous pourriez avoir. Vous pouvez également nous trouver sur le canal mou de polymère#lion .Vous pouvez rejoindre le Polymère mou par le lien .Expansion des composants
Vous pouvez utiliser Lion comme base pour implémenter votre propre système de conception.Voyons comment l'histoire de Lea s'est produite si elle a choisi Lion.Pour commencer, installez tout ce dont vous avez besoin:npm i lit-element @lion/tabs
Créez un composant lea-tabsen réutilisant la fonctionnalité Lion. Cela a permis à Leah d'obtenir toute la charge fonctionnelle et l'accessibilité qui seront nécessaires pour implémenter son propre composant d'onglet.import { css } from 'lit-element';
import { LionTabs } from '@lion/tabs';
export class LeaTabs extends LionTabs {
static get styles() {
return [
super.styles,
css`
`
];
}
connectedCallback() {
super.connectedCallback();
this._setupFeature();
}
_setupFeature() {
}
}
customElements.define('lea-tabs', LeaTabs);
Lea souhaite également pouvoir styliser l' onglet et le panneau d'onglets en fonction de l'identité visuelle de Betatechs. Pour ce faire, elle crée l' Ica-tab-panneau et Ica-onglet composants , qu'elle peut le style comme bon lui semble et éventuellement mettre les onglets de Léa- composant à l' intérieur . Vous pouvez voir comment Lea a fait cela dans l'exemple ci-dessous.import { LitElement, html, css } from 'lit-element';
export class LeaTab extends LitElement {
static get styles() {
return css``;
}
render() {
return html`
<slot></slot>
`;
}
}
customElements.define('lea-tab', LeaTab);
À la perfection! Maintenant, Lea peut utiliser le composant tabscomme suit:<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>
Eh bien, maintenant que le composant Lea est prêt, il est temps d'écrire de la documentation. Vous pouvez consulter la page en direct de la documentation Lea . lea-tabsVous pouvez voir le code complet sur GitHub .PS: veuillez noter que Lea est désormais responsable de la mise à jour de la documentation des onglets lea, et les modifications apportées à la documentation Lion seront automatiquement reflétées dans la documentation Lea.Pourquoi l'open source?Les bibliothèques de composants sont très demandées. En donnant accès au code source de nos composants extensibles, nous vous aidons à faire ce dont vous avez besoin, tout en bénéficiant de tous les avantages de la communauté open source. De plus, toute contribution apportée à Lion affecte et profite directement à chaque système de conception qui l'utilise (y compris ing-web) à l'échelle mondiale. Cela signifie que nous tirons le meilleur parti des deux mondes, aidant les gens avec nos composants et obtenant une contribution précieuse de la communauté!Jetez un œil à notre référentiel ! Et si vous voulez rester à jour, assurez-vous de commencer le suivi et / ou de mettre un astérisque - nous n'avons pas (encore) twitter, mais vous pouvez néanmoins vous abonner: bonjour, je suis Thomas Olmer .Mais ce n'est pas tout!
La création d'applications est difficile, et parfois vous avez besoin d'un peu plus d'un composant spécifique, par exemple, des choses comme la validation, les formulaires, les superpositions, la localisation, etc. Mais n'ayez pas peur, Lion viendra à la rescousse!Vous pouvez trouver des informations à leur sujet dans notre documentation , et nous vous en dirons plus sur les systèmes Lion supplémentaires dans les articles de blog suivants.Remerciements
Enfin, nous aimerions terminer l'article par des remerciements:ING, pour nous avoir donné l'opportunité de travailler sur ce projet et de le rendre si cool avec la communauté open-source.À tous ceux qui ont travaillé sur Lion (en particulier l'équipe Lion), y compris tous les contributeurs (39, et ce n'est pas la limite!).Et un dernier merci, mais non moins important: Pascal Shilp pour avoir transformé mes gribouillis en une histoire intéressante.Nous vous invitons à rejoindre notre leçon gratuite sur le sujet: «SvelteJs. Démarrage rapide . "