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
Ajude o blog clicando neste anúncio :)

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!