Em época de desenvolvimento ágil, surgiram muitas técnicas e ferramentas que visam aumentar a velocidade no desenvolvimento, além de trazer produtividade para os programadores.
Utilizar Template Engine no desenvolvimento web é uma das técnicas que permite manipular dinâmicamente toda view de um sistema.
O 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, porém não é permitido ter uma página utilizando os dois meios, ou é um ou é outro.
O Jade é considerado como uma versão otimizada do Haml (Template Engine famoso pelos desenvolvedores Ruby On Rails), motivo é que ele eliminou diversos 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
Outras técnicas que se podem usar com Jade é o conceito de inclusão de partials, em que o conceito é de adicionar partes de página (página filha) em uma página principal (página pai), muito útil quando se necessita incluir contéudo de forma dinâmica. Veja o exemplo abaixo:
Conteudo do arquivo _rodape.jade:
footer
p Rodape da página incluido via Jade
Conteudo do arquivo _cabecalho.jade
header
h1 Cabecalho da pagina
Incluindo _cabecalho.jade e _rodape.jade dinamicamente na pagina index.jade:
!!! 5 // Declaração Doctype do HTML5
html
head
title Pagina principal
body
//Incluindo os partials
include _cabecalho
include _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 é necessário adicionar um traço antes de usar comandos como: if, else, for e outros.
Utilizando a mesma página index.jade anterior:
!!! 5
html
head
title Pagina principal
body
include _cabecalho
section
- for(var i = 0; i < 10; i++)
p Número: #{i} // Imprimindo uma variável.
include _rodape
Esse foi alguns exemplos básicos do que se pode fazer usando o Jade, para conhecer a fundo recomendo essa referência: Github do Jade.
Se curtiu o post, comenta, ok? Até mais pessoal!