Como Usar o EJS para Modelar sua Aplicação Node

Introdução

Ao criar rapidamente aplicações Node, às vezes é necessário um modo rápido de modelar sua aplicação.

Jade é o motor de modelo padrão para o Express, mas a sintaxe do Jade pode ser excessivamente complexa para muitos casos de uso.

Os modelos incorporados do JavaScript (EJS) podem ser usados como uma alternativa ao motor de modelos.

Neste artigo, você aprenderá como aplicar o EJS a uma aplicação Express, incluir partes repetíveis do seu site e passar dados para as visualizações.

Pré-requisitos

Se deseja acompanhar este artigo, você precisará de:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Este tutorial foi originalmente escrito para express v4.17.1 e ejs v3.1.5. Foi verificado com o Node v16.0.0, npm v7.11.1, express v4.17.1 e ejs v3.1.6.

Passo 1 — Configurando o Projeto

Primeiro, abra sua janela de terminal e crie um novo diretório de projeto:

mkdir ejs-demo

Em seguida, navegue até o diretório recém-criado:

cd ejs-demo

Neste ponto, você pode inicializar um novo projeto npm:

npm init -y

Em seguida, você precisará instalar o pacote express:

npm install express@4.17.1

Depois, instale o pacote ejs:

npm install ejs@3.1.6

Neste ponto, você tem um novo projeto pronto para usar Express e EJS.

Passo 1 — Configurando com server.js

Com todas as dependências instaladas, vamos configurar a aplicação para usar EJS e configurar as rotas para a página de Índice e a página Sobre.

Crie um novo arquivo server.js e abra-o com o seu editor de código e adicione as seguintes linhas de código:

var express = require('express');
var app = express();

// definir o mecanismo de visualização como ejs
app.set('view engine', 'ejs');

// usar res.render para carregar um arquivo de visualização ejs

// página de índice
app.get('/', function(req, res) {
  res.render('pages/index');
});

// página sobre
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

Este código define a aplicação e escuta na porta 8080.

Este código também define o EJS como o mecanismo de visualização para a aplicação Express usando:

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

Observe como o código envia uma visualização para o usuário usando res.render(). É importante notar que res.render() irá procurar em uma pasta views pela visualização. Portanto, você só precisa definir pages/index uma vez que o caminho completo é views/pages/index.

Em seguida, você irá criar as visualizações usando EJS.

Passo 2 — Criando os Parciais EJS

Assim como em muitas das aplicações que você constrói, haverá muito código que será reutilizado. Estes são considerados parciais. Neste exemplo, haverá três parciais que serão reutilizados na página de Índice e na página Sobre: head.ejs, header.ejs e footer.ejs. Vamos criar esses arquivos agora.

Crie um novo diretório views:

mkdir views

Em seguida, crie um novo subdiretório partials:

mkdir views/partials

Neste diretório, crie um novo arquivo head.ejs e abra-o com o seu editor de código. Adicione as seguintes linhas de código:

<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
  body { padding-top:50px; }
</style>

Este código contém metadados para a head de um documento HTML. Ele também inclui estilos do Bootstrap.

Em seguida, crie um novo arquivo header.ejs e abra-o com o seu editor de código. Adicione as seguintes linhas de código:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

Este código contém navegação para um documento HTML e utiliza várias classes do Bootstrap para estilização.

Em seguida, crie um novo arquivo footer.ejs e abra-o com o seu editor de código. Adicione as seguintes linhas de código:

<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

Este código contém informações de direitos autorais e utiliza várias classes do Bootstrap para estilização.

Em seguida, você irá usar esses parciais em index.ejs e about.ejs.

Passo 3 — Adicionando os Parciais EJS às Visualizações

Você tem três parciais definidos. Agora você pode include eles em suas visualizações.

Use <%- include('CAMINHO/RELATIVO/PARA/ARQUIVO') %> para incorporar um parcial EJS em outro arquivo.

• O hífen <%- em vez de apenas <% diz ao EJS para renderizar HTML puro.
• O caminho para o parcial é relativo ao arquivo atual.

Em seguida, crie um novo subdiretório pages:

mkdir views/pages

Neste diretório, crie um novo arquivo index.ejs e abra-o com o seu editor de código. Adicione as seguintes linhas de código:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Salve as alterações neste arquivo e então execute a aplicação:

node server.js

Se você visitar http://localhost:8080/ em um navegador da web, poderá observar a página de Índice:

Em seguida, crie um novo arquivo about.ejs e abra-o com o seu editor de código. Adicione as seguintes linhas de código:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
  <div class="col-sm-8">
    <div class="jumbotron">
      <h1>This is great</h1>
      <p>Welcome to templating using EJS</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
      <h3>Look I'm A Sidebar!</h3>
    </div>
  </div>
</div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Este código adiciona uma barra lateral do Bootstrap para demonstrar como os parciais podem ser estruturados para serem reutilizados em diferentes modelos e páginas.

Salve as alterações neste arquivo e então execute a aplicação:

node server.js

Se você visitar http://localhost:8080/about em um navegador da web, poderá observar a página Sobre com uma barra lateral:

Agora você pode começar a usar o EJS para passar dados da aplicação Node para as visualizações.

Passo 4 — Passando Dados para Visualizações e Parciais

Vamos definir algumas variáveis básicas e uma lista para passar para a página de Índice.

Reveja o arquivo server.js no seu editor de código e adicione as seguintes linhas de código dentro da rota app.get('/'):

var express = require('express');
var app = express();

// definir o mecanismo de visualização como ejs
app.set('view engine', 'ejs');

// usar res.render para carregar um arquivo de visualização ejs

// página inicial
app.get('/', function(req, res) {
  var mascots = [
    { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
    { name: 'Tux', organization: "Linux", birth_year: 1996},
    { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
  ];
  var tagline = "No programming concept is complete without a cute animal mascot.";

  res.render('pages/index', {
    mascots: mascots,
    tagline: tagline
  });
});

// página sobre
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

Este código define uma matriz chamada mascots e uma string chamada tagline. Em seguida, vamos usá-los em index.ejs.

Renderizando uma Única Variável em EJS

Para ecoar uma única variável, você pode usar <%= tagline %>.

Revisite index.ejs no seu editor de código e adicione as seguintes linhas de código:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Este código irá exibir o valor de tagline na página de Índice.

Iterando sobre Dados em EJS

Para iterar sobre dados, você pode usar .forEach.

Revisite index.ejs no seu editor de código e adicione as seguintes linhas de código:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>

    <ul>
      <% mascots.forEach(function(mascot) { %>
        <li>
          <strong><%= mascot.name %></strong>
          representing <%= mascot.organization %>,
          born <%= mascot.birth_year %>
        </li>
      <% }); %>
    </ul>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Salve as alterações neste arquivo e depois execute a aplicação:

node server.js

Se você visitar http://localhost:8080/ em um navegador da web, você pode observar a página de Índice com os mascots:

Passar Dados para um Parcial em EJS

O parcial EJS tem acesso a todos os mesmos dados que a visualização pai. Mas tenha cuidado. Se você estiver referenciando uma variável em um parcial, ela precisa estar definida em cada visualização que usa o parcial, ou ocorrerá um erro.

Você também pode definir e passar variáveis para um parcial EJS na sintaxe include assim:

...
<header>
  <%- include('../partials/header', {variant: 'compact'}); %>
</header>
...

Mas você precisa novamente ter cuidado ao assumir que uma variável foi definida.

Se você quiser referenciar uma variável em um parcial que pode nem sempre estar definida e atribuir um valor padrão a ela, você pode fazer assim:

...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

Na linha acima, o código EJS está renderizando o valor de variant se estiver definido e default se não estiver.

Conclusão

Neste artigo, você aprendeu como aplicar EJS a uma aplicação Express, incluir partes repetíveis do seu site e passar dados para as visualizações.

O EJS permite que você construa aplicações quando não precisa de complexidade adicional. Ao usar parciais e ter a capacidade de passar facilmente variáveis para suas visualizações, você pode construir algumas ótimas aplicações rapidamente.

Consulte a documentação do EJS para obter informações adicionais sobre recursos e sintaxe. Consulte Comparando Motores de Modelagem JavaScript: Jade, Mustache, Dust e Mais para entender os prós e contras de diferentes motores de visualização.