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.
> npm install --save express
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%>
Irodalomjegyzék
[1] | Vue.js core team. Vue.js: The Progressive JavaScript Framework. https://vuejs.org, Legutóbb megtekintve: 2019. április 22. |
[2] | Vue.js core team. API, Global Config, directive. https://vuex.vuejs.org/vuex.png, Legutóbb megtekintve: 2019. április 22. |
[3] | Vue.js core team. API, Global Config, computed. https://vuejs.org/v2/api/#computed, Legutóbb megtekintve: 2019. április 22. |
[4] | Vue.js core team. API, Global Config, components. https://vuejs.org/v2/api/#components, Legutóbb megtekintve: 2019. április 22. |
[5] | Vue.js core team. Vue-CLI. https://cli.vuejs.org/guide/creating-a-project.html#vue-create, Legutóbb megtekintve: 2019. április 22. |
[6] | Vue.js core team. Vue-router. https://router.vuejs.org/guide/#html, Legutóbb megtekintve: 2019. április 22. |
[7] | Vue.js core team. Render Functions and JSX. https://vuejs.org/v2/guide/render-function.html, Legutóbb megtekintve: 2019. április 22. |
[8] | w3schools core team. JavaScript RegExp Reference. https://www.w3schools.com/jsref/jsref_obj_regexp.asp, Legutóbb megtekintve: 2019. április 22. |
[9] | Google Chrome DevTools core team. Chrome DevTools. https://developers.google.com/web/tools/chrome-devtools, Legutóbb megtekintve: 2019. április 22. |
[10] | Node.js core team. Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. https://nodejs.org/en/, Legutóbb megtekintve: 2019. április 22. |
[11] | NPMJS core team. NPMJS. https://www.npmjs.com, Legutóbb megtekintve: 2019. április 22. |
[12] | ExpressJS core team. Express Fast, unopinionated, minimalist web framework for Node.js. https://expressjs.com, Legutóbb megtekintve: 2019. április 22. |
[13] | EJS core team. EJS: Embedded JavaScript templating. https://ejs.co, Legutóbb megtekintve: 2019. április 22. |
[14] | Olga Filipova. Learning Vue.js 2. Packt Publishing Ltd., Livery Place, 35 Livery Street, Birmingham, B3 2PB, UK, 3, 2016. |
[15] | E.F. Codd. A relational Model of Data for Large Shared Data Banks. Communications of the ACM, 13 (6) 1970. |
[16] | Papp Edit. Adatbáziskezelés. Booklands 2000 Könyvkiadó Kft., 5600 Békéscsaba, Dr. Becsey Oszkár u. 42., 1, 2004. |
[17] | Nemzeti Szakképzési és Felnőttképzési hivatal. Szoftverfejlesztő tanfolyam. https://www.nive.hu, Legutóbb megtekintve: 2019. április 22. |
[18] | JavaScript.info core team. JavaScript.info. https://javascript.info/promise-basics, Legutóbb megtekintve: 2019. április 22. |
[19] | Craig Buckler. Sitepoint (JavaScript) - Understanding ES6 Modules. https://www.sitepoint.com/understanding-es6-modules/, Legutóbb megtekintve: 2019. április 22. |