Construire une vraie application avec node.js

Nous avons vu dans un article précédent une introduction à node.js. Cependant si vous avez lu cet article, vous vous êtes probablement dit, tout comme moi : "qu'est-ce qu'il veut que je fasse avec ça ? Ca rends mon code illisible son truc".

Et je vous l'accorde. C'est pas lisible et ça deviendra très rapidement impossible à maintenir pour des grosses applications. Alors oui on peut écrire des modules de manière à diviser notre application en de multiples briques. Mais cela ne résouds pas réellement le problème de lisibilité du code.

Nous allons voir comment remédier à cela dans cet article en utilisant connect et express

Npm, rubygems mais en javascript

Afin d'installer les librairies requises, nous allons utiliser l'un des gestionnaires de packets proposés pour node.js, npm

L'installation est simple :

curl http://npmjs.org/install.sh | sudo sh

Connect, rack mais en javascript

Connect est un équivalent de rack pour node. Les applications viennent se greffer dessus sous la forme de middlewares, permettant ainsi de manipuler l'application à n'importe quel niveau.

Installer Connect

Installons Connect ! Pour cela, nous pouvons utiliser le gestionnaire de packets précédemment installé, npm.

npm install connect

Et roulez jeunesse !

Utiliser Connect

Le bête Hello World de Connect, tiré de la documentation est ainsi :

var Connect = require('connect');
var server = Connect.createServer(function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World');
});

server.listen(3000);

Nous ne gérons même pas l'url courante (il faudrait, pour cela, faire un if. Je vous le déconseille). Mais nous pouvons renvoyer du contenu texte très simplement. Nous venons de créer notre premier middleware !

Express, sinatra mais en javascript

En ruby, Sinatra permet de créer de petites applications légères tournant sous rack simplement. Express permet de faire la même chose.

Installer Express

Continuons sur notre bonne lancée de npm pour installer Express.

npm install express

Qui a dit que l'informatique était compliqué ? ;)

Utiliser Express

C'est la que node devient réellement intéressant. Avec Express, nous allons enfin pouvoir commencer à créer des applications maintenables. Voici notre Hello World avec Express :

var app = express.createServer();
app.get('/', function(req, res){
    res.send('Hello World');
});
app.listen(3000);

Nous définissons une route sur l'url /, qui rendra alors comme contenu "Hello World". Toute URL autre que celle-ci retournera une erreur 404.

Bien évidemment nous pouvons définir autant d'url que nous désirons avec les méthodes get/post/put/delete.

Fichiers de templates

Reste encore un problème cependant : plus haut, nous définissons un contenu directement dans le javascript. Ceci n'est vraiment pas cool et on voudrait bien avoir un système de templating.

Par défaut, Express supporte haml afin de créer vos vues. Dans le même dossier que le fichier principal de notre application, créons un dossier views.

Dans ce dossier, nous allons ajouter deux fichiers :

layout.haml

Ce fichier sera inclus automatiquement comme layout de votre application. Placez-y votre design.

!!!
%html
  %head
    %title Bonjour tout le monde
  %body
    = body

index.haml

C'est le fichier de notre page d'index.

%h1
  Hello World !

Puis dans notre fichier javascript remplaçons le get de la page principale afin d'afficher le contenu de ce fichier haml.

app.get('/', function(req, res){
    res.render('index.haml');
});

Redémarrez votre serveur; rechargez la page et admirez votre beau template parsé en html et affiché !

Fichiers statiques

Maintenant que nous pouvons afficher nos templates comme nous le désirons, il ne nous reste plus qu'à ajouter un peu de style à la page. Pour cela, il faut inclure un fichier CSS statiques.

Express gère nativement les fichiers statiques. Tout fichier situé dans le répertoire /public et ne correspondant pas à une route déjà définie sera alors affiché.

Configuront le répertoire publique. Avant le app.listen(3000);, ajoutez la ligne suivante :

app.use(express.staticProvider(__dirname + '/public'));

Ainsi nous indiquons à Express d'utiliser le dossier /public courant pour afficher les fichiers statiques.

Créez le fichier /public/style.css Puis incluons ce fichier style.css dans notre layout :

%head
  %title Testing
  %link{rel: 'stylesheet', href: '/style.css' }

Vous n'avez plus qu'à ajouter le design que vous désirez pour votre page.

Conclusion

Du fait de sa relative jeunesse, node évolue encore très rapidement. Et Express en est la preuve visible. Il y a quelques mois encore, réaliser une grosse application entièrement avec node était inenvisageable.

Aujourd'hui, bien que Express ne propose qu'une couche assez basse, il permet déjà de développer de bien meilleures applications que en node brut.

Node nous réserve encore beaucoup de surprises. Les trois années qui viennent devraient être fortement excitantes à ce niveau.