Extraction de composants et modèles partiels

À mesure qu’une base de code HTML s’agrandit, les mêmes fragments de balisage apparaissent sur de nombreuses pages : en-tête du site, pied de page, navigation, fiche produit, champ de formulaire. Les copier-coller créent un cauchemar de maintenance ; modifier le pied de page impose de modifier chaque page.

La plupart des langages de modélisation côté serveur (Jinja, Liquid, ERB, EJS, Handlebars, Twig) prennent en charge les directives d’inclusion : {% include "header.html" %} ou <%- include("header") %>. Le système de compilation ou le serveur insère le fragment dans chaque page qui l’inclut.

JSX/TSX (React), les fichiers de composant unique de Vue, les composants Svelte et les composants Astro expriment la même idée avec une sémantique plus riche : un composant encapsule la structure, les styles et le comportement. Ils sont compilés en HTML au moment de la compilation (SSG) ou de l’exécution (SSR/CSR).

Regroupez les fragments et les composants par fonction : partials/layout/ pour l’en-tête, le pied de page et la navigation, partials/blocks/ pour les blocs d’accueil, de fonctionnalités et d’appel à l’action, partials/forms/ pour les champs, boutons et listes de sélection. Une organisation cohérente rend la bibliothèque de fragments facile à parcourir à mesure qu’elle s’agrandit.

Les fragments deviennent plus puissants lorsqu’ils acceptent des paramètres : {% include "button.html" with label="Save", variant="primary" %}. Dans le fragment, faites référence aux paramètres par leur nom. Le même modèle génère différents boutons sur l’ensemble du site.

Pour les fragments qui enveloppent un contenu arbitraire (fiches, boîtes de dialogue), utilisez des modèles d’emplacements : {% block content %}{% endblock %} de Jinja, {% block %} de Twig et la propriété {children} de JSX. Le fragment enveloppant fournit l’ossature ; l’appelant fournit le contenu intérieur.

Les générateurs de sites statiques (11ty, Astro, Hugo, Jekyll) résolvent les inclusions au moment de la compilation ; le HTML déployé ne contient aucune syntaxe de modèle. La modélisation dynamique (PHP, Rails, Express+EJS) est résolue au moment de la requête : elle est flexible, mais plus lente. Choisissez selon que le contenu doit être dynamique pour chaque requête.

Les fragments devraient posséder leur propre CSS. Le fragment de pied de page possède footer.css ; le fragment de bouton possède button.css. Associée à une étape de compilation qui concatène uniquement le CSS des fragments réellement utilisés sur une page, cette organisation évite de charger partout le CSS de chaque composant.

Chaque fragment devrait pouvoir être vérifié isolément : générez-le avec diverses données et vérifiez la sortie. Des outils comme les vérifications de composants de Cypress ou les vérifications d’instantanés de Jest s’appliquent également aux fragments HTML. Des fragments vérifiés peuvent être modifiés sans devoir contrôler manuellement chaque page qui les utilise.

Les fragments constituent une API. Modifier les noms des paramètres, les conventions d’emplacements ou les propriétés obligatoires constitue un changement incompatible pour chaque appelant. Documentez le contrat du fragment, retirez progressivement les anciennes versions et utilisez un outil de recherche pour trouver chaque utilisation avant de remanier le code.

Construisez les pages en composant des fragments : en-tête + barre latérale + contenu + pied de page + fragments d’analyse. Chaque fragment est petit et ciblé ; la page elle-même devient un simple script d’assemblage qui les relie. Il est bien plus facile de comprendre cette organisation qu’un fichier HTML unique de 800 lignes.

Pour extraire un fragment : repérez le balisage dupliqué entre les pages, copiez-le dans partials/X.html, remplacez chaque occurrence par la directive d’inclusion et transformez en paramètres les valeurs qui diffèrent selon les appelants. Procédez à raison d’un fragment à la fois ; la base de code s’améliore progressivement.

Quel est le principal avantage d’extraire un fragment HTML répété (comme le pied de page d’un site) dans un fragment ?

Extrayez le HTML répété dans des fragments ou des composants au moyen d’inclusions côté serveur (Jinja, Twig, EJS) ou de composants de cadre (React, Vue, Svelte, Astro). Transmettez les données par des paramètres et composez les éléments avec des emplacements. Regroupez-les par fonction, vérifiez-les isolément et traitez la signature du fragment comme une API. Migrez progressivement : chaque extraction réduit la duplication et améliore la maintenabilité.