Utiliser des modèles avec des guidons dans Express.js

L'utilisation de templates est devenue une nécessité dans le monde des applications web, ceci car cela nous aide à séparer la logique de programmation de sa présentation. Toute cette séparation et la montée de la réception de ce style de développement ont conduit à l'apparition d'un grand nombre de cadres sur le marché qui nous aident à assumer la responsabilité de la gestion des modèles.
Dans le cas d Express, celui-ci est livré nativement avec un moteur de template appelé JadeCependant, de nombreux développeurs viennent déjà avec un background dans d'autres et il ne serait pas juste qu'ils doivent s'adapter à nouveau à un nouveau moteur, ce n'est pas mal mais ce n'est pas du goût de tout le monde.
C'est à cause de ça Express nous permet de configurer le framework afin que nous puissions travailler avec différents moteurs de modèles, tels que Guidon qui est une extension de Moustache.js et c'est un moteur de template très populaire car il est basé sur JavaScript et nous pouvons l'utiliser à la fois côté serveur et côté client.
ExigencesPour se conformer à certains des exemples présentés ici, nous devons avoir installé et avoir accès à Node.js, et ont déjà installé Express. Un éditeur de texte et une application Express ils sont souhaitables afin qu'ils puissent intégrer les concepts expliqués dans le tutoriel.
Inconvénients de ne pas utiliser de moteur de modèlesLa non-utilisation d'un moteur de template entraîne une série d'inconvénients qui peuvent affecter la vitesse de développement de notre application, nous allons lister ces inconvénients de sorte que lorsque nous pensons que nous n'avons pas besoin du moteur de template, nous voyons le contraire.
Le risque de faire du HTML malformé est beaucoup plus élevé, il peut donc être difficile d'obtenir des certifications pour notre code.
Le code résultant peut être difficile à documenter et à partager avec d'autres développeurs.
Si nous utilisons du code pour générer du HTML, il sera toujours inconfortable de travailler avec des caractères spéciaux.
Il existe une tendance à ne pas séparer la logique d'application de la présentation.
Comme nous pouvons le voir, il existe de nombreux inconvénients qui, bien qu'ils ne soient pas graves, n'empêchent pas notre application de fonctionner si cela réduit la possibilité d'être plus productif.
Avantages de l'utilisation d'un moteur de modèlesVoyons maintenant ce que nous gagnerons en implémentant des solutions comme les guidons dans nos applications avec Express :
Le code résultant est plus organisé et nous sommes assurés qu'il n'y aura pas de code HTML mal formé.
Nous pouvons séparer notre équipe en deux, en travaillant des interfaces utilisateurs sans avoir besoin de développer en Back-End.
Les moteurs de modèles nous permettent de réutiliser des sections de code, aidant ainsi à garder notre projet optimisé.
Il existe de nombreux utilitaires qui nous aident à fournir une meilleure interaction avec la partie visuelle de nos applications.
La façon dont nous voyons ce que les moteurs de modèles nous offrent est de pouvoir séparer, optimiser et organiser notre code, cela a comme conséquence directe l'amélioration de l'efficacité, de l'efficience et de la productivité générale de notre équipe de développement.
Au début du tutoriel, nous avons mentionné que Jade c'était le moteur par défaut, alors pourquoi cherchons-nous un autre moteur ? La réponse est très simple, la façon dont cela fonctionne Jade essaie de réduire la quantité de HTML nous écrivons, cela peut être un peu déroutant, car nous devons pratiquement apprendre une nouvelle forme de langue pour notre L'extrémité avant.
Dans l'image suivante, nous verrons un modèle de code de Jade donc nous pouvons voir un exemple de sa syntaxe :

On peut remarquer que la différence avec le code HTML La norme est abyssale, et bien que le code soit moindre, la quantité de réflexion impliquée est un peu plus.
Guidon c'est une autre histoire que Jade, son mode de fonctionnement est similaire à d'autres moteurs tels que Jinja2 ou alors Lampée, puisqu'il nous permet d'écrire des étiquettes HTML puis à l'intérieur, avec notre propre code moteur, nous pouvons définir ce qu'il imprime à partir du contexte et la façon dont il le fait.
Par exemple, si nous savons que nous allons imprimer quelque chose qu'un utilisateur a écrit, nous pouvons automatiquement échapper les caractères spéciaux et ainsi éviter l'injection de code, mais si nous savons qu'il s'agit de notre propre code, nous pouvons l'exprimer à Guidon cela n'échappe pas au texte.
Serveur ou ClientUn autre aspect de Guidon est qu'il peut fonctionner de deux manières, du côté serveur ou du côté client. Cette polyvalence signifie que nous pouvons mieux décider comment nous voulons réaliser nos applications, car s'il s'agit d'un SPA o Application d'une seule page, peut-être que l'approche côté client est plus simple et plus utile, mais si nous voulons un site Web, peut-être que tout générer sur le serveur est plus utile.
Pour installer Guidon côté serveur c'est très simple, il suffit d'utiliser npm dans notre console et ainsi nous obtiendrons les packages nécessaires, voyons ce que nous avons à écrire :

 npm install --save express-handlebars

Avec lui npm Il va télécharger tous les composants nécessaires pour que nous puissions intégrer ce moteur dans notre projet, au final nous devrions obtenir un résultat similaire au suivant dans notre console :

Puis dans notre dossier où nous commençons notre application Express Il faut lui dire de l'utiliser comme moteur de template, pour cela il suffit d'écrire le code suivant :

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

Ce qui resterait dans notre dossier serait le suivant :

Syntaxe de base du guidonGuidon Il a sa propre syntaxe très propre qui nous permet d'incorporer un peu de logique de vue dans le modèle, nous pouvons incorporer des commentaires, itérer sur des listes et des blocs, échapper ou non à des sections de texte. C'est pourquoi il est important de connaître les plus basiques afin que nous puissions exprimer nos idées plus confortablement et ainsi en tirer le meilleur parti, voyons le plus basique du moteur ci-dessous.
En conséquence, notre vue génère des données que nous devons montrer à l'utilisateur, nous transmettons ces données à travers le contexte à notre modèle et c'est là que nous les imprimons. Pour imprimer cela, nous devons simplement mettre la variable ou l'élément entre des accolades doubles comme suit :

 {{nom}}

Cela nous amène à voir le contenu de "nom" que nous avons défini à notre avis, ces doubles accolades échappent automatiquement aux caractères, de telle sorte qu'il n'en résulte pas l'impression de code qui n'est pas autorisé par défaut du développeur.
Maintenant, si nous voulons imprimer un texte sans échapper, nous devons utiliser des accolades triples, cela indique Guidon que rien ne doit s'échapper, voyons l'exemple :

 {{{Noms}}}

Ceci si cela nous permet d'imprimer le code HTML, caractères spéciaux et même JavaScript sans intervention de notre moteur.
Les commentaires dans le modèle sont essentiels, car ils nous permettent d'identifier les sections, d'ajouter des informations importantes et de documenter notre candidature. Si nous mettons un commentaire directement sur HTML dans la forme : cela finit par être visible pour quiconque inspecte le code de notre page, donc cela nous limite dans ce que nous pouvons laisser documenté.
Mais si nous utilisons des commentaires dans Guidon, nous pouvons toujours les voir dans le code source, mais le moteur lors de la génération de ce que l'utilisateur voit l'omet, puis lorsque nous inspectons le code du Web ou de l'application, nous ne verrons rien. Pour écrire un commentaire sur Guidon nous devons faire ce qui suit :

 {{! notre commentaire}}

Cela signifie que le contenu du commentaire n'est jamais généré dans le résultat visible par nos utilisateurs, faisant de ce que nous écrivons un secret pour ceux qui sont en dehors de notre équipe de développement.
Une chose que nous ne devons pas oublier, c'est que nous ne devons pas nous limiter à ce qui est dans le courant dominant, il existe de nombreuses options qui peuvent être meilleures pour le style de développement de chaque personne, c'est pourquoi il est essentiel de faire des recherches et de ne pas avoir peur d'essayer de nouvelles choses.
Avec cela, nous avons terminé ce tutoriel, nous avons eu une introduction petite mais assez enrichissante à ce que signifie l'utilisation de modèles, et comment incorporer un nouveau moteur dans Express.
Oui ok Guidon est beaucoup plus vaste, mais avec ces concepts clés et notre application Express nous pourrons réaliser des choses très intéressantes en peu de temps.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif