Extracción de componentes y parciales

A medida que crece una base de código HTML, los mismos fragmentos de marcado aparecen en muchas páginas: encabezado del sitio, pie de página, navegación, tarjeta de producto y campo de formulario. Copiarlos y pegarlos crea una pesadilla de mantenimiento; cambiar el pie de página implica editar cada página.

La mayoría de los lenguajes de plantillas del lado del servidor (Jinja, Liquid, ERB, EJS, Handlebars y Twig) admiten directivas de inclusión: {% include "header.html" %} o <%- include("header") %>. La compilación o el servidor inserta el parcial en cada página que lo incluye.

JSX/TSX (React), los SFC de Vue, los componentes de Svelte y los componentes de Astro expresan la misma idea con una semántica más sólida: un componente encapsula la estructura, los estilos y el comportamiento. Se compilan a HTML durante la compilación (SSG) o en tiempo de ejecución (SSR/CSR).

Agrupe los parciales y componentes por finalidad: partials/layout/ para header/footer/nav, partials/blocks/ para bloques hero/feature/cta y partials/forms/ para field/button/select. Una organización coherente facilita explorar la biblioteca de parciales a medida que crece.

Los parciales son más potentes cuando reciben parámetros: {% include "button.html" with label="Save", variant="primary" %}. Dentro del parcial, haga referencia a los parámetros por nombre. La misma plantilla puede representar distintos botones en todo el sitio.

Para los parciales que envuelven contenido arbitrario (tarjetas y diálogos), use patrones de slots: {% block content %}{% endblock %} de Jinja, {% block %} de Twig y la propiedad {children} de JSX. El parcial envolvente proporciona la estructura; el consumidor proporciona el contenido interior.

Los generadores de sitios estáticos (11ty, Astro, Hugo y Jekyll) resuelven las inclusiones durante la compilación; el HTML desplegado no contiene sintaxis de plantillas. Las plantillas dinámicas (PHP, Rails y Express+EJS) las resuelven en el momento de la solicitud; son flexibles, pero más lentas. Elija según si el contenido debe ser dinámico para cada solicitud.

Los parciales deben incluir su propio CSS. El parcial del pie de página es responsable de footer.css; el parcial del botón, de button.css. Si además el proceso de compilación concatena únicamente el CSS de los parciales que realmente se usan en una página, se evita cargar en todas partes el CSS de cada componente.

Cada parcial debería poder probarse de forma aislada: represéntelo con distintos datos y compruebe el resultado. Herramientas como las pruebas de componentes de Cypress o las pruebas de instantáneas de Jest también se aplican a los parciales HTML. Los parciales probados pueden modificarse con seguridad sin verificar manualmente cada página que los utiliza.

Los parciales son una API. Cambiar los nombres de los parámetros, las convenciones de slots o las propiedades obligatorias es un cambio incompatible para todos los consumidores. Documente la interfaz del parcial, retírelo gradualmente y use una herramienta de búsqueda para encontrar todos sus usos antes de refactorizar.

Construya las páginas componiendo parciales: header + sidebar + content + footer + parciales de analytics. Cada parcial es pequeño y está centrado en una tarea; la propia página se convierte en un script ligero de ensamblaje que los conecta. Es mucho más fácil de entender que un archivo HTML único de 800 líneas.

Para extraer un parcial: identifique el marcado duplicado entre las páginas, cópielo en partials/X.html, reemplace cada aparición por la directiva de inclusión y convierta en parámetros los valores que difieren entre los distintos consumidores. Extraiga un parcial cada vez; la base de código mejorará de forma progresiva.

¿Cuál es la principal ventaja de extraer un fragmento repetido de HTML (como el pie de página de un sitio) a un parcial?

Extraiga el HTML repetido en parciales o componentes mediante inclusiones del lado del servidor (Jinja, Twig y EJS) o componentes de frameworks (React, Vue, Svelte y Astro). Pase datos mediante parámetros y componga mediante slots. Agrupe por finalidad, pruebe de forma aislada y trate la firma del parcial como una API. Migre de forma progresiva: cada extracción reduce la duplicación y mejora el mantenimiento.