O uso de template engines no desenvolvimento de aplicações web permite manipular e organizar conteúdo HTML de forma dinâmica. Neste artigo, 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 caractere %, que representa uma tag do HTML no Haml.
Abaixo segue uma pequena comparação entre HTML vs Haml vs Jade.
HTML
<html>
<head>
<title>HTML :(</title>
</head>
<body>
<h1>HTML :(</h1>
</body>
</html>
Haml
%html
%head
%title Haml :|
%body
%h1 Haml :|
Jade
doctype html
html
head
title Jade :)
body
h1 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:
doctype html
html
head
title Meu site
body
h1 Meu site
Em seguida, crie dois novos templates – o primeiro é o arquivo _header.jade e o segundo é o_footer.jade, veja abaixo:
_header.jade
header h1 Olá seja bem-vindo!
_footer.jade
footer p Gostou do meu site?
Para incluir esses partials dentro da página principal index.jade basta utilizar a função != partial("nome_do_partial"). Veja abaixo como fica:
doctype html
html
head
title Meu site
body
!= partial("_header")
!= partial("_footer")
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:
doctype html
html
head
title Meu site
body
!= partial("_header")
section
if (Date.now.getHour() > 8 && Date.now.getHour() <= 18)
p Bom dia!
else
p Boa noite!
!= partial("_footer")
Para finalizar, caso você precise executar um código in-line do JavaScript ou CSS, utilize as tagsscript. 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:
doctype html
html
head
title Página principal
link(href="main.css", rel="stylesheet")
style.
body {
background: #999;
color: #FFF;
}
script(src="main.js", type="text/javascript")
script.
(function() {
alert("Seja bem vindo!");
})();
body
!= partial("_header")
section
if (Date.now.getHour() > 8 && Date.now.getHour() <= 18)
p Bom dia!
else
p Boa noite!
!= partial("_footer")
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!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?