Sjablonen gebruiken met Handlebars in Express.js

Het gebruik van sjablonen is een noodzaak geworden in de wereld van webapplicaties, dit omdat het ons helpt om de programmeerlogica te scheiden van de presentatie ervan. Al deze scheiding en de opkomst van de receptie van deze ontwikkelingsstijl hebben geleid tot het verschijnen van een groot aantal kaders in de markt die ons helpen de verantwoordelijkheid voor het beheer van sjablonen te dragen.
In het geval van nadrukkelijk, deze wordt standaard geleverd met een template-engine genaamd JadeVeel ontwikkelaars komen echter al met een achtergrond in anderen en het zou niet eerlijk zijn dat ze zich weer moeten aanpassen aan een nieuwe engine, dit is niet slecht maar het is niet naar ieders smaak.
Het is daarom nadrukkelijk stelt ons in staat om het raamwerk zo te configureren dat we met verschillende template-engines kunnen werken, zoals: Stuur dat is een extensie van Moustache.js en het is een erg populaire template engine omdat het gebaseerd is op: JavaScript en we kunnen het zowel aan de serverzijde als aan de client gebruiken.
VereistenOm te voldoen aan enkele van de voorbeelden die hier worden getoond, moeten we geïnstalleerd en toegang hebben tot: Node.js, en hebben eerder geïnstalleerd nadrukkelijk. Een teksteditor en een applicatie nadrukkelijk ze zijn wenselijk, zodat ze de concepten die in de tutorial worden uitgelegd, kunnen opnemen.
Nadelen van het niet gebruiken van een sjabloonengineHet niet gebruiken van een template-engine brengt een reeks nadelen met zich mee die de snelheid van onze applicatie-ontwikkeling kunnen beïnvloeden. We gaan deze nadelen op een rijtje zetten, zodat wanneer we denken dat we de template-engine niet nodig hebben, we het tegenovergestelde zullen zien.
Het risico van het maken van misvormde HTML is veel groter, dus het verkrijgen van certificeringen voor onze code kan moeilijk zijn.
De resulterende code kan moeilijk te documenteren en te delen zijn met andere ontwikkelaars.
Als we code gebruiken om HTML te genereren, zal het altijd ongemakkelijk zijn om met speciale tekens te werken.
Er is een tendens om applicatielogica niet te scheiden van presentatie.
Zoals we kunnen zien, zijn er veel nadelen die, hoewel ze niet ernstig zijn en er niet toe leiden dat onze applicatie niet werkt, als het de mogelijkheid om productiever te zijn verkleint.
Voordelen van het gebruik van een sjabloonengineLaten we nu eens kijken wat we zullen winnen door oplossingen zoals Handlebars in onze applicaties met Express te implementeren:
De resulterende code is meer georganiseerd en we zijn er zeker van dat er geen misvormde HTML zal zijn.
We kunnen ons team in tweeën splitsen, door te werken met gebruikersinterfaces zonder dat we hoeven te ontwikkelen in Back-End.
Template-engines stellen ons in staat om delen van code opnieuw te gebruiken en zo ons project geoptimaliseerd te houden.
Er zijn veel hulpprogramma's die ons helpen om een ​​betere interactie te bieden met het visuele deel van onze applicaties.
Hoe we zien wat de template-engines ons bieden, is om onze code te kunnen scheiden, optimaliseren en organiseren, dit heeft als direct gevolg de verbetering van de effectiviteit, efficiëntie en algemene productiviteit in ons ontwikkelteam.
Aan het begin van de tutorial vermeldden we dat: Jade het was de standaardmotor, dus waarom zoeken we naar een andere motor? Het antwoord is heel eenvoudig, de manier waarop het werkt Jade probeert de hoeveelheid te verminderen HTML we schrijven, dit kan een beetje verwarrend zijn, omdat we praktisch een nieuwe vorm van taal moeten leren voor onze Voorkant.
In de volgende afbeelding zien we een sjablooncode van: Jade zodat we een voorbeeld van de syntaxis kunnen zien:

We kunnen merken dat het verschil met code HTML Standaard is verschrikkelijk, en hoewel de code minder is, is de hoeveelheid denkwerk die ermee gemoeid is iets meer.
Stuur het is een ander verhaal dan Jade, zijn manier van werken is vergelijkbaar met andere motoren zoals: Jinja2 of Slok, omdat het ons in staat stelt om labels te schrijven HTML en dan binnen met onze eigen motorcode kunnen we definiëren wat het afdrukt vanuit de context en de manier waarop het dat doet.
Als we bijvoorbeeld weten dat we iets gaan afdrukken dat een gebruiker heeft geschreven, kunnen we automatisch ontsnappen aan de speciale tekens en zo code-injectie vermijden, maar als we weten dat het onze eigen code is, kunnen we dit uitdrukken aan Stuur dat ontsnapt niet aan de tekst.
Server of cliëntEen ander aspect van Stuur is dat het op twee manieren kan werken, vanaf de serverzijde of vanaf de clientzijde. Deze veelzijdigheid maakt dat we beter kunnen beslissen hoe we onze toepassingen willen uitvoeren, want als het een SPA o Toepassing met één pagina, misschien is de benadering aan de clientzijde eenvoudiger en nuttiger, maar als we een website willen, is het misschien nuttiger om alles op de server te genereren.
Voor installatie: Stuur aan de serverkant is het heel eenvoudig, we hoeven alleen maar te gebruiken npm in onze console en dus zullen we de benodigde pakketten verkrijgen, laten we eens kijken wat we moeten schrijven:

 npm install --save express-handlebars

Met dat npm Het gaat alle benodigde componenten downloaden zodat we deze engine in ons project kunnen opnemen, uiteindelijk zouden we een resultaat moeten krijgen dat vergelijkbaar is met het volgende in onze console:

Dan in ons bestand waar we onze applicatie starten nadrukkelijk We moeten het vertellen om dit als de sjabloon-engine te gebruiken, hiervoor hoeven we alleen de volgende code te schrijven:

 var stuur = vereisen ('express-stuur') .create ({defaultLayout: 'main'}), app.engine ('stuur', stuur.engine); app.set ('view engine', 'stuur');

Wat in ons bestand zou blijven staan, zou het volgende zijn:

Basissyntaxis van het stuurStuur Het heeft zijn eigen zeer schone syntaxis waarmee we een beetje weergavelogica in de sjabloon kunnen opnemen, we kunnen opmerkingen opnemen, lijsten en blokken herhalen, al dan niet ontsnappen aan tekstgedeelten. Daarom is het belangrijk om de meest elementaire te kennen, zodat we onze ideeën comfortabeler kunnen uiten en er dus het meeste uit kunnen halen, laten we de meest elementaire van de motor hieronder bekijken.
Als gevolg hiervan genereert onze weergave gegevens die we de gebruiker moeten laten zien, we geven deze gegevens door de context door aan onze sjabloon en dit is waar we deze afdrukken. Om dit af te drukken, moeten we de variabele of het element gewoon tussen dubbele accolades plaatsen, zoals als volgt:

 {{Naam}}

Dat leidt ons naar de inhoud van "Naam" die we naar onze mening hebben gedefinieerd, ontsnappen deze dubbele accolades automatisch aan tekens, op zo'n manier dat het niet resulteert in het afdrukken van code die standaard niet is toegestaan ​​​​door de ontwikkelaar.
Als we nu een tekst willen afdrukken zonder te escapen, moeten we drievoudige accolades gebruiken, dit vertelt Stuur dat er niets mag ontsnappen, laten we het voorbeeld bekijken:

 {{{Namen}}}

Dit als het ons in staat stelt om code af te drukken HTML, speciale tekens en zelfs JavaScript zonder tussenkomst van onze engine.
De opmerkingen in de sjabloon zijn van vitaal belang, omdat ze ons in staat stellen secties te identificeren, belangrijke informatie toe te voegen en onze aanvraag te documenteren. Als we direct een opmerking plaatsen op HTML in de vorm: dit wordt uiteindelijk zichtbaar voor iedereen die de code van onze pagina inspecteert, dus het beperkt ons in wat we gedocumenteerd kunnen achterlaten.
Maar als we opmerkingen gebruiken in Stuur, we kunnen ze altijd in de broncode zien, maar de engine bij het genereren van wat de gebruiker ziet, laat het weg, en wanneer we de code van het web of de applicatie inspecteren, zullen we niets zien. Om een ​​opmerking over te schrijven Stuur we moeten het volgende doen:

 {{! onze opmerking}}

Dit betekent dat de inhoud van de opmerking nooit wordt gegenereerd in het resultaat dat zichtbaar is voor onze gebruikers, waardoor wat we schrijven geheim is voor degenen die zich buiten ons ontwikkelteam bevinden.
Iets dat we niet mogen vergeten, is dat we ons niet hoeven te beperken tot wat er in de mainstream, er zijn veel opties die misschien beter zijn voor de ontwikkelingsstijl van elke persoon, daarom is het van vitaal belang om onderzoek te doen en niet bang te zijn om nieuwe dingen te proberen.
Hiermee hebben we deze tutorial afgerond, we hebben een kleine maar verrijkende introductie gehad over wat het gebruik van sjablonen betekent en hoe je een nieuwe engine in nadrukkelijk.
Ja ok Stuur is veel uitgebreider, maar met deze kernbegrippen en onze applicatie nadrukkelijk we zullen in korte tijd zeer interessante dingen kunnen bereiken.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven