Comment construire des SPA (applications à page unique) à l’aide de NodeJS, SailsJS et DustJS dans Ubuntu 14.04

introduction

Node.js® * est une plate-forme basée sur le moteur d’exécution JavaScript de Chrome permettant de créer facilement des applications réseau rapides et évolutives. Node.js utilise un modèle d’E / S non bloquant, piloté par événement, qui le rend léger et efficace, idéal pour les applications temps réel gourmandes en données exécutées sur des périphériques distribués.
Sails * est un framework NodeJS pour le serveur principal. Basé sur un modèle Model-View-Controller, il permet un développement rapide des applications. Sails possède une intégration intégrée pour les sockets Web pour les messages push en temps réel. Il utilise Waterline ORM comme ORM par défaut, ce qui en fait une base de données non agnostique. En d’autres termes, il permet d’effectuer des opérations de base de données sur un large éventail de bases de données SQL et non SQL. Plus important encore, Sails fournit une structure appropriée à votre application.
Dust * est un moteur de template JavaScript. Il hérite de l’apparence de la famille de langues ctemplate et est conçu pour s’exécuter de manière asynchrone à la fois sur le serveur et sur le navigateur.
SPA * signifie * Application d’une seule page *. Ce sont des applications qui tiennent sur une seule page Web. Une fois le site ouvert, la page ne se recharge plus par la suite. L’objectif d’une telle application est de fournir une expérience utilisateur fluide en réduisant le temps de chargement des pages et en offrant des transitions faciles vers différentes pages, tout comme les applications de bureau.

Dans ce tutoriel, nous allons configurer un serveur NodeJS avec SailsJS comme infrastructure pour gérer notre code. Nous allons utiliser DustJS pour les modèles isomorphes utilisés à la fois sur le client et sur le serveur.

Buts

Notre objectif principal est d’utiliser des modèles isomorphes (ou identiques) sur le client ainsi que sur le serveur. C’est génial parce que

Moins de code à écrire et à gérer comme les mêmes modèles sur le client et le serveur
Moteur de recherche indexable car n’importe quelle page peut être récupérée directement du serveur

Conditions préalables

Ce tutoriel suppose que vous avez créé un droplet Ubuntu 14.04 x64. Il a été testé avec 512 Mo de RAM. + Vous aurez également besoin d’un utilisateur ayant un accès sudo pour installer les packages.

Étape 1 - Installation du logiciel

Tout d’abord, pour compiler et installer des addons natifs à partir de npm, vous devez installer les outils de construction:

sudo apt-get install python-software-properties python g++ make

Ensuite, installez NodeJs et NPM en utilisant les commandes suivantes (à partir de PPA * de Chris Lea):

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Ensuite, installez + SailsJs +:

sudo npm -g install sails

Étape 2 - Création d’un nouveau projet de voiles

Créer une nouvelle application:

sails new dustspa
cd dustspa

Sails créera le répertoire + dustspa + avec la structure suivante:

--config
--views
---api
--tasks
--assets
README
.gitignore
package.json
.sailsrc
app.js
Gruntfile.js

Recherchez les lignes suivantes dans le fichier + package.json:

"dependencies": {
"sails": "~0.11.0",

Modifiez-les comme suit:

"dependencies": {
    "dustjs-linkedin": "^2.5.1",
    "sails": "~0.11.0",

Le compilateur de poussière est utilisé pour compiler des modèles de poussière afin de dépoussiérer des modèles JavaScript.

Ensuite, installez les packages + dustjs + ainsi que les autres dépendances de package dans le fichier + package.json +:

sudo npm install

Maintenant, nous utilisons + sails lift + pour lever le serveur:

sails lift

Visitez +: 1337 + pour afficher la page d’accueil par défaut. Arrêtez le serveur en utilisant + Ctrl + C + lorsque vous avez terminé.

Étape 3 - Configuration du moteur de visualisation

Tout d’abord, nous définissons le * View Engine * sur + dust +:

Dans + config / views.js + ', changez + engine:' ejs '+ pour + engine:' dust '+':

nano ./config/views.js

Aller à la ligne:

   engine: 'ejs',

et le changer pour:

   engine: 'dust',

Une fois les modifications effectuées, appuyez sur les touches + Ctrl + X + (enregistrer), Y (confirmer le nom du fichier) et ENTER (enregistrer et quitter).

Nous allons utiliser la méthode ci-dessus pour éditer tous les fichiers à l’avenir.

Étape 4 - Création de layout.dust

Le contenu de + layout.dust + sera notre page de destination. Toutes les demandes viendront sur cette page pour la première page. Après cela, les demandes seront traitées sur le frontend.

Créez le fichier + layout.dust dans le dossier` + views`:

touch views/layout.dust

Copiez le code HTML suivant dans + layout.dust +:

layout.dust

<!DOCTYPE html>
<html>
<head>
 <title>Dust SPA</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
 <div class="container">
   <div class="header">
     <nav>
       <ul class="nav nav-pills pull-right">
         <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
         <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
         <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
       </ul>
     </nav>
     <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
   </div>
   <br/>
   <div id="template">
     <h1>Partial Goes Here</h1>
   </div>
   <footer class="footer">
     <p>Styled by Bootstrap&copy;</p>
   </footer>
 </div>
</body>
</html>

Le HTML est assez simple. Il utilise:

Bootstrap pour le style.
Un simple nav pour les liens de navigation.
+ <div id =" template "> … </ div> + où nos modèles seront chargés

Ensuite, nous devons définir la vue pour + / + dans + routes.js. Ouvrez + config / routes.js + et modifiez-le en:

routes.js

'/': {
  view: 'layout'
   }

Maintenant, levons le serveur (si le serveur est déjà en marche, appuyez sur Ctrl + C pour l’arrêter.) Et vérifiez notre progression. Exécutez cette commande à partir du répertoire + dust spa + (qui est notre répertoire actuel):

sails lift

Et pointez votre navigateur vers l’emplacement suivant: +: 1337 +

Si vous pouvez voir la page, poursuivons. Si non, veuillez revoir les étapes précédentes. De plus, les liens ne fonctionneront pas à ce stade.

Étape 5 - Création de partiels

Créez le répertoire + partials + dans le répertoire + views +, et passez à ce nouveau répertoire:

mkdir views/partials
cd views/partials

Créez les fichiers + home.dust +, + + about.dust + et + contact.dust + dans le répertoire + partials + avec le contenu suivant:

home.dust

   <div class="jumbotron">
     <h1>Home Page
       {?home}<small class="pull-right">Visit Count: {home}</small>{/home}
     </h1>
     <p class="lead">This is the home page. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</p>
     <p>
       <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
       <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
     </p>
   </div>

about.dust

   <div class="panel panel-primary">
     <div class="panel-heading">
     <h1 class="panel-title">About Us
       {?about}<kbd class="pull-right">Visit Count: {about}</kbd>{/about}
     </h1>
     </div>
     <div class="panel-body">
       <h4>This is the About Us template. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</h4>
       <br>
       <p>
         <a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
         <a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
     </p>
     </div>
   </div>

contact.dust

   <div class="well">
     <h1 class="align-center">Show us some love and we'll get back to you !
       {?contact}<small class="pull-right">Visit Count: {contact}</small>{/contact}
     </h1>
     <hr/>
     <div class="input-group input-group-lg">
       <span class="input-group-addon" id="basic-addon1">@</span>
       <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
     </div>
     <br/>
     <p>
     <a class="btn btn-lg btn-success" href="#" role="button">Send Contact</a>
     </p>
   </div>

Étape 6 - Modèles de compilation

Les modèles de poussière doivent être compilés avant de pouvoir être utilisés sur le front-end.

Installons le compilateur + dust +:

sudo npm install -g dust-compiler

Nous conserverons tous nos modèles compilés dans + assets / templates. Passez au répertoire principal + dusts +:

cd ../..

Maintenant, compilez les + modèles de poussière:

dust-compiler -s views/partials/ -d assets/templates/ --bootstrap --nonotify

Maintenant, vous devriez avoir trois fichiers dans votre dossier + assets / templates:

+ home.js +
+ about.js +
+ contact.js +

Maintenant, nous avons tous les fichiers requis.

Tout d’abord, dans + views / layout.dust +, ajoutez les bibliothèques + dust-js + et les fichiers de modèle à l’intérieur des balises + <body> + à la toute fin:

layout.dust

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>

<script type="text/javascript" src="/templates/home.js"></script>
<script type="text/javascript" src="/templates/about.js"></script>
<script type="text/javascript" src="/templates/contact.js"></script>

Cela fait, nous devons ajouter un script pour capturer les clics sur les liens et restituer le modèle requis. Créez + assets / js / cliquez sur Handler.js avec le contenu suivant:

clickHandler.js

   (function () {

 var links = document.getElementsByClassName("links"),
 templateDiv = document.getElementById("template"),
 nav = document.querySelector('nav > ul'),
 clicked = false, viewCount = { home: 2, about: 1, contact: 1 };

 function clickHandler(e) {
   var target = event.target,
   templateName = this.getAttribute("data-template");
   if(clicked) {
     clicked.removeAttribute('class');
   }
   else {
     nav.querySelector('.active').removeAttribute('class');
   }
   target.parentElement.setAttribute('class','active');
   clicked = target.parentElement;

   dust.render(templateName, viewCount, function (err, out) {
     if(err) console.log('Error:',err);
     else {
       viewCount[templateName]++;
       templateDiv.innerHTML = out;
     }
   });
 };

 for(var i = 0; i < links.length; i++){
   links[i].addEventListener('click', clickHandler, false);
 }

})();

Le script ci-dessus est très simple. Il fait ce qui suit:

Capture les événements de clic sur les liens
Extrait le nom du modèle pour un lien de l’attribut + data-template +
Stylise le lien cliqué
Rend le modèle en utilisant la fonction + dust.render + et passe un objet + viewCount + (peut contenir n’importe quoi, ici il contient le nombre d’accès de vue)

Référencez ce nouveau fichier + cliquez sur Handler.js en éditant le` + views / layout.dust` et en ajoutant ce qui suit dans les balises + <body> + à la fin:

<script type="text/javascript" src="/js/clickHandler.js"></script>

Enfin, nous devons éditer + layout.dust dans le répertoire` + views`.

Modifiez le + <div id =" template "> … </ div> + dans + views / layout.dust + en:

layout.dust

<div id="template">
 {> "partials/home"/}
</div>

Qu’est-ce que le changement ci-dessus fait?! Ceci est * Réutilisation de modèle *. Le moteur de visualisation + dust.js remplacera` + {> "partials / home" /} + par le contenu du fichier + view / partials / home.dust + `.

Comment ce modèle sera-t-il réutilisé? Une version compilée de ce modèle (que nous avons compilé avec + dust-compiler +) réside dans + assets / templates / home.js +. Ce modèle compilé sera inclus dans une balise de script ultérieurement. Une fois qu’un modèle est inclus à l’aide d’une balise + <script src =" / templates / home.js "/> +, il (le modèle) est automatiquement ajouté à l’objet + dust.cache + dans le + frontend + . Maintenant, pour re-rendre ce modèle, nous utilisons + dust.render (" home ", obj, callbackFunction) +. Vous pouvez vérifier le code dans le fichier + assets / js / click Handler.js pour mieux comprendre le code.

Un modèle de poussière nommé + xxx + est créé dans un fichier nommé + xxx.dust +. Vous pouvez avoir plusieurs fichiers + .dust + et référencer un modèle dust.js dans un autre. C’est la base des «composants» ou des modèles réutilisables pour des tâches telles qu’un en-tête et un pied de page communs sur plusieurs pages. Notez que l’extension de fichier + .dust + est utilisée ici dans les exemples, mais + .tl + est également courante. Etant donné que seul le processus de construction compte, vous pouvez utiliser n’importe quelle extension qui vous convient.

La syntaxe de référence partielle + {> nom /} + prend également en charge les chemins afin que vous puissiez avoir un modèle sur un chemin tel que + shared / header.dust + et le référencer en tant que `+ {>" shared / header "/} + `. Cela permet aux partiels d’être organisés en structures de type bibliothèque à l’aide de répertoires.

Pour en savoir plus sur les Partials, consultez github.

Votre + layout.dust + final devrait ressembler à ceci:

layout.dust

<!DOCTYPE html>
<html>
<head>
 <title>Dust SPA</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<body>
 <div class="container">
   <div class="header">
     <nav>
       <ul class="nav nav-pills pull-right">
         <li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
         <li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
         <li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
       </ul>
     </nav>
     <h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
   </div>
   <br/>
   <div id="template">
     {> "partials/home"/}
   </div>
   <footer class="footer">
     <p>Styled by Bootstrap&copy;</p>
   </footer>
 </div>

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
 <script type="text/javascript" src="/templates/home.js"></script>
 <script type="text/javascript" src="/templates/about.js"></script>
 <script type="text/javascript" src="/templates/contact.js"></script>
 <script type="text/javascript" src="/js/clickHandler.js"></script>
</body>

</html>

Étape 7 - Test de l’application

Soulevez le serveur:

sails lift

Pointez votre navigateur sur les éléments suivants: +: 1337 +

Testez SPA en cliquant sur les 3 principaux liens: * Accueil *, * À propos de *, * Contact *

Conclusion

Impressionnant ! Nous avons construit avec succès un site Web isomorphe qui autorisait l’utilisation du même modèle sur le client et le serveur. + Nous avons créé un site Web d’application de page unique (SPA) et avons également compris l’utilisation du cadre SailsJS.

Liens externes

Si vous souhaitez en savoir plus sur les technologies utilisées, vous pouvez visiter les liens ci-dessous.

TOC

Comment construire des SPA (applications à page unique) à l’aide de NodeJS, SailsJS et DustJS dans Ubuntu 14.04

introduction

Buts

Conditions préalables

Étape 1 - Installation du logiciel

Étape 2 - Création d’un nouveau projet de voiles

Étape 3 - Configuration du moteur de visualisation

Étape 4 - Création de layout.dust

Étape 5 - Création de partiels

Étape 6 - Modèles de compilation

Étape 7 - Test de l’application

Conclusion

Liens externes

Related