Concrete Logo
Hamburger button

Brincando com o template engine Jade

  • Blog
  • 19 de Janeiro de 2015
Share

Jade - Node Template Engine

O uso de template engines no desenvolvimento de aplicações web permite manipular e organizar conteúdo HTML de forma dinâmica. Neste post, vou apresentar um framework fortemente utilizado em projetos Node.js, chamado de Jade.

O Jade é muito popular em projetos Node.js, mas possui também suporte a outras linguagens de programação. Ele permite construir conteúdo dinâmico de forma clean e enxuta, e a única regra necessária em seu uso é respeitar o espaçamento entre as tags do HTML, separando cada tag por tabulação ou por espaços. Não, o Jade não compila uma página que utiliza os dois tipos de espaçamentos, ou é um ou é outro.

O Jade foi inspirado no template engine Haml, que é um framework famoso na comunidade Ruby. A diferença é que o Jade surgiu com algumas melhorias, como a exclusão de alguns caracteres especiais utilizados pelo Haml e a eliminação do uso do caracter %, que representa uma tag do HTML no Haml.

Abaixo segue uma pequena comparação entre HTML vs Haml vs Jade.

HTML

Haml

Jade

Uma técnica muito utilizada com Jade é a separação/inclusão de partials, em que na prática você cria pedaços reaproveitáveis de template e em seguida adiciona-os em uma página principal. Isso é muito utilizado quando se precisa incluir conteúdo dinâmico. Para exemplificar esse conceito, crie o arquivo index.jade; com o código a seguir:

Em seguida crie 2 novos templates – o primeiro é o arquivo _header.jade e o segundo é o _footer.jade, veja abaixo:

_header.jade

_footer.jade

Para incluir esses partials dentro da página principal index.jade basta utilizar a função != partial("nome_do_partial"). Veja abaixo como fica:

Dessa forma, é possível fragmentar uma página permitindo organizar seu layout em componentes.

Outra técnica que é bastante útil é a inclusão de comandos de linguagem server-side dentro do layout, ou seja, o uso de comandos if, else, for dentro da página, fazendo com que o Jade processe-os em tempo de compilação dos templates.

Volte para página index.jade e faça as seguintes alterações:

Para finalizar, caso você precise executar um código in-line do JavaScript ou CSS, utilize as tags script. ou style. (isso mesmo! Tem um ponto final!), lembrando que esse ponto deve ser usado somente se for declarar um código in-line. Se for carregar um script ou css externo, você não precisa usar este ponto. Veja o exemplo abaixo:

Esse foi alguns exemplos básicos do que se pode fazer usando o Jade. Para conhecer a fundo recomendo que acesse seu site oficial, para saber como usá-lo em um framework web Node.js, além de aprender outras técnicas mais avançadas. Até a próxima!