Шаблонізатори. EJS

MVC та шаблонізація

Шаблонізація тісно пов'язана з концепцією MVC, яка полягає у розподілі логіки, даних та уявлення. У MVC-додатках користувач запитує потрібний ресурс на сервері, потім контролер або роутер запитує дані програми у моделі (бази даних) і передає ці дані уявленню (шаблону), яке здійснює остаточне форматування даних для кінцевого користувача. MVC-подання реалізуються за допомогою мов шаблонизації. При використання шаблонизації, представлення передає значення шаблону, отримані з моделі, і вказує файл шаблону, визначальний спосіб відображення цих значень.

template

EJS шаблони

EJS шаблонізатор досить популярний і відрізняється швидкою компіляцією та рендерингом. Використовує прості теги шаблону: <% %> для підстановлення даних. Можна використовувати і свої роздільники, наприклад, замініть [? ?] замість <% %>. Можна розбивати великий шаблон на підшаблони. Постачання з CLI. Підтримка шаблонизації як стороні сервера, і стороні браузера. Є статичне кешування шаблонів. І головне відповідає системі Express View та легко підключається до фреймворку Express.

У процесі рендерингу EJS екранує (escapes) всі спеціальні символи контекстних значеннях і замінює їх кодами HTML-сутностей. Це запобігає атаки міжсайтового виконання сценаріїв (Cross-Site Scripting, XSS), це коли хакер намагається у якості даних надіслати шкідливий код JavaScript з метою, що цей код буде виконано при виведенні даних у браузері іншого користувача. Наприклад, ми вводимо шкідливий код у чаті і він виконується у всіх користувачів чату.

EJS використовує спеціальні теги у шаблонах, куди ми хочемо підставити дані або код

Тег	Опис
`<%`	для потоку управління, без виведення, в основному допоміжний код JavaScript
`<%_`	Whitespace Slurping видаляє всі пробіли перед ним
`<%=`	Виводить значення у шаблон (екранований HTML)
`<%-`	Виводить неекрановане значення у шаблон, небезпечна операція використовуйте її обережно
`<%#`	Тег коментаря, без виконання, без висновку
`<%%`	Виводить літерал `<%`
`%>`	Простий кінцевий тег, яким закриваємо усі попередні теги
`_%>`	Кінцевий тег Whitespace Slurping, видаляє всі прогалини після нього

Приклад

Для цього прикладу необхідно встановити два пакети:

npm i express ejs

Нехай існує потреба вивести таблицю на сторінку в браузері. Код програми буде наступним

// ejs template example

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

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

const users = [
  {
    name: 'Tedy',
    age: 20,
    species: 'student',
  },
  {
    name: 'Adam',
    age: 32,
    species: 'worker',
  },
];

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

app.listen(3000, () => console.log('Example app listening on port 3000!'));

Тут досить просто. Ми вказуємо Express використовуваний шаблонізатор, після цього є масив користувачів яких необхідно відрендерити на сторінці, а він наприклад може бути більшим у кілька сотень рядків і пагінація наприклад не передбачена.

В обробнику кореневого маршруту ми рендеруємо шаблон функцією render, вона приймає два параметри. Перший параметр - це ім'я шаблону, який необхідно відрендерити. Другий параметр - це об'єкт з даними, якими ми прокидуємо в шаблон, наш список користувачів. Сам шаблон index.ejs повинен мати наступний вигляд:

<!DOCTYPE html>
<html>
  <head>
    <title>EJS compilation demo</title>
    <style></style>
  </head>
  <body>
    <% function userView(user, i) { %>
    <tr>
      <td><%= i %></td>
      <td><%= user.name %></td>
      <td><%= user.age %></td>
      <td><%= user.species %></td>
    </tr>
    <% } %>
    <table border="1">
      <tr>
        <td>#</td>
        <td>Name</td>
        <td>Age</td>
        <td>Species</td>
      </tr>
      <% users.map(userView) %>
    </table>
  </body>
</html>

Код, який виводить таблицю у нас наступний

<table border="1">
  <tr>
    <td>#</td>
    <td>Name</td>
    <td>Age</td>
    <td>Species</td>
  </tr>
  <% users.map(userView) %>
</table>

Тут досить просто, ми створюємо таблицю її шапку, а ось за виведення рядків таблиці відповідає мапінг масиву users, який ми прокинули у шаблон. Функція map приймає функцію userView, яку ми описали трохи вище. В принципі, це звичайний JavaScript, і ми бачимо, що EJS легко дозволяє нам комбінувати його зі своїми тегами.

ejs example

Шаблонізація широко використовувалася до появи сучасних фронтенд фреймворків на кшталт React, Angular тощо. Але вона досі залишається потужним засобом серверного рендерингу.

MVC та шаблонізація​

EJS шаблони​

Приклад​

MVC та шаблонізація

EJS шаблони

Приклад