Node, Express et Jade

Après un article de présentation et un premier “Hello world”, passons à la suite. Nous avons créé un serveur http basique. Pour créer une véritable application web, il reste encore du travail, à minima créer des pages qui seront renvoyées par le serveur. D’où notre travail du jour :
– créer les vues de l’application,
– créer le routage des requêtes afin de renvoyer la bonne vue.
L’idée est de créer un affichage du cours des actions d’une bourse virtuelle. Pour cela, on ne va pas tout faire nous même. En avant !

Quand je vous disais que Node.js fourmillait de modules, je ne mentais pas. Différentes solutions de moteur de template  s’offrent à vous, ou mieux des frameworks web (qui s’appuient donc sur des moteurs de templating, mais aussi des modules CSS, de routage etc…).

Express  est probablement le framework le plus connu et utilisé. Développé par le talentueux TJ Holowaychuk, Express s’appuie sur Connect  (un framework de serveur http qui regroupe un ensemble de middleware, inspiré de Rack). Le toujours très bon site howtonode en donne une explication intéressante.

Il utilise par défaut le moteur de template Jade  mais d’autres sont également disponibles.
Bien d’autres solutions de frameworks web existent et vous allez trouver des fans de chacune. Si vous avez un module préféré, n’hésitez pas à le signaler en commentaire.

Suivons donc la hype, et découvrons Express et Jade!

Installation express

Comme souvent on trouve moult ressources  pour bien installer Express. Si vous ne l’avez pas déjà fait, je vous conseille d’installer npm (Node Packet Manager), utilitaire très pratique qui se charge de récupérer pour vous les modules que vous voulez et de les installer (vous avez dit Maven ?). L’installation d’Express par NPM se fait alors en une ligne de commande. Une fois Express installé, créez un nouveau projet ‘shares’ avec la commande

express shares

Si vous explorez le dossier créé (ou directement sur Github ), vous trouvez une architecture typique projet web a la Rails/Grails/Play! :
– un fichier package.json équivalent à un pom.xml
– un dossier views pour les vues de l’application
– un dossier public qui contient les différentes ressources (images, styles, js)
– un fichier principal app.js

Ce dernier nous intéresse plus particulièrement, on y trouve deux parties intéressantes :
– la partie Configuration avec déjà quelques modules déclarés
– la partie Routes, qui permettra de définir quelle vue sera renvoyée pour une route donnée.
Le serveur est lancé sur le port 3000, donc si vous avez bien suivi un

node app.js

suivi d’un saut dans le navigateur vous amène à une belle page d’accueil.

Non ? Alors il vous manque peut être quelques modules : comme on le ferait pour un build Maven il faut récupérer les dépendances du projet avant de pouvoir travailler.

npm install -d

s’en charge pour vous. On relance le serveur et voilà !

Ma première route

Nous allons modifier la route existante pour la remplacer par une a nous

app.get('/', function(req, res){
 res.render('shares', {title : 'Shares', shares : shares});
});

Ainsi une requête sur l’url de notre serveur renverra la vue shares à laquelle nous passons un ensemble de variables (qui seront utilisées pour générer la vue d’après le template comme nous allons le voir incessamment).
Ces variables sont donc le titre de la page et un objet qui représente un tableau d’actions, que nous devons donc définir.

var shares = [{name:"Google",price:120}, {name:"Apple",price:132}, {name:"Microsoft",price:92}]

Chaque action est un objet simple composé d’un nom et d’un prix.

Les routes peuvent également récupérer des paramètres de l’url : si on ajoute une route comme la suivante

app.get('/:name', function(req, res){
 res.render('shares', {title : req.params.name,
    shares : shares.filter(function(share){return share.name.toLowerCase() == req.params.name.toLowerCase()})});
});

alors accéder à la page ‘/google’ donnera une page dont le titre est ‘google’ et la seule action listée celle de … Google.
Vous pouvez voir le code modifié ici.

Passons maintenant à l’écriture de ce template !

Un moteur de template qui envoie

Quel que ce soit votre langage/framework préféré, si vous faites du web, il faut bien écrire les pages html. Et il faut reconnaître que c’est rarement la partie la plus excitante, il faut penser à bien fermer ses balises, à choisir des ids et des classes pertinents, tout en se préparant à la grande bataille du CSS qui s’annonce. Boring…

Les rubyistes ont souvent de bonnes idées et on en trouve dans Rails notamment par poignée (quand on est un profane et curieux comme moi, la série de screencast Railscast est une bonne ressource pour découvrir et se tenir informé). L’une de ses bonnes idées se nomme Haml et sa devise donne le ton : « markup haiku ». Haml vise à remplacer les gros templates hideux par quelque chose de plus léger (poétique serait quand même un peu exagéré…). Mais nous ne sommes pas là pour parler Ruby. En revanche Haml a un successeur spirituel dans le monde Javascript et il s’agit de Jade (écrit par le même développeur qu’Express, qui est décidément un garçon très occupé). Le plus simple pour comprendre est de voir ça en action.

Vous avez devant vous votre IDE/éditeur de texte préféré, page blanche et vous entrez

html

Une fois compilé par Jade, ce tag se transforme en

<html></html>

Vous voulez ajouter une div avec un id

div#price 12 euros

va donner

<div id=”prices”>12 euros<div>

ou encore plus simplement

#price 12 euros

car le tag par défaut est une div.

On peut également ajouter une classe

div.prices

ou

.prices

donnera

<div class=”.prices”></div>

Besoin d’ajouter un attribut ?

a(href=’/prices’) Prices

donne

<a href=’/prices’>Prices</a>

Oh et j’oubliais, la déclaration de doctype s’écrit avec un ‘triple bang’ (!!!)

Nice ? Un peu de dynamique maintenant. Si nous avons un article avec un prix, et que l’on passe cet objet au template suivant :

#price #{item.price} euros

nous obtenons

<div id=”price”>12 euros</div>

Ces deux screencasts vous emmèneront un peu plus loin dans la découverte si vous le désirez.
Vous avez maintenant installé Express et eu un aperçu de Jade. Il est temps de faire notre premier template Jade pour Express.

Si vous ouvrez le fichier layout.jade présent dans le répertoire view vous trouvez :

!!!
html
 head
   title= title
   link(rel='stylesheet', href='/stylesheets/style.css')
 body!= body

On retrouve la déclaration de la doctype (triple bang), les balises html, head et body bien connues. On voit également comment s’effectue le chargement d’un style, et l’utilisation de la variable title passée en paramètre du template. A l’instar de Ruby, l’indentation est significative : un bloc indenté est un sous bloc du bloc précédent.
Ce layout est utilisé a chaque appel, et body sera remplacé par le template appelé (le template shares dans notre exemple).

Le template index.jade contient la page d’accueil. Elle ne nous sera plus nécessaire nous pouvons la supprimer. En revanche il nous faut créer la vue shares. Pour cela on peut créer un fichier shares.jade ou un dossier shares contenant un fichier index.jade. Cette deuxième méthode est retenue car nous allons utiliser plusieurs fichiers pour cette vue et ils seront regroupés dans ce dossier par soucis de lisibilité.

Voici a quoi va ressembler votre fichier index.jade

h1 Share's price
.shares
 != partial('share', shares)

La balise h1 contiendra le texte “Share’s price” puis une div avec la classe shares contiendra une “vue partielle”. Cette déclaration permet de façon simple de dire au template que pour chaque action de la collection ‘shares’ passée en paramètre, il faudra effectuer un rendu particulier. Ce sous template est créé dans un template annexe nommé ‘share.jade’ :

.share
 .name #{share.name}
 .tag
   .price(id=share.name) #{share.price}$

Ce template va être appelé pour chaque action, et pour celle-ci va créer une div de classe ‘share’ contenant une div ‘name’ avec le nom de l’action et une div ‘tag’ pour le prix. Cette dernière div contient une div ‘price’ dont l’identifiant est dynamique (pour les besoins du prochain billet) et le prix en $.

Si on relance le serveur vous devez avoir à l’écran la liste des actions !

Et pour tester la deuxième route, si l’on accède à la page ‘/google’, nous obtenons :

Vous pouvez récupérer les sources de cet article sur Github

git clone git@github.com:cexbrayat/shares.git

Pour lancer l’application

npm install -d
node app.js

Jade commence à se répandre, on trouve ainsi Scalate qui s’appuie dessus et est disponible comme moteur de template pour vos projets java (on trouve aussi un module Play!). C’est un outil très intéressant et pratique, à suivre et surveiller!

 

La prochaine fois on découvrira plus en avant Express et on parlera CSS !