Com o intuito de permitir organizar e manipular os conteúdos HTML de uma mais fácil, intuitiva e dinâmica, costumamos usar os chamados templates engines (mecanismos de modelo) no desenvolvimento de nossas aplicações web.
O Nunjucks (extensão .njk), projeto de código aberto sob a licença BSD 2-clause “Simplified” License, é um mecanismo de modelo para JavaScript inspirado no jinja2 (Python). É muito familiar para quem já usa o Express (.ejs) e/ou o Jade (.pug), porém, é bem mais sofisticado e poderoso.
Além de possuir todo o controle de fluxo, loops e variáveis (que os outros templates engines possuem) ele também suporta alguns elementos de composição de página mais avançados, como:
- Herança em bloco
- Herança de layout
- Funções (macros)
- Tags personalizadas
- E muito mais!
Ele implementa um lexer completo e um analisador que gera um AST e um compilador que compila o JavaScript bruto, tornando os modelos muito mais rápidos, com tempo de renderização na faixa de milissegundos, e ainda permite que eles sejam pré-compilados.
A tecnologia também suporta a renderização do lado do cliente, permitindo preencher páginas complexas e usando os mesmos modelos para alterar a página quando o aplicativo recebe novos dados. Para isso, é necessário pré-compilar os modelos para produção e em seguida, precisa somente de um arquivo JavaScript 8k para executá-los. Fácil, não?
Vamos dar uma olhada em mais algumas das suas características.
Características principais
- Template inheritance (herança de modelo): Facilita a reutilização de modelos, ou seja, ao escrever um modelo é possível definir “blocos” que os modelos filhos podem substituir. Assim, o modelo filho pode herdar as características do modelo pai.
- Importação e macros: Permite carregar um modelo e acessar as variáveis e macros definidas nela.
- Includes: Serve para incluir um modelo dentro de outro modelo, é o oposto do extends.
- If/for/while: Lógica para testar condições.
Como começar a usar
A instalação é bem simples, podemos executá-la através do npm:
npm install nunjucks --save
Uma vez instalado, basta inseri-lo no projeto usando o require(‘nunjucks’) e configurá-lo. A configuração é feita através do método configure(), que recebe um objeto literal com as configurações desejadas e o caminho da pasta onde estão os arquivos .njk. Normalmente, só passamos o autoescape como true. A lista completa de configurações disponíveis pode ser encontrada neste link.
Em uma aplicação Node utilizando o Express, ficaria mais ou menos assim:
var app = express();
nunjucks.configure('views', {
autoescape: true,
express: app
});
app.get('/', function(req, res) {
res.render('index.html');
});
Então no nosso diretório views, poderíamos criar nossos arquivos njk:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ page_title }}</title>
</head>
<body>
{% for feature in features %}
<div class="module">
<h3>{{ feature.name }}</h3>
<p>{{ feature.description }}</p>
</div>
{% endfor %}
</body>
</html>
Os “features” do código acima são os dados que são passados pela função de renderização (render) para serem exibidos no HTML final, como mostra a seguir:
nunjucks.render(
'index.njk', {
page_title: "Templates engine characteristics",
features: [
{
name: "Express",
description: "fast"
},
{
name: "Gulp",
description: "clear"
},
{
name: "Nunjucks",
description: "better"
}
]
}
);
Ao ser interpretado, o seguinte código gera o seguinte HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Templates engine characteristics</title>
</head>
<body>
<div class="module">
<h3>Express</h3>
<p>fast</p>
</div>
<div class="module">
<h3>Gulp</h3>
<p>clear</p>
</div>
<div class="module">
<h3>Nunjucks</h3>
<p>better</p>
</div>
</body>
</html>
Com esse simples exemplo já dá para notar como o Nunjucks funciona e como poderá te ajudar na criação dos seus projetos. Confira o repositório do Nunjucks no GitHub e comece a usar esse poderoso template engine!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?