Extração de componentes e parciais

À medida que uma base de código HTML cresce, os mesmos trechos de marcação aparecem em várias páginas: cabeçalho do site, rodapé, navegação, cartão de produto e campo de formulário. Copiá-los e colá-los cria um pesadelo de manutenção; alterar o rodapé significa editar todas as páginas.

A maioria das linguagens de modelagem no lado do servidor (Jinja, Liquid, ERB, EJS, Handlebars e Twig) oferece suporte a diretivas de inclusão: {% include "header.html" %} ou <%- include("header") %>. A compilação ou o servidor insere o parcial em cada página que o inclui.

JSX/TSX (React), SFCs do Vue, componentes do Svelte e componentes do Astro expressam a mesma ideia com semântica mais forte: um componente encapsula estrutura, estilos e comportamento. Eles são compilados para HTML durante a compilação (SSG) ou durante a execução (SSR/CSR).

Agrupe parciais e componentes por finalidade: partials/layout/ para cabeçalho, rodapé e navegação, partials/blocks/ para blocos de destaque, recurso e chamada para ação, e partials/forms/ para campo, botão e seleção. Uma organização consistente torna a biblioteca de parciais fácil de percorrer à medida que cresce.

Os parciais se tornam mais poderosos com parâmetros: {% include "button.html" with label="Save", variant="primary" %}. Dentro do parcial, faça referência aos parâmetros pelo nome. O mesmo modelo renderiza botões diferentes em todo o site.

Para parciais que envolvem conteúdo arbitrário, como cartões e diálogos, use padrões de espaço de conteúdo: {% block content %}{% endblock %} do Jinja, {% block %} do Twig e a propriedade {children} do JSX. O parcial envolvente fornece a estrutura externa; o consumidor fornece o conteúdo interno.

Geradores de sites estáticos (11ty, Astro, Hugo e Jekyll) resolvem as inclusões durante a compilação; o HTML implantado não contém sintaxe de modelo. A modelagem dinâmica (PHP, Rails e Express+EJS) é resolvida no momento da requisição, sendo flexível, mas mais lenta. Escolha com base na necessidade de o conteúdo ser dinâmico a cada requisição.

Os parciais devem conter seu próprio CSS. O parcial do rodapé é responsável por footer.css; o parcial do botão é responsável por button.css. Combinado com uma etapa de compilação que concatena somente o CSS dos parciais realmente usados em uma página, isso evita carregar o CSS de todos os componentes em todos os lugares.

Cada parcial deve poder ser testado isoladamente: renderize-o com vários dados e verifique o resultado. Ferramentas como o teste de componentes do Cypress ou o teste de instantâneo do Jest também se aplicam a parciais HTML. Parciais testados podem ser alterados com segurança, sem verificar manualmente cada página que os utiliza.

Os parciais funcionam como uma interface de programação. Alterar os nomes dos parâmetros, as convenções de espaços de conteúdo ou as propriedades obrigatórias é uma alteração incompatível para todos os consumidores. Documente a interface do parcial, descontinue recursos gradualmente e use uma ferramenta de pesquisa para encontrar todos os usos antes de refatorar.

Crie páginas compondo parciais: cabeçalho + barra lateral + conteúdo + rodapé + parciais de análise. Cada parcial é pequeno e focado; a própria página se torna um script de montagem simples que os conecta. É muito mais fácil de entender do que um único arquivo HTML com 800 linhas.

Para extrair um parcial: identifique a marcação duplicada entre as páginas, copie-a para partials/X.html, substitua cada ocorrência pela diretiva de inclusão e transforme em parâmetros os valores que diferem entre os chamadores. Faça um parcial por vez; a base de código melhora gradualmente.

Qual é o principal benefício de extrair um trecho repetido de HTML, como o rodapé de um site, para um parcial?

Extraia HTML repetido para parciais e componentes por meio de inclusões no lado do servidor (Jinja, Twig e EJS) ou componentes de estruturas (React, Vue, Svelte e Astro). Passe dados por parâmetros e componha por meio de espaços de conteúdo. Agrupe por finalidade, teste isoladamente e trate a assinatura do parcial como uma interface de programação. Faça a migração gradualmente: cada extração reduz a duplicação e melhora a capacidade de manutenção.