Composants UI Agnostiques avec Web Awesome

Le développement frontend moderne impose un choix inconfortable. Soit s’engager avec une bibliothèque de composants spécifique à un framework comme Material UI (React) ou Vuetify (Vue), en acceptant le verrouillage propriétaire et les difficultés de migration—soit construire des composants personnalisés de zéro, sacrifiant la vitesse de développement et la cohérence.

Cet article explore Web Awesome, une bibliothèque UI agnostique construite sur des Web Components natifs qui élimine cette fausse dichotomie. En tant que successeur de Shoelace, elle fournit des composants prêts pour la production qui fonctionnent partout où HTML fonctionne, avec une API de thématisation puissante qui rivalise avec les solutions spécifiques aux frameworks.

Ce Qui Rend Web Awesome Différent

Web Components Natifs au Cœur

Web Awesome exploite les custom elements natifs du navigateur, le Shadow DOM et les propriétés personnalisées CSS. Contrairement aux composants React ou Vue, ceux-ci fonctionnent directement dans le navigateur sans transpilation :

<!-- Fonctionne dans n'importe quel fichier HTML, aucune étape de build requise -->
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/components/button/button.js"></script>

<wa-button variant="brand">Cliquez-moi</wa-button>

Ce n’est pas simplement une autre couche d’abstraction—c’est l’utilisation de la plateforme elle-même. Votre <wa-button> est aussi natif que <button>, avec une encapsulation complète et une optimisation du navigateur.

Véritable Agnosticisme Framework

Alors que d’autres bibliothèques revendiquent la compatibilité framework via des adaptateurs, les composants Web Awesome sont véritablement agnostiques. Ils fonctionnent de manière identique dans React, Vue, Angular, Svelte ou JavaScript vanilla :

// React 19+
import '@awesome.me/webawesome/dist/components/input/input.js';

function Form() {
  return <wa-input label="Email" type="email" required />;
}

<!-- Vue 3 -->
<template>
  <wa-input label="Email" type="email" required />
</template>

<script setup>
import '@awesome.me/webawesome/dist/components/input/input.js';
</script>

Pas de wrappers. Pas d’adaptateurs. Juste des éléments HTML qui se trouvent être personnalisés.

L’Évolution depuis Shoelace

Web Awesome s’appuie sur les fondations de Shoelace avec des améliorations significatives :

• Framework CSS complet : Au-delà des composants, Web Awesome inclut la typographie, les layouts et des classes utilitaires
• API de thématisation améliorée : Système de personnalisation à trois niveaux (propriétés globales, propriétés de composants, parties CSS)
• Bibliothèque de composants plus large : Étendue depuis la base de Shoelace avec des contrôles de formulaire, layouts et patterns additionnels
• Intégration Font Awesome : Packs d’icônes premium optionnels via des codes kit

Le chemin de migration depuis Shoelace est simple—la plupart des composants partagent des APIs similaires avec le préfixe sl- devenant wa-.

Thématisation Sans Outils de Build

Trois Niveaux de Personnalisation

Le système de thématisation de Web Awesome opère à trois niveaux, tous utilisant du CSS standard :

/* 1. Tokens de design globaux */
:root {
  --wa-color-primary-500: #0ea5e9;
  --wa-border-radius-medium: 0.5rem;
  --wa-font-size-base: 16px;
}

/* 2. Propriétés scopées au composant */
wa-button {
  --wa-button-height-medium: 3rem;
  --wa-button-font-weight: 600;
}

/* 3. Parties CSS pour personnalisation profonde */
wa-button::part(label) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Cette approche fournit une flexibilité de thématisation similaire à Bootstrap sans préprocesseurs ni étapes de build. Les changements se propagent naturellement à travers l’arbre de composants.

Avantages en Performance et Accessibilité

Chargement Différé par Défaut

Les Web Components permettent un véritable lazy loading au niveau du composant. En utilisant l’autoloader de Web Awesome, les composants se chargent uniquement lorsqu’ils sont utilisés :

<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

<!-- Le composant se charge uniquement quand <wa-dialog> apparaît dans le DOM -->
<wa-dialog label="Settings">...</wa-dialog>

Accessibilité Intégrée

Chaque composant Web Awesome inclut les attributs ARIA appropriés, la navigation au clavier et la gestion du focus. Le Shadow DOM garantit que ces implémentations ne peuvent pas être accidentellement écrasées :

<!-- Inclut automatiquement role="button", tabindex, gestionnaires clavier -->
<wa-button disabled>
  Les lecteurs d'écran annoncent ceci correctement
</wa-button>

Démarrage

Pour la plupart des projets, l’approche CDN ne nécessite que deux lignes :

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

Pour les applications de production utilisant npm :

npm install @awesome.me/webawesome

Puis importez uniquement ce dont vous avez besoin :

import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/card/card.js';
import '@awesome.me/webawesome/dist/components/button/button.js';

Pourquoi l’UI Basée sur les Standards Est Importante

Les composants agnostiques construits sur les standards web offrent des avantages uniques à long terme. Vos composants UI restent portables à travers les stacks technologiques, réduisant les coûts de réécriture lorsque les frameworks changent. Les équipes peuvent choisir différents frameworks pour différentes parties d’une application sans sacrifier la cohérence de l’UI.

Plus important encore, vous misez sur la plateforme web elle-même plutôt que sur une entreprise ou communauté particulière. Les Web Components sont maintenant supportés dans tous les navigateurs modernes, avec une spécification peu susceptible de rompre la compatibilité ascendante.

Conclusion

Pour les équipes fatiguées de réécrire l’UI à chaque migration de framework, Web Awesome offre une alternative durable—des composants qui fonctionnent partout, personnalisables avec juste du CSS, et construits sur des standards qui survivront à n’importe quelle tendance de framework. En choisissant les Web Components plutôt que des solutions spécifiques aux frameworks, vous investissez dans du code qui reste précieux quel que soit le framework qui dominera le paysage de demain.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.