Utilizați șabloane cu ghidon în Express.js

Utilizarea șabloanelor a devenit o necesitate în lumea aplicațiilor web, asta pentru că ne ajută să separăm logica de programare de prezentarea sa. Toată această separare și creșterea recepției acestui stil de dezvoltare au dus la apariția unui număr mare de cadre pe piață care ne ajută să purtăm responsabilitatea gestionării șabloanelor.
În cazul în care Expres, acesta vine nativ cu un motor de modelare numit JadCu toate acestea, mulți dezvoltatori vin deja cu un background în alții și nu ar fi corect să se adapteze din nou la un nou motor, acest lucru nu este rău, dar nu este pe gustul tuturor.
Din această cauză Expres ne permite să configurăm cadrul astfel încât să putem lucra cu diferite motoare de șabloane, cum ar fi Ghidon care este o extensie a Moustache.js și este un motor de modelare foarte popular, deoarece se bazează pe JavaScript și îl putem folosi atât pe partea de server, cât și pe client.
CerințePentru a respecta unele dintre exemplele prezentate aici, trebuie să avem instalat și accesat Node.js, și au instalat anterior Expres. Un editor de text și o aplicație Expres sunt de dorit astfel încât să poată încorpora conceptele explicate în tutorial.
Dezavantaje de a nu utiliza un motor de șabloaneNeutilizarea unui motor de șabloane implică o serie de dezavantaje care pot afecta viteza de dezvoltare a aplicației noastre, vom enumera aceste dezavantaje astfel încât, atunci când credem că nu avem nevoie de motorul de șabloane, vom vedea contrariul.
Riscul de a crea HTML malformat este mult mai mare, astfel încât obținerea certificărilor pentru codul nostru poate fi dificilă.
Codul rezultat poate fi dificil de documentat și partajat cu alți dezvoltatori.
Dacă folosim cod pentru a genera HTML, va fi întotdeauna incomod să lucrăm cu caractere speciale.
Există tendința de a nu separa logica aplicației de prezentare.
După cum putem vedea, există multe dezavantaje care, deși nu sunt grave și nu determină aplicația noastră să nu funcționeze dacă reduce posibilitatea de a fi mai productivi.
Avantajele utilizării unui motor de șabloaneAcum să vedem ce vom câștiga prin implementarea de soluții precum Handlebars în aplicațiile noastre cu Express:
Codul rezultat este mai organizat și ni se garantează că nu va exista HTML greșit.
Ne putem separa echipa în două, funcționând interfețe utilizator fără a fi nevoie să ne dezvoltăm în Back-End.
Motoarele de șabloane ne permit să refolosim secțiuni de cod, ajutând astfel la menținerea proiectului nostru optimizat.
Există multe utilitare care ne ajută să oferim o interacțiune mai bună cu partea vizuală a aplicațiilor noastre.
Modul în care vedem ce ne oferă motoarele șablon este să putem separa, optimiza și organiza codul nostru, acest lucru aduce drept consecință directă îmbunătățirea eficacității, eficienței și productivității generale în echipa noastră de dezvoltare.
La începutul tutorialului am menționat că Jad era motorul implicit, deci de ce căutăm alt motor? Răspunsul este foarte simplu, modul în care funcționează Jad încearcă să scadă cantitatea de HTML scriem, acest lucru poate fi un pic confuz, deoarece trebuie să învățăm practic o nouă formă de limbaj pentru a noastră În față.
În imaginea următoare vom vedea un cod șablon al Jad deci putem vedea un exemplu al sintaxei sale:

Putem observa că diferența cu codul HTML Standardul este abisal și, deși codul este mai mic, cantitatea de gândire implicată este puțin mai mare.
Ghidon este o altă poveste decât Jad, modul său de lucru este similar cu alte motoare precum Jinja2 sau Înghiţitură, deoarece ne permite să scriem etichete HTML și apoi în interior cu propriul nostru cod de motor putem defini ce imprimă din context și modul în care îl face.
De exemplu, dacă știm că vom imprima ceva ce a scris un utilizator, putem scăpa automat de caracterele speciale și astfel putem evita injectarea de cod, dar dacă știm că este propriul nostru cod, îl putem exprima către Ghidon asta nu scapă textului.
Server sau ClientUn alt aspect al Ghidon este că poate funcționa în două moduri, din partea serverului sau din partea clientului. Această versatilitate înseamnă că putem decide mai bine cum dorim să ne realizăm aplicațiile, deoarece dacă este SPA o Aplicație cu o singură pagină, poate abordarea din partea clientului este mai simplă și mai utilă, dar dacă dorim un site web, poate că este mai util să generezi totul pe server.
Pentru instalare Ghidon pe partea de server este foarte ușor, trebuie doar să îl folosim npm în consola noastră și astfel vom obține pachetele necesare, să vedem ce trebuie să scriem:

 npm install - save express-handlebars

Cu ce npm Va descărca toate componentele necesare, astfel încât să putem încorpora acest motor în proiectul nostru, în cele din urmă ar trebui să obținem un rezultat similar cu următorul în consola noastră:

Apoi, în fișierul nostru, unde începem aplicația Expres Trebuie să-i spunem să folosească acest lucru ca motor de șabloane, pentru aceasta trebuie pur și simplu să scriem următorul cod:

 var ghidon = require ('expres-ghidon') .create ({defaultLayout: 'principal'}); app.engine ('ghidon', ghidon.engine); app.set ('vizualizare motor', 'ghidon');

Ceea ce ar rămâne în fișierul nostru ar fi următoarele:

Sintaxa de bază a ghidonelorGhidon Are propria sintaxă foarte curată, care ne permite să încorporăm un pic de logică de vizualizare în șablon, putem încorpora comentarii, itera pe liste și blocuri, să scăpăm sau nu secțiuni de text. De aceea, este important să cunoaștem cele mai elementare, astfel încât să ne putem exprima ideile mai confortabil și astfel să obținem maximum de avantaj, să vedem mai jos cele mai elementare ale motorului.
Ca rezultat, viziunea noastră generează date pe care trebuie să le arătăm utilizatorului, le transmitem aceste date prin context șablonului nostru și aici le imprimăm. Pentru a imprima acest lucru, trebuie pur și simplu să închidem variabila sau elementul în paranteze duble, cum ar fi următoarele:

 {{Nume}}

Aceasta ne conduce la a vedea conținutul "Nume" pe care le-am definit în opinia noastră, aceste acolade duble curate scapă automat de caractere, în așa fel încât să nu conducă la tipărirea codului care nu este permis în mod implicit de dezvoltator.
Acum, dacă vrem să tipărim un text fără a scăpa, trebuie să folosim acolade triple, spune acest lucru Ghidon că nu trebuie să scape nimic, să vedem exemplul:

 {{{Nume}}}

Aceasta dacă ne permite să imprimăm cod HTML, caractere speciale și chiar JavaScript fără intervenția motorului nostru.
comentarii în șablon sunt vitale, deoarece ne permit să identificăm secțiuni, să adăugăm informații importante și să documentăm aplicația noastră. Dacă punem un comentariu direct HTML în formă: acest lucru ajunge să fie vizibil pentru oricine inspectează codul paginii noastre, așa că ne limitează în ceea ce putem lăsa documentat.
Dar dacă folosim comentarii în Ghidon, le putem vedea oricând în codul sursă, dar motorul atunci când generează ceea ce vede utilizatorul îl omite și atunci când inspectăm codul web sau al aplicației nu vom vedea nimic. Pentru a scrie un comentariu la Ghidon trebuie să facem următoarele:

 {{! comentariul nostru}}

Acest lucru înseamnă că conținutul comentariului nu este generat niciodată în rezultatul vizibil utilizatorilor noștri, ceea ce face ceea ce scriem un secret pentru cei care se află în afara echipei noastre de dezvoltare.
Ceva pe care nu trebuie să-l uităm este că nu trebuie să ne limităm la ceea ce este în mainstream, există multe opțiuni care pot fi mai bune pentru stilul de dezvoltare al fiecărei persoane, motiv pentru care este vital să faci cercetări și să nu te temi să încerci lucruri noi.
Cu aceasta am terminat acest tutorial, am avut o introducere mică, dar destul de îmbogățitoare a ceea ce înseamnă utilizarea șabloanelor și cum să încorporăm un nou motor în Expres.
da OK Ghidon este mult mai extins, dar cu aceste concepte cheie și aplicația noastră Expres vom putea realiza lucruri foarte interesante într-un timp scurt.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv