Como usar o EJS para modelar seu aplicativo Node

Introdução

Ao criar aplicativos Node dinamicamente, uma maneira fácil e rápida de modelar seu aplicativo pode ser necessária.

O Jade é o mecanismo de exibição do Express por padrão, mas a sintaxe do Jade pode ser complexa de mais para muitos casos de uso. O EJS é uma alternativa que cumpre essa função muito bem e é bastante fácil de ser configurado. Vamos dar uma olhada em como criar um aplicativo simples e usar o EJS para incluir partes repetíveis do nosso site (parciais) e passar dados para nossas exibições.

Como configurar o aplicativo de demonstração

Estaremos fazendo duas páginas para nosso aplicativo, sendo uma com largura total e a outra com uma barra lateral.

Obtenha o código: é possível encontrar um repositório git com o código de demonstração completo no GitHub aqui

Estrutura de arquivos

Aqui estão os arquivos que serão necessários para o nosso aplicativo. Vamos fazer o modelamento dentro da pasta de exibições e o resto do processo segue o padrão para práticas com o Node.

- views ----- partials ---------- footer.ejs ---------- head.ejs ---------- header.ejs ----- pages ---------- index.ejs ---------- about.ejs - package.json - server.js 

O package.json armazenará as informações do nosso aplicativo Node e as dependências necessárias (express e EJS). O server.js armazenará as configurações do nosso servidor Express. Vamos definir as rotas para nossas páginas aqui.

Configuração do Node

Vamos entrar em nosso arquivo package.json e configurar nosso projeto por lá.

package.json

{   "name": "node-ejs",   "main": "server.js",   "dependencies": {     "ejs": "^3.1.5",     "express": "^4.17.1"   } } 

Tudo o que precisamos é o Express e EJS. Agora, precisamos instalar as dependências que acabamos de definir. Vá em frente e execute:

  • npm install

Com todas as nossas dependências instaladas, vamos configurar o nosso aplicativo para usar o EJS e definir nossas rotas para as duas páginas que precisamos: a página de índica (largura total) e a página “sobre” (barra lateral). Isso tudo será feito dentro do nosso arquivo server.js.

server.js

// load the things we need var express = require('express'); var app = express();  // set the view engine to ejs app.set('view engine', 'ejs');  // use res.render to load up an ejs view file  // index page app.get('/', function(req, res) {     res.render('pages/index'); });  // about page app.get('/about', function(req, res) {     res.render('pages/about'); });  app.listen(8080); console.log('8080 is the magic port'); 

Aqui definimos nosso aplicativo e configuramos ele para ser exibido na porta 8080. Também é necessário definir o EJS como o mecanismo de exibição para o nosso aplicativo Express usando app.set('view engine', 'ejs');. Observe como enviamos uma exibição para o usuário usando o res.render(). É importante notar que o res.render() irá procurar em uma pasta de exibições pela exibição. Dessa forma, só é preciso definir pages/index, já que o caminho completo é views/pages/index.

Iniciar o nosso servidor

Vá em frente e inicie o servidor usando:

  • node server.js

Agora, podemos ver nosso aplicativo em um navegador em http://localhost:8080 e http://localhost:8080/about. Nosso aplicativo está configurado e precisamos definir nossos arquivos de exibição e ver como o EJS funciona neles.

Criar as parciais do EJS

Assim como muitos outras aplicativos que compilamos, grande parte do código será reutilizado. Iremos chamá-los de parciais e definir três arquivos que vamos usar em todo o nosso site: head.ejs, header.ejs e footer.ejs. Vamos criar esses arquivos agora.

views/partials/head.ejs

<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> 

views/partials/header.ejs

<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> 

views/partials/footer.ejs

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

Adicionar as parciais do EJS às exibições

As nossas parciais já estão definidas. Tudo o que precisamos fazer é incluí-las em nossas exibições. Vamos entrar em index.ejs e about.ejs e usar a sintaxe include para adicionar as parciais.

Sintaxe para incluir uma parcial do EJS

Utilize <%- include('RELATIVE/PATH/TO/FILE') %> para incorporar um parcial do EJS em outro arquivo.

  • O hífen <%- é usado, ao invés de apenas <% para dizer ao EJS para renderizar HTML não processado.
  • O caminho para o parcial é relativo ao arquivo atual.

views/pages/index.ejs

<!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> 

Agora, podemos observar nossa exibição definida no navegador em http://localhost:8080. node-ejs-templating-index

Para a página “sobre”, também adicionamos uma barra lateral de inicialização para demonstrar como as parciais podem ser estruturadas para reuso em diferentes modelos e páginas.

views/pages/about.ejs

<!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> 

Se visitarmos http://localhost:8080/about, veremos nossa página “sobre” com uma barra lateral! node-ejs-templating-about

Agora, podemos começar a usar o EJS para passar dados do nosso aplicativo Node para nossas exibições.

Passar dados para exibições e parciais

Vamos definir algumas variáveis básicas e uma lista para passar para nossa página inicial. Volte para seu arquivo server.js e adicione o código a seguir dentro da sua rota app.get('/').

server.js

// index page 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     }); }); 

Acabamos de criar uma lista chamada mascots e uma string simples chamada tagline. Vamos entrar em nosso arquivo index.ejs e usá-los.

Renderizar uma única variável no EJS

Para ecoar uma única variável, utilizamos apenas <%= tagline %>. Vamos adicionar isto em nosso arquivo index.ejs:

views/pages/index.ejs

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

Executar um loop em dados no EJS

Para executar um loop em nossos dados, vamos utilizar o .forEach. Vamos adicionar isto em nosso arquivo de exibição:

views/pages/index.ejs

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

Agora, podemos ver em nosso navegador que as novas informações foram adicionadas!

node-ejs-templating-rendered

Passar dados para uma parcial no EJS

A parcial do EJS tem acesso aos mesmos dados que a exibição pai. Mas tenha cuidado: caso esteja fazendo referência a uma variável em uma parcial, ela precisa estar definida em todas as exibições que usam a parcial ou ocorrerá um erro.

Também é possível definir e passar variáveis a uma parcial do EJS na sintaxe include desta forma:

views/pages/about.ejs

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

No entanto, é necessário novamente ter cuidado em assumir que uma variável já está definida.

Se quiser fazer referência a uma variável em uma parcial que talvez nem sempre esteja definida e atribuir-lhe um valor padrão, faça isso desta forma:

views/partials/header.ejs

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

Na linha acima, o código do EJS está renderizando o valor de variant caso esteja definido e default caso contrário.

Conclusão

O EJS permite a criação rápida de aplicativos quando não precisamos de nada muito complexo. Usando parciais e tendo a capacidade de passar facilmente variáveis às nossas exibições, somos capazes de criar aplicativos fantásticos rapidamente.

Para outras referências sobre o EJS, consulte a documentação oficial aqui.