Templating Engines - svennijhuis/Blok-tech GitHub Wiki

Ik heb onderzoek gedaan naar Templating Engines. Ik heb hier een keuze gemaakt uit drie popualaire van Node.JS. Deze drie zijn Handlebars, ejs en Mustache.

Ik ga ze vergelijken met voordelen en nadelen. Daarnaast moet ik ook rekening houden welke goed word ondersteund door de community van Node.JS. Ook speelt de kennis van de docent en student assistenten een rol.

Handlebars is een veel gebruikte template engine. Deze Templating Engine is te downloaden via een script of via npm. Als je Handelbars hebt gedownload kan je een hele structuur bouwen. Zo kan je het organiseren dat stukjes code die vaker terug komen niet steeds opnieuw getyped hoeft te worden. Je kan de code inladen met Handlebars.

	{{#each users}}
			<article class="grid-container-1">
				<div class="grid-3">
					<h3 class="start-end-grid">Wanneer beschikbaar:</h3>
					<p><strong>Maandag:</strong> <span class="{{this.monday}}">{{this.monday}}</span></p>
					<p><strong>Dinsdag:</strong> <span class="{{this.tuesday}}">{{this.tuesday}}</span></p>
					<p><strong>Woensdag:</strong> <span class="{{this.wednesday}}">{{this.wednesday}}</span></p>
					<p><strong>Donderdag:</strong> <span class="{{this.thursday}}">{{this.thursday}}</span></p>
					<p><strong>Vrijdag:</strong> <span class="{{this.friday}}">{{this.friday}}</span></p>
					<p><strong>Zaterdag:</strong> <span class="{{this.saturday}}">{{this.saturday}}</span></p>
					<p><strong>Zondag:</strong> <span class="{{this.sunday}}">{{this.sunday}}</span></p>
				</div>
				<div class="grid-4">
					<a class="button-algemeen" href="mailto:{{this.mail}}"><img class="img-icons" src="/img/mail.svg" alt="mail"></a>
					<div class="button-algemeen">
						<form action="/deleteUser"  method='POST'>
						    <input name="button" type="hidden" value="{{this.name}}" />
							<button type="submit" class="button-form-delete"><img class="img-icons" src="/img/delete.svg" alt="delete"></button>
						</form>
					</div>
				</div>
			</article>
	{{/each}}

Je ziet in deze code een loop en data die word ingeladen via Handlebars uit de database

• Veel informatie is te vinden op internet.
• Downloaden via NPM
• Leraar heeft de kennis.
• Het houdt de template netjes.
• Je kan code inladen.

• Weinig informatie te vinden over loops.
• Heeft weinig weg van JavaScript.

$ npm i express-handlebars

EJS is een Templating Engine die het dicht in de buurt komt van JavaScript. Daarom is EJS ook handig als je HTML en Javascript veel combineert.

• Het lijkt op JavaScript dus het is ook leerzaam.
• Het is makkelijk te leren als je al bekend bent met JavaScript.

• Het is lastig te lezen en te begrijpen.
• De school CMD adviseerde het niet.
• Je kan niet code hergebruiken.

$ npm i ejs

Mustache lijk erg op de Handlebars en is zeer populair want heeft een wekelijkse download van 2.159.075 per week. De Mustache package is te gebruiken bij Node.js, and CouchDB view. Je kan via deze package externe data ophalen uit de database. Daarnaast kan je ook templating gebruiken bij deze package. Hiermee bedoel ik te zeggen dat je code kan hergebruiken.

Voorbeeld:

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("{{title}} spends {{calc}}", view);

• Beschrijving hoe het werkt is heel duidelijk
• je kan een loop maken en data ophalen.

• Kleine community want er is minder informatie over te vinden als de andere.
• De laatste update is al een jaar geleden.

$ npm i mustache

Ik heb er voor gekozen om verder te gaan met Handlebars. Dit heeft eigenlijk simpele redenen. Er zijn veel artikelen te vinden over de Templating Engines. Daarnaast adviseert school om hier mee verder te werken. Dit was uiteindelijk ook mijn grootste reden. Ze kunnen mij zo sneller helpen namelijk als ik een probleem heb.