Créer des composants sans framework : quand le vanilla JS suffit
On a souvent le réflexe d’ouvrir React, Vue ou Svelte dès qu’on commence un projet web, car ces outils offrent une structure et des fonctionnalités prêtes à l’emploi. Mais est-ce vraiment nécessaire pour un projet avec seulement quelques pages et un blog ? Pas forcément. Le JavaScript natif permet de créer des composants réutilisables, propres et performants, sans alourdir ton projet inutilement.
Pourquoi utiliser des composants ?
Sur un site multi-pages, certains éléments reviennent partout : la navigation, le footer, des boutons, des champs de formulaire... Sans composants, tu te retrouves à copier-coller le même HTML sur chaque page. Et quand tu dois modifier quelque chose, tu dois tout repasser à la main. C'est chronophage et source d'erreurs. Les composants règlent ce problème car tu écris le code une seule fois et tu l'utilises partout. Voici quelques exemples :
Option 1 : les Web Components natifs
Les Web Components sont une fonctionnalité native du navigateur bien documentée sur MDN. Pas besoin d'installer quoi que ce soit, ça marche partout. Le principe est simple : tu crées une classe JavaScript qui étend HTMLElement, tu écris ton HTML dans connectedCallback(), et tu enregistres ton élément avec customElements.define(). C'est aussi simple que ça ! Voici un exemple simple avec un footer :
class MonFooter extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<footer>
<p>© 2026 Benjamin Drouin</p>
</footer>
`;
}
}
customElements.define("mon-footer", MonFooter);
Pour l'utiliser dans une page HTML :
<!-- Dans le <head> -->
<script src="/src/components/mon-footer.js" defer></script>
<!-- Dans le <body> -->
<mon-footer></mon-footer>
C'est tout. Tu ajoutes ces deux lignes dans chaque page, et si tu modifies le footer un jour, tu n'as qu'un seul fichier à toucher. Tu peux aller beaucoup plus loin avec les Web Components : gérer des props, écouter des événements, utiliser le Shadow DOM pour isoler les styles... MDN propose des exemples complets sur github si tu veux creuser le sujet.
Option 2 : centraliser les styles des éléments UI
Pour des éléments plus simples comme des boutons ou des champs de formulaire, pas besoin de JavaScript. Il suffit de définir les styles une seule fois dans ton CSS.
/* Un bouton réutilisable partout */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.btn--primary {
background: var(--color-primary);
color: #fff;
}
.btn--primary:hover {
background: var(--color-primary-dark);
}
Résultat : tous tes boutons ont le même style, sans copier-coller. Et si tu veux changer quelque chose, une seule ligne à modifier dans le CSS.
Pas besoin d'un framework pour tout
React, Next.js, Nuxt... ces outils sont très bien, mais ils ont un coût réel : des dépendances à maintenir, un build à configurer, du JavaScript supplémentaire envoyé au navigateur. Pour une application avec beaucoup d'interactions et d'états, ça se justifie. Pour un site vitrine ou un blog, c'est souvent inutilement lourd. Partir sur du vanilla JS, c'est avoir un site plus rapide, un meilleur score SEO, un éco-index plus propre, et zéro dépendance à mettre à jour dans six mois. La bonne stack, c'est celle qui correspond au projet — pas celle qui fait le plus beau CV.
Et si tu veux de l'aide sur ton projet ?
Je peux t'accompagner sur la conception et le développement de ton site, en choisissant ensemble la stack vraiment adaptée à ce que tu veux construire. Contacte-moi et nous discuterons de ton projet ensemble !
