L'auteur du matériel, dont nous publions la traduction aujourd'hui, estime que si vous allez utiliser des composants Web lors de la conception des interfaces de vos applications et que vous recherchez une bibliothèque appropriée indépendante des cadres d'interface utilisateur, vous devriez jeter un œil aux projets qui seront discutés ici.
Informations préliminaires
Lorsque j'ai entendu constamment parler de
Stencil ,
Svelte et
Lit HTML , j'ai conçu ce matériel et commencé à rechercher des bibliothèques de composants Web, j'ai pensé qu'il serait difficile pour moi de trouver quelque chose d'intéressant basé sur les capacités du HTML. C'était juste parce que je ne réalisais pas encore tout le potentiel des composants Web. J'étais une personne dont la réflexion se limite au cadre des bibliothèques et des cadres. Mon désir m'a rappelé quelque chose comme «trouver une bibliothèque HTML intéressante». Mais maintenant, je comprends qu'il n'est pas si difficile de trouver une bonne bibliothèque de composants Web.
Tous les composants Web, grâce aux technologies sous-jacentes sur lesquelles ils sont construits, sont assez populaires, ils, par définition, peuvent interagir les uns avec les autres et se montrer bien lorsqu'ils sont utilisés ensemble dans le même projet. Dans le même temps, ce qui est créé à l'aide de la norme Web Components, par exemple, certains composants ou widgets, fonctionnera, d'une part, dans tous les navigateurs modernes, et d'autre part, il sera compatible avec toute bibliothèque JavaScript ou tout framework JavaScript, qui utilisent HTML.
1. Bibliothèque de composants Web matériels
Habituellement, si le nom de la bibliothèque de composants d'interface utilisateur contient le mot «Matériel», cela le mène aux leaders en matière de classements et de téléchargements. La bibliothèque de
composants Web Material de Google est une version Web de la bibliothèque Material. Bien que la bibliothèque en question soit encore en cours de développement, les composants qui sont dans sa composition peuvent déjà être utilisés dans une grande variété de projets Web. Le développement de cette bibliothèque sera certainement très intéressant à regarder.
2. Ensemble de référentiels PolymerElements
La bibliothèque
Polymer de Google vous permet de créer des composants Web autonomes et réutilisables qui fonctionnent sur le même principe que les éléments HTML standard. L'utilisation de ces composants Web est aussi simple que l'utilisation d'éléments HTML classiques. Le référentiel
PolymerElements contient plus de 100 composants Web créés par Polymer, présentés comme des référentiels autonomes. Voici un exemple de travail avec un composant Web similaire:
<!-- --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script> <!-- HTML- --> <paper-checkbox>Web Components!</paper-checkbox>
3. Bibliothèque de composants Vaadin
Je crois que
Vaadin Components est un projet prometteur. Cette bibliothèque contient environ 30 composants Web open source en développement conçus pour développer des interfaces mobiles et de bureau conçues pour les navigateurs modernes. L'état du référentiel de bibliothèque nous permet de dire qu'un travail actif est en cours sur celui-ci.
4. Bibliothèque d'éléments câblés
La bibliothèque
Wired Elements a marqué près de 7 000 étoiles sur GitHub. Il vous permet de créer des éléments qui semblent dessinés à la main. Ils ressemblent à des mises en page et chaque fois que l'écran est affiché, les éléments changent, c'est-à-dire que même la même page consultée à des moments différents sera différente. Je ne sais pas si une telle bibliothèque est utile à qui que ce soit, il est incontestable que les pages conçues avec son utilisation sont incroyables.
Ici, vous pouvez l'expérimenter.
Voici un exemple de son utilisation avec React. Et
ici - avec Vue.
5. Bibliothèque Elix
Elix est un ensemble de composants Web qui couvre les besoins des modèles de conception d'interface standard. La haute qualité de ces composants est obtenue en garantissant leur conformité aux recommandations énoncées dans
ce document. Par exemple, conformément à ces recommandations, les éléments HTML standard sont considérés comme de la qualité. Il convient de noter que le projet Elix soutient une communauté de personnes partageant les mêmes idées et qu'ils recherchent ceux qui peuvent les rejoindre.
6. Bibliothèque d'éléments temporels
La bibliothèque d'
éléments temporels existe depuis un certain temps; elle est modérément populaire sur GitHub. Il est basé sur un composant qui étend les capacités de l'élément HTML
<time> standard. À l'aide de cette bibliothèque, les horodatages peuvent être représentés comme des chaînes localisées ou comme du texte qui est automatiquement mis à jour dans le navigateur de l'utilisateur. Voici un exemple de travail avec cette bibliothèque:
<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm </local-time> -- <local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30 </local-time>
7. Bibliothèque de composants Web UI5
La bibliothèque de
composants Web UI5 a été développée dans le cadre du projet
OpenUI5 par SAP. Il s'agit d'une collection d'éléments d'interface utilisateur légers et indépendants pouvant être réutilisés. Il convient de noter que ces composants ne sont pas un module complémentaire sur UI5. Ce sont des éléments indépendants, ils peuvent être utilisés en conjonction avec différents environnements pour le développement d'interfaces web. La conception des composants suit
ce manuel SAP.
8. Projet PatternFly Elements
Le projet
PatternFly Elements est une collection d'environ 20 composants Web pratiques, ainsi que des outils pour leur développement. Ces composants Web sont adaptés à une utilisation dans tous les domaines du développement Web, vont bien avec diverses bibliothèques et cadres. Par exemple, vous pouvez les utiliser lors du développement de projets Web à l'aide de React, Vue, Angular ou JavaScript standard.
Pour expérimenter avec PatternFly Elements, exécutez la séquence de commandes suivante:
git clone git@github.com:patternfly/patternfly-elements.git cd patternfly-elements npm install # - lerna bootstrap npm run storybook
9. Le projet webcomponents.org
Le projet
webcomponents.org est un portail qui est un catalogue de composants web construits à l'aide de Polymer et de projets conviviaux. C'est bien car avec son aide vous pouvez vous tenir au courant des nouveaux développements de l'équipe Polymer. Ici aussi, vous pouvez trouver des documents intéressants sur les composants Web.
Résumé
Dans cet article, nous avons examiné 9 projets liés aux composants Web. Nous espérons que vous pourrez parcourir les référentiels et sites pertinents pour trouver ce que vous recherchez. Si vous êtes intéressé par le sujet des composants Web, vous trouverez
ici ,
ici et
ici des listes de composants Web et des documents supplémentaires pour travailler avec eux.
Chers lecteurs! Quelles bibliothèques de composants Web utilisez-vous?