Web Awesome

Shoelace, la lib de composants d’UI basé sur les web-components, devient Web Awesome, par les gens de Font Awesome. Ils ont fait un kickstarter pour leur lib en Avril dernier.

Le grand intérêt de ces composants est toujours l’isolation gagnée via les web-components : les composants marchent donc n’importe où, avec n’importe quel framework (ou sans), et rien à setup.

Ils ont tout un système de personnalisation basé sur des “Design Tokens” (par exemple les arrondis, les couleurs…) et de “CSS Parts” pour les spécificités de certains composants qui a l’air bien réfléchi. (Même si je trouve que l’approche de Shadcn fait plus sens : on vendor un composant “headless”, où on édite le composant lui-même mais la logique reste dans les dépendances, qu’ils peuvent mettre à jour indépendamment.)

 

Le modèle économique de Web Awesome est toujours la souscription à leur offre “Pro”, qui ici donne accès à :

• des composants “Pro-only”
• Un Theme Builder intéractif pour faciliter la mise en place d’un design system
• Leur “Pro Pattern Library”, une bibliothèque de snippets à copier-coller pour les éléments d’interfaces les plus génériques (article de blog, page de vente,  page de payement, …) et squelettes de sites complet
• Leur “Pro Layout Components”, un “layout engine” pour gérer facilement le responsive et le positionnement d’éléments structurels (bannière, header, hero, menu/aside, footer, …)

À noter que ce mode de fonctionnement devient petit à petit le standard, avec quelques variations. Par exemple, DaisyUI (une bibliothèque de composants basé sur Tailwind) propose un Theme builder gratuitement. Il y a quelques années, certains de leurs composants étaient payant, mais on dirait qu’ils sont tous gratuit maintenant : à la place, ils vendent des templates, des composants Figma et un support dédié.

Tailwind propose aussi une offre ”Tailwind Plus“.

React Admin (une bibliothèque de composants spécifiquement prévus pour construire des backoffices) de Marmelab propose de nombreux composants gratuitement, mais certains composants plus spécialisés ou complexe sont vendus via leur ”Entreprise Edition”, ainsi qu’un support dédié.

Je ne m’étais jamais vraiment intéressé à ce genre de bibliothèques basés sur ce modèle économique avant, mais en y réfléchissant je trouve qu’il fait sens (en particulier ici puisque Font Awesome existe depuis longtemps.) Il permet de financer le travail d’une entreprise qui produit des outils de qualité qui nous facilitent la vie.

À l’inverse (et en rétrospective), il y a les frameworks open-source qui sont maintenant à l’abandon, ou avec des forks maintenus par la communauté (par exemple Semantic-ui et son fork Fomantic-ui.) Et à l’inverse de l’inverse, il y a aussi les frameworks payant qui ont été abandonnés par leurs éditeurs, laissant leurs utilisateurs dans la boue. 😩