Hogyan használj sablonkezelőket, mint az EJS vagy a Pug Express.js-ben?

Üdv a webfejlesztés izgalmas világában! Ha valaha is építettél már Express.js alkalmazást, valószínűleg találkoztál azzal a kihívással, hogy hogyan jelenítsd meg a szerveroldalon generált dinamikus adatokat a felhasználók számára egy esztétikus és funkcionális weboldalon. Itt jönnek képbe a sablonkezelők (template engines), amelyek hidat képeznek a backend logika és a frontend megjelenítés között. Ebben az átfogó cikkben részletesen bemutatjuk, hogyan használhatod a két legnépszerűbb sablonkezelőt, az EJS-t (Embedded JavaScript) és a Pug-ot (korábbi nevén Jade) Express.js keretrendszerben.

Akár kezdő, akár tapasztalt fejlesztő vagy, ez az útmutató segít megérteni a sablonkezelők működését, telepítését és gyakorlati alkalmazását, tele példákkal és legjobb gyakorlatokkal. Készülj fel, hogy új szintre emeld Express.js projektjeidet!

Miért van szükség sablonkezelőkre az Express.js-ben?

Az Express.js egy minimális és rugalmas Node.js webalkalmazás-keretrendszer, amely robusztus funkciókészletet biztosít a webes és mobil alkalmazások fejlesztéséhez. Bár kiválóan alkalmas API-k építésére, önmagában nem nyújt beépített megoldást a HTML oldalak generálására. Itt lépnek színre a sablonkezelők.

Képzeld el, hogy van egy weboldalad, amely felhasználói profilokat jelenít meg. Minden felhasználóhoz egyedi név, kép és egyéb adatok tartoznak. Készíthetnél egy külön HTML fájlt minden felhasználónak, de ez irreális és karbantarthatatlan lenne. A sablonkezelők lehetővé teszik, hogy egyetlen HTML vázlatot (sablont) hozz létre, és ebbe a vázlatba injektáld a szerveroldalon feldolgozott dinamikus adatokat. Ennek fő előnyei:

Szétválasztás: Segít elkülöníteni az alkalmazás logikáját (backend) a felhasználói felület megjelenítésétől (frontend). Ez tisztább, szervezettebb kódot eredményez, ami könnyebben karbantartható és fejleszthető.
Újrahasználhatóság: Lehetővé teszi a közös UI elemek (pl. fejlécek, láblécek, navigációs sávok) újrafelhasználását az összes oldalon, elkerülve a kódszaporulatot.
Dinamikus tartalom: Képessé tesz téged arra, hogy dinamikusan generálj HTML-t a szerveroldalon, a kéréseknek vagy adatbázisoknak megfelelően.
Hatékonyság: Csökkenti a fejlesztési időt és a hibák számát azáltal, hogy automatizálja az ismétlődő HTML kódok generálását.

Az Express.js előkészítése sablonkezelőkhöz

Mielőtt belevetnénk magunkat az EJS és Pug részleteibe, nézzük meg, hogyan konfigurálhatjuk az Express.js alkalmazásunkat a sablonkezelők használatára. Ez a folyamat mindkét motor esetében hasonló.

1. Express.js projekt inicializálása

Ha még nincs Express.js projekted, hozd létre a következőkkel:


mkdir my-express-app
cd my-express-app
npm init -y
npm install express

2. A fő alkalmazásfájl (app.js vagy index.js) beállítása

Hozd létre az app.js fájlt a gyökérkönyvtárban. A sablonkezelő beállításához két kulcsfontosságú sorra lesz szükséged:

app.set('views', path.join(__dirname, 'views'));: Ez mondja meg az Expressnek, hol találja a sablonfájljaidat. A views mappa az ipari szabvány.
app.set('view engine', 'név');: Ez mondja meg az Expressnek, melyik sablonkezelőt használja. A név helyére az EJS vagy Pug nevét írjuk.

Íme egy alapvető Express.js struktúra:


const express = require('express');
const path = require('path'); // Szükséges a 'views' útvonalához
const app = express();
const port = 3000;

// Statikus fájlok kiszolgálása (CSS, JS, képek)
app.use(express.static(path.join(__dirname, 'public')));

// Sablonok mappájának beállítása
app.set('views', path.join(__dirname, 'views'));

// Itt fogjuk beállítani a sablonkezelőt, pl. 'ejs' vagy 'pug'
// app.set('view engine', 'ejs');
// app.set('view engine', 'pug');

// Példa útvonal
app.get('/', (req, res) => {
    // res.render() fogja használni a beállított sablonkezelőt
    // pl. res.render('index', { title: 'Kezdőlap' });
    res.send('A sablonkezelő még nincs beállítva. Olvasd tovább!');
});

app.listen(port, () => {
    console.log(`A szerver fut a http://localhost:${port} címen`);
});

Most, hogy az alapok megvannak, merüljünk el az egyes sablonkezelőkben!

EJS (Embedded JavaScript) – Egyszerű és Hatékony

Az EJS az egyik legnépszerűbb sablonkezelő az Express.js ökoszisztémában. A „Beágyazott JavaScript” nevet viseli, mert lehetővé teszi a JavaScript kódok közvetlen beágyazását a HTML szerkezetbe. Ez rendkívül egyszerűvé teszi a tanulását azok számára, akik már ismerik a HTML-t és a JavaScriptet.

Telepítés és beállítás

Először is telepítened kell az EJS csomagot:


npm install ejs

Ezután frissítsd az app.js fájlodat a sablonmotor beállításához:


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

Az EJS alapvető szintaxisa

Az EJS a speciális tag-eket használja a JavaScript kódok és változók beágyazásához:

<% code %>: JavaScript kódblokk, amely fut, de nem ad ki semmilyen kimenetet. Ideális vezérlési szerkezetekhez (if, for).
<%= data %>: Kimeneti tag. Kiírja a változó értékét a sablonba, és automatikusan escape-eli a HTML speciális karaktereket, ezzel megelőzve az XSS (Cross-Site Scripting) támadásokat. Ez az alapértelmezett és biztonságos módja a változók megjelenítésének.
<%- data %>: Unescaped kimeneti tag. Kiírja a változó értékét a sablonba anélkül, hogy escape-elné a HTML karaktereket. Csak akkor használd, ha teljesen megbízol az adatokban, különben súlyos biztonsági kockázatot jelent!
<%# comment %>: Megjegyzés tag. A benne lévő tartalom nem kerül feldolgozásra és nem jelenik meg a kimenetben.
<% include filename %>: Másik EJS fájl beillesztése.

EJS példa Express.js-szel

Hozzuk létre a views mappában egy index.ejs fájlt:


<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1><%= message %></h1>

    <% if (userLoggedIn) { %>
        <p>Üdvözlünk, <%= userName %>!</p>
        <ul>
            <% for (const item of items) { %>
                <li><%= item %></li>
            <% } %>
        </ul>
    <% } else { %>
        <p>Kérjük, jelentkezz be a további tartalom megtekintéséhez.</p>
        <a href="/login">Bejelentkezés</a>
    <% } %>

    <%- include('partials/footer') %> <!-- footer beillesztése -->
</body>
</html>

Hozzuk létre a views/partials mappában egy footer.ejs fájlt:


<!-- views/partials/footer.ejs -->
<footer>
    <p>&copy; <%= new Date().getFullYear() %> EJS Demó. Minden jog fenntartva.</p>
</footer>

És a megfelelő Express.js útvonal az app.js fájlban:


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

app.get('/', (req, res) => {
    const user = {
        name: 'Anna',
        loggedIn: true,
        shoppingList: ['kenyér', 'tej', 'tojás']
    };

    res.render('index', {
        title: 'EJS Kezdőlap',
        message: 'Üdvözöljük az EJS demó oldalon!',
        userLoggedIn: user.loggedIn,
        userName: user.name,
        items: user.shoppingList
    });
});

Ne felejtsd el létrehozni a public/css/style.css fájlt is, ha használni szeretnéd a CSS-t.

EJS előnyei és hátrányai

Előnyök:

Egyszerűség: Nagyon hasonlít a hagyományos HTML-hez, minimális szintaxis tanulást igényel.
JavaScript: Mivel közvetlenül JavaScript kódot ágyaz be, a fejlesztők gyorsan adaptálhatják, ha ismerik a nyelvet.
Rugalmasság: Szinte bármilyen HTML struktúrába beilleszthető.
Közösség: Széles körű támogatás és dokumentáció áll rendelkezésre.

Hátrányok:

HTML-közelség: Bár előny lehet, néha a HTML és a JavaScript logika túlságosan összefonódhat, ami nehezebbé teheti a sablonok olvashatóságát és karbantartását összetettebb esetekben.
Túl sok logika: Könnyen el lehet esni abba a hibába, hogy túl sok üzleti logikát teszünk a sablonba.

Pug (korábbi nevén Jade) – Tömörség és Elegancia

A Pug (korábbi nevén Jade) egy olyan sablonkezelő, amely a tömörségre és a letisztult szintaxisra helyezi a hangsúlyt. Eltávolodik a hagyományos HTML-struktúrától, és whitespace-érzékeny behúzásokat használ az elemek hierarchiájának meghatározására, hasonlóan a Pythonhoz vagy a YAML-hez.

Telepítés és beállítás

Először is telepítened kell a Pug csomagot:


npm install pug

Ezután frissítsd az app.js fájlodat a sablonmotor beállításához:


// ...
app.set('view engine', 'pug');
// ...

A Pug alapvető szintaxisa

A Pug szintaxisa elsőre szokatlan lehet, de rendkívül gyorsan megszokható és nagyon hatékony:

Tag-ek: Nincs szükség záró tag-ekre. Csak írd be a tag nevét: div, p, h1.
Id-k és class-ok: Használd a CSS szintaxisát: div#myId.myClass vagy egyszerűen #myId.myClass (a div az alapértelmezett).
Attributumok: Zárójelek között: a(href='/', title='Kezdőlap') Link.
Szöveg: Lehet a tag után, egy szóközzel elválasztva, vagy egy új sorban, behúzással, vagy | karakterrel:
```
p Ez egy bekezdés
p
    | Ez is egy bekezdés,
    | több sorban.
        
```
Változók: p= title (escaped), p!= unsafeHtml (unescaped – óvatosan!).
Vezérlési szerkezetek: Nincs szükség nyitó/záró kapcsos zárójelekre; a behúzás jelöli a kódblokkokat.
```
if userLoggedIn
    p Üdvözlünk, #{userName}!
else
    p Kérjük, jelentkezz be.
        
```

Ciklusok: each item in items


ul
    each item in items
        li= item

Mixins: Újrahasználható kódblokkok paraméterekkel:


mixin button(text, url)
    a.button(href=url)= text

+button('Katt ide', '/valahova')

Layout-ok (extend és block): A Pug egyik legerősebb funkciója a layoutok kezelése. Létrehozhatsz egy alap (base) sablont, amit a többi oldal kiterjeszt.


// layout.pug
doctype html
html(lang="hu")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title #{title} | Pug App
        link(rel="stylesheet", href="/css/style.css")
    body
        header
            h1 Üdv a Pug Appban!
        block content
        footer
            p © #{new Date().getFullYear()} Pug Demó.


// index.pug
extends layout.pug

block content
    h2= message
    if userLoggedIn
        p Üdvözlünk, #{userName}!
        ul
            each item in items
                li= item
    else
        p Kérjük, jelentkezz be a további tartalom megtekintéséhez.
        a(href="/login") Bejelentkezés

Pug példa Express.js-szel

Létrehozzuk a views mappában a layout.pug és index.pug fájlokat a fenti példák alapján.

A megfelelő Express.js útvonal az app.js fájlban:


// ...
app.set('view engine', 'pug');
// ...

app.get('/', (req, res) => {
    const user = {
        name: 'Péter',
        loggedIn: true,
        shoppingList: ['tea', 'kávé', 'cukor']
    };

    res.render('index', {
        title: 'Pug Kezdőlap',
        message: 'Üdvözöljük a Pug demó oldalon!',
        userLoggedIn: user.loggedIn,
        userName: user.name,
        items: user.shoppingList
    });
});

Pug előnyei és hátrányai

Előnyök:

Tömörség: Jelentősen kevesebb kódot igényel, mint a tiszta HTML vagy az EJS, ami gyorsabb fejlesztést eredményez.
Olvashatóság: A letisztult szintaxis és a behúzás alapú hierarchia miatt sokan rendkívül olvashatónak találják.
Layoutok és Mixinek: Kiválóan támogatja a kód újrafelhasználását és a DRY (Don’t Repeat Yourself) elvet a layoutok és mixinek segítségével.
Biztonság: Alapértelmezés szerint escape-eli a változókat, csökkentve az XSS kockázatát.

Hátrányok:

Tanulási görbe: Mivel eltér a hagyományos HTML-től, eleinte szokatlan lehet, és némi időt igényel a megszokása.
Whitespace-érzékenység: A behúzások és szóközök hibái szintaktikai hibákhoz vezethetnek, ami frusztráló lehet.
Hibakeresés: Néha nehezebb lehet debuggolni a Pug sablonokból generált HTML-t, mivel az eredeti forrás eltér a kimenetétől.

EJS vs. Pug: Melyiket válasszam?

A választás az EJS és a Pug között gyakran személyes preferenciától, a projekt jellegétől és a csapat tapasztalatától függ. Nincs „jobb” vagy „rosszabb”, csak „megfelelőbb” az adott szituációhoz.

Íme egy gyors összehasonlítás, ami segíthet a döntésben:

Jellemző	EJS (Embedded JavaScript)	Pug (korábbi nevén Jade)
Szintaxis	HTML-közeli, JavaScript beágyazásokkal	Tömör, whitespace-érzékeny, CSS-szerű selectorok
Tanulási görbe	Nagyon gyors, ha ismeri a HTML-t és JS-t	Közepes, eltér a hagyományos markup-tól
Kód tömörsége	Hasonló a tiszta HTML-hez	Jelentősen tömörebb, kevesebb kód
Layout kezelés	`<% include %>` direktívával megoldható, de nem annyira elegáns	Erős `extends` és `block` funkciók a layout-okhoz
Logika kezelése	Könnyű JS kód beágyazása, de vigyázni kell a túlzott logikával	Jól kezeli a vezérlési szerkezeteket, mixinek segítik az absztrakciót
Hibakeresés	Egyszerűbb, mivel a kimenet nagyon hasonlít a sablonhoz	Némileg bonyolultabb, mivel a Pug kimenete generált HTML
Közösségi támogatás	Kiváló	Kiváló

Válaszd az EJS-t, ha:

Gyorsan akarsz elindulni, és már ismered a HTML-t és a JavaScriptet.
A projekt résztvevői nem akarnak új szintaxist tanulni.
A sablonjaid viszonylag egyszerűek, és nincs szükséged komplex layout architektúrára.

Válaszd a Pug-ot, ha:

Értékeled a kód tömörségét és a letisztult szintaxist.
Komplexebb layout-okkal és komponensekkel dolgozol, ahol a mixinek és az extends/block funkciók nagy segítséget jelentenek.
Szeretsz kísérletezni új technológiákkal, és nem riadsz vissza egy új szintaxis megtanulásától.

Gyakorlati tanácsok és legjobb gyakorlatok

Bármelyik sablonkezelőt is választod, íme néhány legjobb gyakorlat, amely segíthet a tiszta, karbantartható és biztonságos kód írásában:

Tartsd külön a logikát és a megjelenítést: Ez a legfontosabb elv. A sablonoknak csak az adatok megjelenítéséért és a vezérlési szerkezetekért (if, for) kell felelniük. Az összetett üzleti logikát tartsd az Express.js útvonalain vagy a backend szolgáltatási rétegében.
Használj részleges sablonokat (partials): Ne ismételd magad! Bármelyik újrahasználható UI elem (pl. fejléc, lábléc, navigációs menü, termékkártya) kerülhet egy külön fájlba, amit aztán beilleszthetsz a fő sablonokba. Ez javítja a karbantarthatóságot.
Mindig escape-eld az adatokat: Mind az EJS (<%= data %>), mind a Pug (= data) alapértelmezés szerint escape-eli a változókat, ezzel védve az XSS támadásoktól. Csak akkor használd az unescaped kimenetet (EJS: <%- data %>, Pug: != data), ha teljesen biztos vagy benne, hogy az adatok megbízható forrásból származnak és nem tartalmaznak rosszindulatú kódot (pl. saját HTML).
Ellenőrizd az adatokat renderelés előtt: Mielőtt adatokat adnál át a sablonnak, ellenőrizd, hogy léteznek-e és a várt formátumban vannak-e. Ez elkerülheti a sablon futásidejű hibáit, ha például egy változó undefined.
Rendszerezd a sablonokat: Hozz létre egy logikus mappaszerkezetet a views könyvtáron belül, például views/layouts, views/partials, views/auth stb., hogy könnyebben megtaláld a fájlokat.
Használj verziókövetést: Mint minden kód esetében, a sablonfájlokat is kezeld verziókövető rendszerrel (pl. Git).

Konklúzió

A sablonkezelők elengedhetetlen eszközök a modern webfejlesztésben, különösen ha szerveroldalon generált, dinamikus tartalommal dolgozunk Express.js alkalmazásokban. Az EJS és a Pug egyaránt kiváló választás lehet, attól függően, hogy a HTML-közeli egyszerűséget vagy a tömör, strukturált szintaxist részesíted előnyben. Mindkét motor stabil, jól dokumentált és széles körben használt a fejlesztői közösségben.

Reméljük, hogy ez a részletes útmutató segített megérteni a sablonkezelők fontosságát, és magabiztossá tett az EJS vagy Pug használatában Express.js projektjeidben. Ne habozz kísérletezni velük, építs kisebb projekteket, és fedezd fel, melyik illik jobban a saját stílusodhoz és projektjeid igényeihez. A dinamikus weboldalak építése sosem volt még ilyen egyszerű és élvezetes!