Certos elementos em nossos sites sempre se repetem, como o menu, o cabeçalho e o rodapé. Replicar o código desses elementos em cada página é uma péssima ideia. Imagine ter um site com mais de 100 páginas HTML e para cada uma, ter que codificar o mesmo menu, o mesmo cabeçalho e o mesmo rodapé. Além de ser algo extremamente trabalhoso, dar manutenção em um código desses é uma tarefa complicada. Imagine que para uma simples alteração de ano, geralmente encontrada no rodapé de muitos sites, seria necessário alterar 100 arquivos. O risco de esquecer algum deles e deixar suas páginas com um layout inconsistente é alto.
Com o advento do HTML5, existe uma nova especificação para reutilização de HTML. São os HTML imports. Porém, sua adoção pelos navegadores atuais(07/2015) ainda é mínima. Outra estratégia largamente utilizada é o uso do include do PHP, como visto em outro artigo aqui mesmo no Tableless. Porém, essa não é uma solução elegante, já que depende de um servidor PHP, e nem todo site/sistema é criado com base nessa estrutura de backend.
Entra em cena o template engine Jade. Com recursos para fazer include de HTML e muitas outras funcionalidades, sua sintaxe é extremamente limpa, baseada em indentação, como o Python. No exemplo a seguir (retirado e adaptado do site oficial do projeto) compare seu equivalente transformado em HTML:
Todo começo de linha é interpretado como uma tag HTML, a menos que comece com o operador “|”. Neste caso, será interpretado como innerHTML, assim como o texto após uma tag e um espaço (visto na linha 4 da imagem acima).
No Jade, os atributos das tags são definidos dentro de parênteses, separados entre si por vírgula:
Equivalente em HTML:
Ids e classes podem igualmente ser definidos dentro dos parênteses ou através de atalhos, onde # é um atalho para id e . é um atalho para classes:
O código acima irá gerar:
O Jade é muito mais que uma sintaxe limpa para seu HTML. Um grande recurso do Jade é o uso da herança de templates e includes. É possível criar uma página base e então criar páginas que estendam esta página com um conteúdo específico. Assim, conseguimos criar um template com os trechos que se repetem em nosso site, como o cabeçalho, o rodapé, etc. Abaixo, um exemplo de herança de templates do Jade:
No arquivo layout.jade acima, é definido o template que será estendido por todas as outras páginas. É possível também visualizar o recurso de includes.
include head: arquivo head.jade, onde é carregado folhas de estilo, definido o title da página, o viewport, dentre outros;include cabecalho: arquivo cabecalho.jade onde é carregado a logo do site;include menu: arquivo menu.jade onde é inserido o menu do site. Pode também ser colocado junto com o cabecalho, mas aqui mantivemos em um arquivo separado;block contentBlock: esse é o trecho que será sobrescrito por cada página que extender o layout.jade;include footer: arquivo footer.jade com o rodapé do site (simplificado para melhor entendimento):
O Jade “inclui” o código do arquivo no lugar onde ele invocado (onde foi feito o include). Criado o layout.jade, basta estender esse layout para cada página do seu site como visto no código abaixo:
O nome contentBlock foi definido no arquivo layout.jade para ser sobrescrito. Com o recurso de includes e extends conseguimos resolver o problema sem ter que replicar código HTML para várias páginas.
Outra funcionalidade que acelera nosso processo de desenvolvimento é o uso dos mixins. Mixins reusam fragmentos de código HTML, possibilitando parametrizar certos pedaços de código. Vamos tomar como exemplo o panel do Bootstrap. Esse é o código usado para criar um panel:
Não é tanto markup, mas que tal usarmos a estrutura de um panel com apenas uma linha? Com o uso de mixins isso é possível. Criamos uma estrutura inicial com o markup de um panel, parametrizando o que for necessário como o título, o rodapé e o estilo do panel. Após criada essa estrutura (mixin) para inserir um panel, basta chamá-lo com o comando +panel(), passando os parâmetros desejados.
O seguinte código gerou os panels abaixo. Perceba, que na estrutura criada, se não informarmos um título, o panel ficará sem o seu título. O mesmo para o rodapé. Se não informarmos a classe para estilizar o panel, nosso mixin aplica a classe panel-default:
Note que no conteúdo do mixin, temos um block. Esse será o bloco substituído pelo conteúdo definido abaixo da chamada ao panel. Nesse mixin, é apresentado também o conceito de variáveis e o comando de decisão if. Perceba o grande poder que os mixins nos proporciona. O exemplo acima é simples, mas podemos criar qualquer “componente” mais complexo e reutilizá-lo ao longo do nosso desenvolvimento.
Se interessou pelo Jade? Quer começar a usar hoje mesmo? No site oficial do projeto você encontra um passo a passo de como usá-lo, além de documentação para outros recursos não citados nesse post. A princípio, a sintaxe do Jade pode parecer um pouco intimidadora, mas sua curva de aprendizado é rápida. Em questão de alguns minutos você já está familiarizado com sua estrutura.
Com o Jade também é possível gerar o HTML preservando a indentação ou configurando-o para remover espaços e quebras de linha, gerando um HTML “minificado”.
E se você utiliza algum automatizador de tarefas, basta adicionar o Jade ao seu workflow com o Grunt ou o Gulp.