# Template engines, server-side rendering, EJS

A template engine (sablon motor) egy olyan eszköz a HTML-el foglalkozó frontend/full stack fejlesztők részére, amivel még a HTML tényleges betöltődése előtt a sajátos szintaxisát használva dinamikusan változó adatokat és funkcionalitásokat szúrhatunk be a View-be. Számos sablon rendszer közül válogathatunk, személy szerint az `EJS` használatát javasoljuk az egyszerű használhatóságából kiindulva. Az EJS a Embedded Javascript (beépített JavaScript) szavak rövidítéséből összeálló kifejezés. A szintaxisa tulajdonképpen egy egszererűsített leíró nyelvként funkcionál amely lehetővé teszi a fejlesztők számára, hogy HTML sablont generáljon pusztán némi sornyi JavaScript kód deklarálásával [13]. Az EJS előnye leginkább akkor mutatkozik meg, amikor a HTML-hez alapból sok-sok funkcionalitást kell implementálni JavaScriptben továbbá még akkor, amikor valós időben változó adatokat kell megjelenítetünk a felhasználói felületen. A JavaScripten keretrendszereken kívül CSS keretrendszereket ie könnyedén integrálhatunk vele (BootStrap), A fájlokat egymásba ágyazhatjuk ezáltal a különböző nézeteket (View) akár egyetlen lapra is össze tudjuk sűríteni. Az első használat előtt telepítsük az npm segítségével az általunk kiválasztott helyre.

Az Express alapártelmezésképpen a Jade template engine-t használja, ezért nekünk még külön be kell állítani, hogy az EJS-t használhassuk:

app.set("view engine","ejs"); 

Az .ejs kiterjesztésű fájlokhoz hozzunk létre egy views elnevezésű könyvtárat (ahol a projektünk elhelyezkedik), ahova a sablonokat fogjuk elhelyezni. Amennyiben más elnevezésű mappában szeretnénk az .ejs kiterjesztésű fájlokat, akkor az alábbi sort kell hozzáadnunk a kódunkhoz:

app.set("views","./ide_mentjük_az_ejs_fajlokat");

Amint egyre több .ejs kiterjesztésű fájl gyűlik össze, egyre körülményesebb lesz a kívánt elemeket megkeresni. Az EJS megadja azt a lehetőséget, hogy mappákba csoportosítsuk az egybetartozónak vélt fájlokat. A lenti példában megmutatjuk, hogy miképp tudjuk beimportálni ezen fájlokat.

server.js
package.json
package-lock.json
> node_modules
> views
      |_ valami.ejs

server.js
package.json
package-lock.json
> node_modules
> views
      |_ valami.ejs
				    |_ Csoport
							  |_ fejlec.ejs
							  |_ lablec.ejs 

//  valami.ejs

  //  lablec.ejs importálása
<%include Csoport/fejlec%>
  //  lablec.ejs importálása
<%include Csoport/lablec%>

Szintaxisa szerint <%attributum kod %> tag-be foglaljuk a JavaScript kódunkat. Az attributum paraméterrel határozzuk meg, hogy mit szeretnénk definiálni, a kod paraméter pedig a tényleges kódnak a deklarációját várja. Ha egy kód több sorból áll, akkor minden egyes sort <%attributum kod %>-ba kell deklarálni, ahol a kod értelemszerűen a teljes kódunk egyik sora. Néhány példán keresztül bemutatjuk a legfontosabb <>-eket, amivel dinamikusan változó adatokat szúrhatunk be HTML fájlokba az EJS szintaktikájával.

<% %>: Ebbe beleírhatunk olyan JavaScript kódokat, melyek visszatérnek valamiyen értékekkel. Ez a kód lehet bármilyen vezérlési szerkezet, feltétel, importálás, stb. (kivéve a változó deklarációt). A lenti példában egy for ciklust deklaráltunk, ami 5x kiírja azt, hogy `Ezzel a példával ötször kiírjuk ezt a szöveget!.

<ul>
	<%= for(var i=0; i<5; i++){%>
		<li>Ezzel a példával ötször kiírjuk ezt a szöveget!</li>
	<% } %>
</ul>

<%= %>: Ebbe definiálhatjuk a változó deklarációkat, melyek visszatérnek valamilyen értékkel.

<%= cim%>

<%# %>: Ezzel jegyezhetünk le magunknak kommenteket

<%# ez egy komment lenne%>