EJS (Embedded JavaScript Templating)

EJS (Embedded JavaScript Templating)

O EJS (Embedded Javascript Templating), foi um dos primeiros Templates Engines criados, e utilizados em NodeJS.

Foi durante muito tempo, e ainda continua sendo, a escolha ideal para o gerenciamento e criação de layouts em aplicações feitas com NodeJS.

Diferentemente do HandleBars que vimos na lição passada, o EJS permite que você possa misturar HTML com código JavaScript, para renderizar conteúdo dinâmico de maneira simples e eficiente.

Ele conta com um conjunto imenso de tags especiais, que nos possibilita embutir lógica JavaScript, dentro de arquivos de template, tornando-o útil para gerar páginas HTML, a partir de dados vindos do servidor.

Como você verá mais a diante, o EJS oferece suporte nativo para estruturas de controle como loops (for, while), condicionais (if, else) e entre outras.

Ou seja, diferente do HandleBars que tinha um fucionamento um pouco mais limitado e rígido, com o EJS você consegue transportar parte da lógica do seu sistema, para que ela seja tratada exclusivamente de dentro do próprio template.

E este é um dos pontos principais onde muitos desenvolvedores entram em desacordo, uma vez que alguns deles não concordam com isso, já outros, acabam concordando pela sua maior facilidade (quebra galho).

Independentemente se você prefere deixar parte da lógica dentro do seu template ou não (servidor), nesta lição, nós vamos aprender a utilizar o EJS em nossos projetos feitos com NodeJS!

Pronto para começarmos? 🤩

Criando nosso projeto de testes

Antes de colocarmos a mão na massa, é deveras importante que você configure o seu projeto inicial.

Para isso, eu criei uma pasta chamada de EJS dentro da minha área de trabalho (desktop):

Com o seu terminal (Prompt de Comando) aberto na pasta raiz que acabamos de criar, precisamos inicializar o nosso projeto por meio do NPM, sendo assim, execute o seguinte comando abaixo:

npm init -y

A flag -y, como você já deve saber, cria um novo projeto de forma enxuta, respondendo SIM para tudo 😅

Feito isso, vamos instalar também a biblioteca do express, pois iremos precisar dela nesta lição: 

npm install express

Por fim, não se esqueça de criar seu index.js, junto com a lógica inicial do seu servidor web:

const express = require('express');
const app = express();
const port = 3000;

// Rota principal
app.get('/', (req, res) => {
  res.send('Olá, mundo!');
});

// Iniciar o servidor
app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Agora, vamos aprender a instalar a biblioteca do EJS no seu projeto 😋

Instalando o EJS

Assim como toda biblioteca do NodeJS, o seu processo de instalação é bem simples, com o seu terminal (Prompt de Comando) aberto na pasta raiz do seu projeto, execute o seguinte comando abaixo:

npm install ejs

Feito isso, vamos entender um pouco mais sobre o uso dessa biblioteca 😉

Configuração inicial do EJS

Por se tratar de uma biblioteca de Template Engine, é bem óbvio que devemos importá-la no nosso arquivo (index.js), e em seguida conectá-la com a biblioteca do express 🙃

Ao contrário de outras bibliotecas, a utilização do require('ejs') não se faz necessário por aqui, porque a biblioteca do express, de forma automatica, já carrega o mecanismo de visualização (como o EJS) dentro do seu projeto.

Portanto, basta apenas que você digo para o express carregar a biblioteca do EJS internamente:

app.set('view engine', 'ejs');

Observação: se você NÃO estiver usando express ou algum outro framework que automatize esse processo, e estiver utilizando o EJS de forma mais manual, então seria necessário fazer o require('ejs') para carregar o módulo.

O comando app.set('view engine', 'ejs'), é responsável por fazer com que o EJS seja o Template Engine padrão do seu projeto.

E pronto, apenas com essa configuração, você já será capaz de usar o EJS, fácil não? 🤩

Veja como ficou o index.js:

const express = require('express');
const app = express();
const port = 3000;

//Configuração do Template Engine (EJS)
app.set('view engine', 'ejs');

// Rota principal
app.get('/', (req, res) => {
  res.send('Olá, mundo!');
});

// Iniciar o servidor
app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Criando a pasta Views

Dentro da pasta raiz do seu projeto, vamos criar uma nova pasta chamada de views:

Criamos ela com o objetivo de organizar os arquivos do nosso projeto (separar lógica de layout), será dentro da pasta views que nós iremos criar todos os nossos templates (arquivos HTML) que levarão a extensão .ejs em vez de .html.

O que indica que nossos templates estão sendo renderizados por meio da biblioteca do EJS 😄

Passando dados para dentro de nossas views

Antes de estilizarmos as nossas views, que tal aprendermos a passar alguns dados para ela?

Esse processo é feito de forma bem simples, primeiro nós iremos criar uma nova rota dentro do express, e em seguida vamos passar para uma de nossas views, uma série de variáveis que irão representar desde strings, arrays, objects, booleans e etc...

No meu caso, eu vou fazer isso dentro da rota principal (/):

// Rota principal
app.get('/', (req, res) => {
  //Variaveis que serão enviadas a nossa View:
  const nome = "Micilini Roll";
  const rank = 128;
  const isAtivo = true;
  const dinheiro = 12.98;
  const numerosDaSorte = [23, 98, 87, 76];
  const informacoesAdicionais = {
    site: 'https://micilini.com',
    isHttps: true
  }

  //Passamos todos os parâmetros para a nossa view como segundo parâmetro dentro de uma estrutura de chave e valor:
  res.render('home', {
    nome: nome,
    rank: rank,
    isAtivo: isAtivo,
    dinheiro: dinheiro,
    numerosDaSorte: numerosDaSorte,
    informacoesAdicionais: informacoesAdicionais
  });
});

Observe que passamos cada um dos nossos dados como o segundo argumento do método render().  

Lembrando que o nome das chaves (que você estiver colocando no segundo parâmetro), será o nome das variáveis que você terá acesso globalmente dentro dos seus arquivos de template (.ejs).  

Observação: Você pode passar o segundo argumento como null, ou um objeto vazio ({}), isto é, caso não precise passar nenhuma informação para o seu template:  

res.render('home', {});

....

res.render('home', null);

  Veja como ficou o index.js:  

const express = require('express');
const app = express();
const port = 3000;

//Configuração do Template Engine (EJS)
app.set('view engine', 'ejs');

// Rota principal
app.get('/', (req, res) => {
    //Variaveis que serão enviadas a nossa View:
    const nome = "Micilini Roll";
    const rank = 128;
    const isAtivo = true;
    const dinheiro = 12.98;
    const numerosDaSorte = [23, 98, 87, 76];
    const informacoesAdicionais = {
      site: 'https://micilini.com',
      isHttps: true
    }
  
    //Passamos todos os parâmetros para a nossa view como segundo parâmetro dentro de uma estrutura de chave e valor:
    res.render('home', {
      nome: nome,
      rank: rank,
      isAtivo: isAtivo,
      dinheiro: dinheiro,
      numerosDaSorte: numerosDaSorte,
      informacoesAdicionais: informacoesAdicionais
    });
  });

// Iniciar o servidor
app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Agora que já sabemos como passar nossos dados para dentro do template, nada mais justo do que criar o nosso home.ejs dentro da pasta views, não é verdade? 😌

Criando nosso arquivo de home

No tópico anterior, você configurou a rota principal (/) para renderizar (render) um arquivo chamado de home, que representa o nosso layout.

Sendo assim, nada mais justo que criarmos o arquivo home.ejs dentro da pasta views:

Lembrando que você pode escrever códigos HTML normalmente como faria em qualquer outro arquivo .html.

Mostrando dados em uma view

Com o seu arquivo home.ejs aberto no seu editor de códigos, vamos aprender agora a como mostrar dados advindos do servidor 🙂

E o processo é tão simples que você nem vai acreditar 😅

Você só precisa mencionar o nome da variável global (que veio como segundo argumento do método render) dentro das tags <%= e %>, por exemplo:

<h1>Bem Vindo: <%= nome %></h1>

Lembrando que você pode mostrar quaisquer tipo de variáveis, com exceção dos tipos arrays e objects, que precisam de um tratamento especial para serem exibidos.  

Para exibir um array, basta informar o seu index da seguinte forma:

 <p>Meu número favorito é: <%= numerosDaSorte[0] %></p>

Para exibir um objeto, basta informar a sua chave da seguinte forma:

<p>Meu site é: <%= informacoesAdicionais.site %></p>

Veja como ficou o resultado final:

Renderizações condicionais em uma view

Com o EJS, você consegue executar diversas renderizações condicionais dentro de uma view.

O comando <% if (condição) { %> ... <% } %> permite fazer uma renderização condicional dentro do EJS, veremos alguns exemplos:

Renderização com base na variável nome:

<% if (nome === "Micilini Roll") { %>
  <h1>Bem-vindo, Micilini Roll!</h1>
<% } else { %>
  <h1>Olá, visitante!</h1>
<% } %>

Renderização com base na variável rank:

<% if (rank > 100) { %>
  <p>Parabéns! Seu rank é <%= rank %>, você está no topo!</p>
<% } else { %>
  <p>Seu rank é <%= rank %>, continue se esforçando!</p>
<% } %>

Renderização com base na variável isAtivo:

<% if (isAtivo) { %>
  <p>Seu status: Ativo</p>
<% } else { %>
  <p>Seu status: Inativo</p>
<% } %>

Renderização com base na variável dinheiro:

<% if (dinheiro > 10) { %>
  <p>Você tem R$ <%= dinheiro %> disponíveis na sua conta.</p>
<% } else { %>
  <p>Seu saldo é insuficiente. Você só tem R$ <%= dinheiro %> disponíveis.</p>
<% } %>

Renderização com base em um objeto:

<% if (informacoesAdicionais.isHttps) { %>
  <p>O site <a href="<%= informacoesAdicionais.site %>"><%= informacoesAdicionais.site %></a> é seguro (HTTPS).</p>
<% } else { %>
  <p>O site <a href="<%= informacoesAdicionais.site %>"><%= informacoesAdicionais.site %></a> não usa HTTPS, cuidado!</p>
<% } %>

Renderização com base em multiplas opções:

<% if (isAtivo && dinheiro > 10) { %>
  <p>Você está ativo e tem dinheiro suficiente para fazer compras!</p>
<% } else if (isAtivo && dinheiro <= 10) { %>
  <p>Você está ativo, mas seu saldo é baixo.</p>
<% } else { %>
  <p>Você está inativo. Ative sua conta para realizar transações.</p>
<% } %>

Renderizações inline:

<em>Nome: <%= typeof nome != 'undefined' ? nome : 'Visitante' %></em>

Para fazer uma renderização mais simplista (sem a necessidade do else), basta fazer isso da seguinte forma:

<% if (nome === "Micilini Roll") { %>
  <h1>Bem-vindo, Micilini Roll!</h1>
<% } %>

Veja como ficou o resultado final:

Estrutura de repetição com uma view

Com o EJS, você também consegue realizar algumas estruturas de repetição dentro das suas views.

Para iterar sobre arrays, você pode usar o método forEach dentro de um loop usando as tags <% %>, da seguinte forma:

<h3>Meus Números da Sorte</h3>

<ul>
  <% numerosDaSorte.forEach(function(numero, index) { %>
    <li><%= index %>: <%= numero %></li>
  <% }); %>
</ul>

No caso de um objeto, você pode fazer isso da seguinte forma:

<% for (let chave in informacoesAdicionais) { %>
  <li><strong><%= chave %>:</strong> <%= informacoesAdicionais[chave] %></li>
<% } %>

Além disso, você pode utilizar as estruturas de repetição for e while, observe:

<h3>Meus Números da Sorte (Usando loop for)</h1>

<ul>
  <% for (let i = 0; i < numerosDaSorte.length; i++) { %>
    <li><%= i %>: <%= numerosDaSorte[i] %></li>
  <% } %>
</ul>

<h1>Meus Números da Sorte (Usando loop while)</h1>

<ul>
  <% let i = 0; %>
    <% while (i < numerosDaSorte.length) { %>
      <li><%= i %>: <%= numerosDaSorte[i] %></li>
    <% i++; %>
  <% } %>
</ul>

Note que até o momento, estamos executando códigos Javascript dentro das nossas views, interessante não? 😉

Veja como ficou o resultado final:

Criando variáveis locais dentro das views

Com o EJS, você é capaz de criar variáveis locais dentro das suas views, observe como isso pode ser feito:

<%
  // Criando variáveis locais para simplificar o acesso
  const meuNome = 'Micilini Roll';
  const idade = 25;
  const endereco = {
    rua: 'Rua das Flores',
    cidade: 'São Paulo'
  };
%>

<p>Nome: <%= meuNome %></p>
<p>Idade: <%= idade %></p>
<h2>Endereço</h2>
<p>Rua: <%= endereco.rua %></p>
<p>Cidade: <%= endereco.cidade %></p>

Veja como ficou o resultado final:

Observação: só tome cuidado para não criar variáveis que são do mesmo nome das variáveis globais, pois se não seu código gerará um erro.

Chamando funções dentro de uma view

Você pode definir e chamar funções diretamente no bloco de código <% %> dentro do seu template EJS. No entanto, essa abordagem é limitada e não é recomendada para lógica complexa.

Observe como você pode fazer isso abaixo:

<% 
  function saudacao(nome) {
    return 'Olá, ' + nome + '!';
  }
%>

<h1><%= saudacao('Micilini') %></h1>

Além disso, caso desejar, você pode chamar funções que você mesmo definiu no seu servidor em NodeJS, para isso, declare uma função dentro do index.js da seguinte forma:

// Função que retorna uma mensagem
function getSaudacao(nome) {
  return 'Olá, ' + nome + '!';
}

Em seguida, não se esqueça de passar essa função para dentro do método render da seguinte forma:

// Rota para renderizar o template EJS
app.get('/', (req, res) => {
  const nome = 'Micilini';
  const mensagem = getSaudacao(nome);  // Chama a função aqui
  res.render('home', { mensagem });
});

Por fim, dentro do home.ejs, basta executar a sua função normalmente:

<h1><%= mensagem %></h1>

Observação: para lógicas mais complexas, é melhor mantê-las no código NodeJS, e passar os resultados para o template EJS.

Observação: manter a lógica de negócios no backend (NodeJS) em vez do template, ajuda a manter o código mais limpo e seguro.

Utilizando Partials com EJS

Partials nada mais são do que trechos de templates reutilizáveis que permitem criar partes de um layout que podem ser incluídas em outros templates (são conhecidos como mini-templates).

Eles são úteis para evitar duplicação de código, e garantir consistência em várias partes de suas views.

Como exemplo, você pode criar um template chamado de Header, que representa um cabeçalho na sua aplicação.

Para que mais tarde, em outros templates, você possa chamar esse Header de forma a reutilizá-lo em outras partes do seu código (ou você prefere repetir o código HTML toda vez?).

Para isso, dentro da pasta views, vamos criar uma subpasta chamada de partials (mas poderia ser qualquer outro nome), e dentro dela, criamos um novo arquivo chamado de header.ejs, que vai representar nosso cabeçalho:

<header>
  <h1>Este é o cabeçalho</h1>
</header>

Já no index.js, basta chamá-lo por meio do comando include:

<!DOCTYPE html>
<html>
  <head>
    <title>Página Principal</title>
  </head>
  <body>
    <!-- Inclusão do cabeçalho -->
    <%- include('partials/header') %>

    <h1>Bem-vindo à Página Principal</h1>
    <p>Conteúdo da página...</p>
  </body>
</html>

Veja como ficou o resultado final:

Para que este efeito fosse reproduzido, eu precisei respeitar a seguinte estrutura de pastas:

views/
  partials/
    header.ejs
  home.ejs

Mudando o diretório da pasta views

Por padrão o express em conjunto com EJS, espera que seus templates estejam dentro de uma pasta chamada de views.

Mas caso você queria fazer com que o EJS procure em uma outra pasta, o processo é bem simples, basta trocar o caminho de views dentro do seu servidor da seguinte forma:

app.set('views', './templates');

No código acima, o express vai procurar nossos arquivos .ejs dentro da pasta templates, e não mais dentro da pasta views.

Utilizando arquivos estáticos com EJS

A inclusão de arquivos estáticos em nossos templates, funciona de forma muito semelhante ao que aprendemos durante a lição do express.  

Para isso, precisamos definir uma pasta de arquivos estáticos, onde vai conter todos os nossos arquivos CSS, imagens e entre outros.

No meu caso, eu criei uma nova pasta chamada public, dentro da pasta raiz do nosso projeto:

Dentro dela, vamos criar um arquivo chamado de home.css, com o seguinte conteúdo:

body, html{
  background-color:green;
  color:white;
}

Já dentro do seu index.js, você precisa adicionar a seguinte configuração para ter suporte a esses arquivos:

//Configuração da pasta de arquivos estáticos
app.use(express.static('public'));

Por fim, basta chamar os seus arquivos que estão dentro de public da seguinte forma:

<!DOCTYPE html>
<html>
  <head>
    <title>Página Principal</title>
    <!-- Inclusão do arquivo CSS -->
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    <!-- Inclusão do cabeçalho -->
    <%- include('partials/header') %>

    <h1>Bem-vindo à Página Principal</h1>
    <p>Conteúdo da página...</p>
    
    <!-- Inclusão de uma imagem -->
    <img src="/images/logo.png" alt="Logo">

    <!-- Inclusão do arquivo JavaScript -->
    <script src="/js/script.js"></script>
  </body>
</html>

Observação: no arquivo acima, estou dando exemplos de arquivos CSS, JS e imagens que estão em suas respectivas pasta separadas dentro da pasta principal public.

public/
  images/
    logo.png
  css/
    styles.css
  js/
    script.js
views/
  partials/
    header.ejs
  home.ejs
index.js (ou app.js, server.js, etc.)

Arquivos da lição

Os arquivos que você viu durante o decorrer desta lição, podem ser encontrados neste link.

Conclusão

Nesta lição, você aprendeu a utilizar o EJS, um template engine que suporta lógica Javascript embutida dentro dos seus templates.

Até a próxima 😉