-
Notifications
You must be signed in to change notification settings - Fork 0
.templating
Een template engine is een hulpmiddel dat helpt bij het genereren van dynamische inhoud voor websites of apps. Het scheidt het ontwerp van de data, waardoor developers herbruikbare templates kunnen aanroepen in de code door gebruik van placeholders. Tijdens de werking van de template engine worden de placeholders vervangen door de daadwerkelijke data, met als resultaat een volledig gegenereerde HTML output. Dit gebeurt allemaal achter de schermen en is niet zichtbaar voor gebruikers.
Het voordeel van template engines is dat ze een manier bieden om op een gestructureerde manier data gedreven informatie te organiseren en weer te geven, waardoor het gemakkelijker wordt om consistente webapplicaties te bouwen. Je hoeft bijvoorbeeld niet voor elke pagina een head te schrijven in je HTML als je hier een template voor hebt geschreven. Ze stroomlijnen het proces van het genereren van HTML, verminderen code duplicatie en maken het algehele development proces efficiënter.
Handlebars is een templating engine voor JavaScript waarmee developers dynamisch HTML bestanden kunnen genereren. De placeholders van handlebars worden aangegeven met {{}} en met het gebruik hiervan kan je code aanroepen waardoor je deze niet meer handmatig hoeft te schrijven op elke pagina.
Voorbeeld:
Wat wordt geschreven:
<p>{{firstname}} {{lastname}}</p>Wat wordt geladen:
{
firstname: "Matthew",
lastname: "Tangkilissan",
}Uitkomst
<p>Matthew Tangkilissan</p>Voordelen:
- Partials en Helpers: Handlebars biedt ingebouwde ondersteuning voor partials, wat herbruikbare template-onderdelen zijn.
- Compatibiliteit met Browsers en Servers: Handlebars kan zowel aan de client-side in webbrowsers als aan de server-side met behulp van Node.js worden gebruikt.
EJS is een andere templating engine voor JavaScript waarmee developers dus dynamisch HTML bestanden kunnen genereren. De placeholders van EJS zijn <% %>.
Wat wordt geladen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/index.css" rel="stylesheet" />
<title>Fastpass</title>
</head>
</html>
Wat wordt geschreven:
<%- include('partials/head') %>
<body>
<main>Voordelen van EJS zijn:
- Eenvoudige integratie: EJS werkt naadloos samen met bestaande JavaScript-projecten, waardoor het gemakkelijk kan worden gebruikt in zowel server-side als client-side code en applicaties.
- Vertrouwde syntax: EJS maakt gebruik van vertrouwde JavaScript-syntax, waardoor het intuïtief aanvoelt voor developers die al bekend zijn met JavaScript-programmering.
- Extensions: EJS kan worden uitgebreid met aangepaste functies en filters, waardoor flexibiliteit wordt geboden om de templating engine aan te passen aan de hand van specifieke projectbehoeften.
Zowel EJS als Handlebars zijn allebei goede keuzes voor een template engine. Toch heb ik er uiteindelijk voor gekozen om gebruik te maken van EJS. Dit kwam op aanraden van leraren en leerlingen die allemaal EJS gebruikten. Om het makkelijker maken bij te blijven met anderen was het handiger om daarom ook EJS te gebruiken. Dit doet niks af aan de eerdergenoemde voordelen van EJS en ik vond het ook makkelijker in gebruik vanwege de JavaScript syntax.
Wiki for Blok Tech | Matthew Tangkilissan | 500820664 | klas 203 |