Tableless

Busca Menu

Acelere o desenvolvimento front-end com Jade

Seja o primeiro a comentar por

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:

Jade e o HTML gerado

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:

form(name="form", novalidate)
  textarea(name="pergunta", required, id="pergunta")
  label(for="pergunta") Digite sua pergunta

Equivalente em HTML:

<form name="form" novalidate>
  <textarea name="pergunta" required id="pergunta"></textarea>
  <label for="pergunta">Digite sua pergunta</label>
</form>

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:

div#container
  input#titulo.validate.bordered(type="text")

O código acima irá gerar:

<div id="container">
  <input id="titulo" class="validate bordered" type="text">
<div>

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:

Templates e includes

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):

exemplo de footer do arquivo Jade

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:

contentBlock foi o nome do bloco definido no arquivo layout.jade para ser sobrescrito.

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:

Código para criação de um panel no Bootstrap.

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.

Mixin e seu uso

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:

Panels com uso de mixins

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.

Publicado no dia