EJS - Embedded JavaScript Templating

Um Template Engine é um programa responsável por compilar um template (que pode ser escrito usando qualquer uma das várias linguagens) em HTML. O Template Engine normalmente receberá dados de uma fonte externa, que injetará no template que está compilando.

O PHP não é um template engine, mas uma linguagem de programação que pode ser usada para escrever templates ou templates engine. Um template engine não é apenas uma linguagem, mas também a API de programação que permite que os scripts localizem, organizem templates ou atribuam os dados do script a eles.

Os Templates Engine compilam para php nativo, portanto, não há nada a perder e muito a ganhar usando um template engine. Se você olhar para qualquer Template Engine moderno, como smarty ou twig, verá que eles compilam os modelos para fonte php, de modo que a saída seja a mesma como se você tivesse feito a página em php manualmente. Mas os templates engine sabem como compilar a página php melhor do que uma pessoa, pois os templates engine são mantidos por milhares de pessoas.

Essa abordagem permite que você reutilize elementos estáticos da página da Web, enquanto define elementos dinâmicos com base em seus dados. Também facilita a separação de preocupações, mantendo a lógica do aplicativo isolada da lógica de exibição. É mais provável que você se beneficie de um Template Engine se seu site ou aplicativo da Web for orientado a dados - como um diretório de equipe para funcionários administrativos, uma loja da Web que lista vários produtos para os usuários comprarem ou um site com funcionalidade de pesquisa dinâmica. Você não precisará de um Template Engine se estiver buscando uma pequena quantidade de dados de uma API (nesse caso, você pode usar apenas as strings de modelo nativo do JavaScript) ou se estiver criando um pequeno site estático.

Portanto, uma das vantagens do Template Engine é a segurança adicional para personalização do usuário final. Os temas em PHP puro têm capacidade irrestrita de causar danos a um usuário e sua instalação. Assim, um template engine remove esse risco, se for bom e a facilidade de uso para não programadores, como artistas gráficos ou web designers.

Next.js, Astro, EJS, Pug e PHP compartilham a mesma raiz conceitual: gerar HTML no servidor. A diferença está em como, quando e por que fazem isso, e no nível de controle e abstração oferecido.

O EJS (Embedded JavaScript Templating) é uma Template Engine que podemos utilizar com Node.js. Assim como vimos sobre o PUG, com a template engine nós podemos criar as páginas das nossas aplicações em Node.js de forma dinâmica sem depender das limitações do HTML.

A grande diferença entre o EJS e o PUG é que o EJS segue uma sintaxe muito semelhante ao HTML, desta forma qualquer desenvolvedor que já conhece HTML não terá nenhuma dificuldade de trabalhar com o EJS, ao contrário do PUG que possuí algumas particularidades e que pode, no início, afetar a produtividade do desenvolvedor. Além disso, o PHP e EJS compartilham o objetivo comum de facilitar a renderização de conteúdo dinâmico em páginas web, eles diferem em suas abordagens, sintaxe e ecossistemas subjacentes.

Um bom cenário para se usar Templates Engine seria nas áreas de login, cadastro de usuários, cadastro de admins, áreas de usuários e áreas de admin. Isso tudo com arquitetura monolítica e MVC (Model View Controller).

const express = require("express");
const app = express("express");

// Setting up EJS
app.set("view engine", "ejs");

app.get("/", (req,res) => {
    res.render("index");
});

app.listen(8080,()=>{
    console.log("App rodando");
});

Obrigatoriamente, o EJS trabalha com o padrão de servir o HTML do nosso projeto através da pasta ./views/, só que não estamos utilizando HTML básico, mas sim com EJS, a extensão .ejs. E o Express renderiza esse arquivo com res.render() onde ele reconhece os arquivos de forma automática, mas se você quer processar todos os arquivos, basta criar uma pasta: "principal/home", que ele irá interpretar esse diretório dentro da pasta views.

Dentro do arquivo EJS, a tag <%= %> significa exibir o valor da variável.

Podemos também exibir variáveis no nosso HTML:

const express = require("express");
const app = express("express");

// Setting up EJS
app.set("view engine", "ejs");

app.get("/", (req,res) => {
    var nome = "Isaac";
    var lang = "português brasileiro";
    res.render("index", {
       nome: nome,
       lang: lang,
       empresa: "Globo"
    });
});

app.listen(8080,()=>{
    console.log("App rodando");
});

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Exemplo de documento HTML5 básico." />
    <title>EJS</title>
</head>
<body>
    <h1>Dados do colaborador:</h1>

    <%= nome %>
    <%= empresa %>
    <%= lang %>
</body>
</html>

Exemplo 2: Passando parâmetros na nossa rota

const express = require("express");
const app = express("express");

// Setting up EJS
app.set("view engine", "ejs");

app.get("/:nome/:lang", (req,res) => {
    var nome = req.params.nome;
    var lang = req.params.lang;
    res.render("index", {
       nome: nome,
       lang: lang,
       empresa: "Globo"
    });
});

app.listen(8080,()=>{
    console.log("App rodando");
});

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Exemplo de documento HTML5 básico." />
    <title>EJS</title>
</head>
<body>
    <h1>Dados do colaborador:</h1>

    <%= nome %>
    <%= lang %>
</body>
</html>