Reutilização de componentes HTML

Boa noite, sou novo nesta área de front-end e estou com uma dúvida quanto à organização de um website.

Desenvolvi recentemente um site vanilla, apenas com HTML, CSS, e Javascript. A medida que o site foi crescendo e tendo várias pages adicionadas, ficou meio inviável a manutenção de todos os arquivos. Pesquisei um pouco e conheci o poder dos frameworks javascript (react, angular, vue etc.) e tipo, a organização utilizando algum desses frameworks fica muito melhor principalmente por conta do sistema de componentes, que permite a reutilização de uma boa parte de código/scoped styles. Esse site em específico não tem muita interação, ou seja, não há muito código javascript por trás, a maioria são páginas de apresentação etc. Minha dúvida é, compensa utilizar algum desses frameworks citados só para ter uma estrutura mais organizada? Se não, existe alguma tecnologia que faz apenas esse papel de reutilização de templates? Atualmente, quando tenho que alterar a navbar do site por exemplo, tenho que alterar em todas as páginas.

Vc pode usar um template engine como o Nunjucks.

Basicamente essas engines usam uma linguagem propria quase tão poderosa quanto qualquer linguagem de programação.

No caso do Nunjucks, pra vc inserir algum trecho HTML dependendo de alguma condição vc faria algo assim:

{% if variable %}
<div>Testando!!!</div>
{% endif %}

Ou um for:

<h1>Posts</h1>
<ul>
{% for item in items %}
  <li>{{ item.title }}</li>
{% else %}
  <li>This would display if the 'item' collection were empty</li>
{% endfor %}
</ul>

Há várias outras funcionalidades e diferente dos frameworks e bibliotecas que citou, depois que a engine processa seu template, o resultado final é puramente HTML.

O problema pode ser a parte de configuração que é um pouco chatinha. Eu usei o Nunjucks para um projeto que fiz um tempo atrás e achei satisfatório.

Eu usei ele em conjunto com o Gulp que é um task runner. Não sei se vc tem familiariadade com o conceito de task runners, mas vale a pena estudar a respeito.

O Gulp me ajudou a integrar o Nunjuks no meu projeto.

Outra alternativa pode ser vc usar um desses geradores de sites estáticos, há vários deles, vc pode ver uma lista aqui:

Atualmente no meu blog eu estou usando o Hugo. Se tiver curiosidade sobre como estou usando, vc pode ver o meu repositório aqui.

Também já usei o Jekyll pra fazer um site pra um cliente e funcionou bem, embora eu prefira o Hugo mesmo.

1 curtida

Vc pode usar o json2html https://json2html.com

O jeito fácil de fazer: pra vc inserir algum trecho HTML dependendo da condição vc faria:

  let transform = {'<>':'div','class':'card','html':[
                {'<>':'img','alt':'this is our logo','src':'logo.jpg'},
                {'<>':'p','text':'Welcome to json2html!'}
            ]};

document.write( json2html.transform({},transform) );

e isso gera

 <div class="card">
<img src="logo.jpg"src="this is our logo"></img>
<p>Welcome to json2html!</p>
1 curtida

Não compensa. É mais prático tratar a reutilização no servidor e responder pro navegador o html já processado.

1 curtida