Jade – Bom Engine para Node.js

Olá galerinha! Estava esses dias pensando em alguns engines legais, e sempre me pergunta sobre JADE. Muitas técnicas e ferramentas que melhoram a velocidade no desenvolvimento surgem hoje para melhorar a produtividade dos programadores. Utilizar Template Engine no desenvolvimento web é uma das técnicas que permite manipular dinâmicamente toda view de um sistema. Levando esses pontos em consideração vamos falar sobre JADE. Jade é um excelente template engine recomendado para Node.Js, além de possuir suporte a outras linguagens de programação, ele permite construir conteúdo dinâmico de forma clean e enxuta, a única regra necessária em seu uso é a de respeitar o espaçamento entre as tags, seja separando cada tag por tabulação ou por espaços, e lembrando, não é permitido ter uma página utilizando os dois meios, ou é um ou o outro. Quando falamos em Jade temos que perceber que ele é considerado uma otimização do Haml (quem usa Ruby vai saber, pois é um Engine muito poderoso para Ruby), motivo que ele eliminou os caracteres especiais utilizados pelo Haml, exemplo disso é o uso obrigatório no Haml do char % para representar tags nativas do HTML. Abaixo segue alguns exemplos de códigos comparando conteúdo HTML com Haml e Jade:

HTML Convencional
<html>
<head>
<title>Usando Padrão HTML</title>
</head>
<body>
<h1>Usando Padrão HTML</h1>
</body>
</html>

Haml
%html
%head
%title Usando Haml
%body
%h1 Usando Haml

Jade
html
head
title Usando Jade
body
h1 Usando Jade

Conteúdo do arquivo _rodape.jade: footer p Rodape da pagina incluido via jade Conteúdo do arquivo _cabecalho.jade: header h1 cabecalho da pagina Para incluir os partials _cabecalho.jade e _rodape.jade, basta utilizar a função !=partial(“nome_do_partial”) que dinamicamente será incluído em uma página principal, no nosso caso será na página index.jade:

doctype html
html
head
title Pagina principal
body
!= partial("_cabecalho")
!= partial("_rodape")

Dessa forma é possível fragmentar uma página trazendo dinamismo e organização para o seu layout. Outra técnica que é bastante útil e a inclusão de comandos de linguagem server-side dentro do layout, para isso usar os comandos: if, else, for dentro da página que automaticamente o Jade vai processá-los em tempo de compilação dos templates. Utilizando a mesma página index.jade anterior:

doctype html
html
head
title Página principal
body
!= partial("_cabecalho")
section
for(var i = 0; i < 10; i++)
if (i % 2 == 0)
p Número: #{i} // Imprimindo números pares.
!= partial("_rodape")

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

doctype html
html
head
title Página principal
style.
body {
background: #999;
color: #FFF;
}
script.
alert("Atenção! Números pares na tela!");
body
!= partial("_cabecalho")
section
for(var i = 0; i < 10; i++)
if (i % 2 == 0)
p Número: #{i} // Imprimindo números pares.
!= partial("_rodape")

Em breve falaremos mais sobre Jade… até mais! fonte: http://tiagoserra.com.br/jade-bom-engine-para-node-js/