Template engines onderzoek - Hoa0/project-tech GitHub Wiki

Template engine (pug, ejs, handlebars)

Pug:

Pug is een Template engine voor, express node.js en voor de browser. Voorheen was dit Jade. Het zorgt voor nette opmaak, is witruimte gevoelig en het wordt gecompileerd naar HTML. Pug heeft een simpel syntax, waardoor je productiever kan werken. In pug hoeven de tags niet worden afgesloten, dit wordt gedaan wanneer de volgende tag aanwezig is op hetzelfde of buitenste inspringniveau, wordt de tag voor ons gesloten.

Voordelen:

  • Herbruikbare HTML coderen
  • Gegevens uit database of API weergeven
  • Leesbare code
  • functie als: filters, include, overerving, interpolatie etc.

Nadelen:

  • Veel dependency zijn niet meer up-to-date.

Voorbeeld PUG syntax:

doctype html
html(lang='en')
 head
   title Hello, World!
 body
   h1 Hello, World!
   div.remark
     p Pug rocks!

//bron: https://www.sitepoint.com/a-beginners-guide-to-pug/

Bronnen: (Tutorialspoint, 2021), (Tmont, 2021), (James Hibbard, 2019).

EJS

EJS is een eenvoudige templating engine waarmee je HTML-syntax kunt generen met JavaScript. Je hoeft hiervoor geen aandacht besteden bij het uitzoeken van nieuwe syntax. Ejs ondersteunt de filterfunctie, heeft een gebruiksvriendelijke API voor het manipuleren van gegevens zonder JS te schrijven.

Voordelen

  • Ejs slaat de tussenliggende JS-functies op in het cachegeheugen voor snelle uitvoering.
  • gemakkelijk EJS fouten te debuggen.
  • EJS wordt nog steeds vaak gebruikt en is nog actief met ontwikkeling.
  • simpele template tags: <% %>
  • sub template includes
  • Ejs ondersteund JavaScript en browser, filter optie etc,

Voorbeeld EJS syntax:

<h3><%= titleSearch %></h3>
 <%- include('layout/resultChef'); -%>

Bronnen: (EJS, 2021), (Mde, 2010).

Handlebars

Handlebars is een uitbreiding van Mustache template, die vooral gericht is op eenvoudige en minimale templating. Je kan HTML of andere tekstformaten ermee generen. Handlebars ziet eruit als gewone teksten met ingesloten handlebars syntax (dubbele accolades).

Voordelen (NPM, 2021, 5 februari).:

  • handige file systeem I/O en template engine.
  • Mogelijkheid om eenvoudig templates en delen voor te compileren voor gebruik op de client, waardoor het delen en hergebruik van sjablonen mogelijk wordt.
  • Mogelijkheid om een andere Handlebars-module / implementatie te gebruiken dan het Handlebars npm-pakket.

Voorbeeld handlebars syntax:

Hi, my name is:{{this.name}}.

Bronnen: (Handlebars , 2020), (Janith Kasun, 2021),( NPM, 2021).

Template engine voorkeur: EJS

Voor dit project heb ik ervoor gekozen om met de template engine EJS aan de gang te gaan. Omdat EJS de functie filter ondersteund en het schrijven van codes ziet er gemakkelijk uit. Vergeleken met PUG, waarbij veel gebruik wordt gemaakt van witruimtes. Dit kan voor mij nogal verwarring opleveren en de meeste packages van pug zijn niet meer up-to-date. Beide van deze template heb ik even mee geoefend en heb ik gelijk de keuzen gemaakt om in EJS, de applicatie feature verder in te bouwen. Voor de template Handlebars heb ik alleen wat informatie gezocht en zelf nog niet uitgeprobeerd, dit zou eventueel ook een goed alternatief zijn. Omdat de meeste packages nog up-to-date zijn, ondersteund ook de filterfunctie en is snel met compileren van templates.

Bronnen:

Tutorialspoint (2021). ExpressJS – Templating. Geraadpleegd van, https://www.tutorialspoint.com/expressjs/expressjs_templating.htm

Tmont (2021). Pug. Geraadpleegd van, https://github.com/pugjs/pug

James Hibbard (2019, 16 mei). A beginner’s guide to pug. Geraadpleegd van, https://www.sitepoint.com/a-beginners-guide-to-pug/

EJS (2021). Embedded JavaScript templates. Geraadpleegd van, https://ejs.co

Mde (2010). EJS. Geraadpleegd van, https://github.com/tj/ejs

Handlebars (2020, 24 mei). What is Handlebars. Geraadpleegd van, https://handlebarsjs.com/guide/#what-is-handlebars

Janith Kasun (2021). Guide to Handlebars: templating engine for node/javascript. geraadpleegd van, https://stackabuse.com/guide-to-handlebars-templating-engine-for-node/

NPM (2021, 5 februari). Express-handlebars. Geraadpleegd van, https://www.npmjs.com/package/express-handlebars

⚠️ **GitHub.com Fallback** ⚠️