Template Engine: como deixar seu HTML dinâmico com Nunjucks

As Template Engine são grandes aliadas no desenvolvimento web dinâmico.

Vamos entender melhor como funciona?

O que são Template Engine?

Uma template engine serve para facilitar na criação de páginas HTML tornando o envio e exibição de informações dinâmicas em um processo mais simples e organizado.

Se antes, seu HTML simplesmente servia para marcação de texto, com a template engine, ele se transforma em um ambiente complexo que pode receber inclusive funções.

Sim! Você pode colocar variáveis, condições, estrutura de repetição etc.

Quando sua aplicação web demanda a exibição de determinados dados obtidos de alguma fonte (seja um banco de dados, uma API, uma lista, etc), normalmente utilizamos a marcação HTML para que sejam renderizadas no navegador.

Porém, a criação de páginas HTML é, muitas vezes, algo improdutivo e ineficiente, principalmente quando precisamos trabalhar com grandes quantidades de dados ou até utilizar recursos das linguagens de programação (for, if, case, etc) nas páginas HTML. Para estes casos, podemos utilizar as template engines.

Usar template engine, apresenta diversas vantagens quando comparados ao uso de HTML puro:

• Maior velocidade na criação de templates;
• Códigos limpos e organizados;
• Melhor reaproveitamento de código HTML;
• Uso de tipos de dados nativos em páginas HTML;
• Uso de recursos das linguagens de programação em páginas HTML (estruturas de condição, repetição, etc), entre outros.

Como funciona uma Template Engine?

imagem reproduzida da página treina web

O navegador só consegue “ler” informações em HTML e renderizá-las para o usuário. Por isso, as template engine “traduzem” o conteúdo dos seus templates para código HTML puro e os envia para o navegador.

Este processo permite que uma template engine exista, já que de nada adiantaria se as páginas retornadas por ela não pudessem ser lidas pelos navegadores.

Acredito que a melhor forma de entender como funciona na prática é pensar nas páginas que acessamos diariamente e que apresentam o funcionamento do HTML dinâmico.

Exemplos de HTML dinâmico: Facebook, YouTube, Google etc.

Perceba que ambos têm a mesma estrutura de página, contudo, o que aparece para você não é a mesma coisa que aparece para mim. Sendo assim, ele é dinâmico.

Estas páginas renderizam informações conforme o banco de dados, os algoritmos. Basicamente, processa todas informações sobre você para apresentar algo personalizado.

Entre outros fatores, estas páginas precisam ser dinâmicas para respeitar as regras de negócio. Ou seja, ela vai me trazer o que é relevante para mim naquele momento.

Assim temos a mesma estrutura de página só que com o conteúdo personalizado.

Conhecendo o Nunjucks

imagem reproduzida do site da documentação

Nunjucks é uma templating engine, que permite a manipulação do Html com conteúdo Javascript facilmente.

Além de possuir todo o controle de fluxo, loops e variáveis (que os outros template engine 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
• E muito mais!

Vamos entender algumas funcionalidades:

1. Herança de blocos: possibilita 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.

Essa é a estrutura do bloco que pode ser estendida em outras paginas.

2. Extends: Serve para incluir um bloco em outra página HTML.

Veja como estender o bloco header criado acima. Chamar o bloco na nova página.

Ao estender o bloco, o conteúdo que compõe este bloco será exibido na nova página e herdará toda configuração também.

3. If/for/while: Lógica para testar condições.

Veja o exemplo de uma condição:

A variável total foi criada em Javascript e pode ser invocada no HTML com o nunjucks.

4. Comentários: o Nunjucks permite comentários na página HTML

{# seu comentário aqui #}

Veja agora o exemplo de um card dinâmico.

Toda estrutura HTML foi definida, ou seja, todos os dados apareceram dentro desta formatação e estilo. Os dados serão renderizados de acordo com a solicitação dos usuários.

Neste exemplo o usuário digita um número de CPF e os dados são renderizados neste card. Ele identifica qual dado deve ser inserido em cada marcação {{}} utilizando o nome que defini no banco de dados.

Por exemplo, place.end é onde fica armazenado o endereço no meu database, e você pode nomear como quiser.

Veja o que é renderizado:

Todos os campos entre {{ }} foram substituídos pelas informações do banco de dados.

Com o Nunjucks seu HTML fica dinâmico e mais inteligente!

Instalando o Nunjucks

Para facilitar seu trabalho você pode utilizar o trio mágico!

O trio mágico é comporto pelo nunjucks, express e nodemon.

Recomendo acessar a documentação para entender os detalhes, mas deixo aqui uma breve explicação.

Express: é uma estrutura de aplicativos da Web Node.js. que fornece um conjunto robusto de recursos para aplicativos da Web e móveis. Nesta aplicação ele é uma espécie de roteador, responde a uma solicitação do cliente para um terminal específico, que é um URI (ou caminho), e um método de solicitação HTTP específico (GET, POST e assim por diante).

Nodemon: ele faz auto-restart da aplicação, toda vez que um arquivo do projeto for modificado.

Mão na massa!

1. crie seu arquivo server.js

No terminal:

2. npm init -y

3. npm install express --save

- -save indica que queremos instalar a dependência do express no package.json

4. No arquivo server.js configure o express:

5. No terminal instale o nodemoon: npm install nodemon -D

6. Configure o scripts do seu package JSON, ele deve ficar assim:

7. No terminal instale o nunjucks: npm install nunjucks

8. Configure o nunjucks no server.js:

Dica: você pode utilizar o plugin Nunjucks Templates no seu VS Code para mudar as cores e ajudar na identificação das estruturas de blocos. Ao instalar você perde a função Emmet automaticamente, para retomar essa funcionalidade siga as recomendações que o plugin apresenta. Você precisará alterar a configuração do JSON.

Alguns comandos no nunjucks:

• n-set + enter: cria variáveis
• n-for + enter: cria blocos de condições
• n-block + enter: para criar blocos

Agora é só se aventurar na documentação e botar a mão na massa!!!

Para saber mais: https://mozilla.github.io/nunjucks/templating.html

O link do repositório do GitHub com o projeto do exemplo acima: https://github.com/gabifc/PhoneJa-Intranet