Introduction¶

NodeJS côté serveur¶

Ce tutoriel vous permettra de créer une application web d’un autre genre. En effet, le code côté serveur des forums habituels est souvent le PHP. Cette application innove en utilisant du nodeJS. Ce langage a plusieurs avantages par rapport au PHP :

Contrairement au PHP, le javascript agit en grande partie de manière asynchrome (ou “non-bloquante”), c’est-à-dire qu’il exécute les instructions qui se trouvent dans le code de façon dynamique.

Prenons un exemple : si nous voulons charger plusieurs fichiers à l’aide d’un script PHP, le code (appelé code bloquant) s’occupe de charger les fichiers les uns après les autres.

En revanche, en javascript, le code s’exécutera en créant tout simplement des événements pour chaque téléchargement. Ainsi, plusieurs téléchargements seront simultanés. Lorsqu’un téléchargement est terminé, nous appeleons alors une fonction de callback (fonction de retour) qui dit au programme ce qu’il doit faire avec le fichier.

Pour illustrer cet exemple, voici une image :

En prenant le simple exemple d’un chargement de fichiers, nous entrevoyons déjà l’énorme avantage de la programmation événementielle. En PHP, si un fichier à télécharger provient d’un serveur à bande passante très lente, le script se contentera d’attendre que le téléchargement soit terminé pour exécuter d’autres instructions. Par contre, en nodeJS, le script aura peut-être déjà terminé l’exécution des autres quand ce fichier sera téléchargé. Nous constatons donc que cela représente un gain de temps non-négligable :

En effet, le forum ne nécessite pas beaucoup de chargements de fichiers, mais le nodeJS contribue à significativement accélérer sa vitesse.

Un exemple : lors d’une requête SQL vers la base de données, le code va crée l’événement qui concerne cette requête, puis exécute d’autres instructions (par exemple : préparer la page qui doit être envoyée à l’utilisateur). Lorsque le résultat de la requête est retourné, il n’a alors plus qu’à envoyer la page toute prête à l’utilisateur.

En plus de son mode asynchrome, le nodeJS est connu pour avoir d’excellentes performances, notamment grâce au moteur V8 de Google Chrome.

Avec le nodeJS, vous gérez aisément les routes vers les pages web et le format des URL. Ainsi, plus besoin d’installer des programmes tels qu’Apache et des frameworks pour le faire.

Javascript côté client¶

Pour réaliser ce forum, nous utiliserons également beaucoup de javascript. Ce langage nous permet de concrétiser la notion de temps réel ; grâce à lui, des modifications peuvent s’effectuer sur une page sans que l’utilisateur aie besoin de recharger celle-ci. Le javascript, employé avec nodeJS, utilise exactement le même langage sur le code côté serveur et sur le code côté client. Ainsi, nul besoin d’apprendre la syntaxe du javascript, puisque c’est la même que celle du nodeJS.

Grâce à la pratique constante du javascript et du nodeJS, vous deviendrez plus expérimentés dans ce langage et vous découvrirez peut-être une nouvelle manière de créer des applications web.

Socket.io¶

Socket.io n’est pas un langage à proprement parler, car il utilise du javascript. Ce module nodeJS permet de relier le client et le serveur avec une communication bidirectionnelle asynchrome.

Il s’agit d’une sorte de “tuyau” de communication qui permet au client d’envoyer directement des éléments au serveur, et vice-versa.

socket.io est bidirectionnel ; c’est ce qui explique la flèche qui va dans les deux sens. Le client et le serveur sont ainsi toujours en contact et peuvent s’envoyer des requêtes dans les deux sens. Le mot “asynchrome”, quant à lui, signifie que socket.io se base sur les événements et les fonctions de rappel. Un exemple concret : lorsque le serveur envoie un message au client, le client exécute une fonction qui affiche le message sur la page.

Lorsque vous aurez utilisé socket.io pour créer cette application, vous maîtriserez un système très efficace pour actualiser des données en temps réel sur une page sans recharger celle-ci. Ce système peut en effet s’appliquer de nombreux programmes : un chat, un système d’édition collaborative de documents, une présentation à distance... Dans l’application que nous allons créer, il servira à actualiser les messages d’une discussion en temps réel.

MySQL¶

Dans presque chaque application qui stocke des données, nous avons besoin d’une base de données. Et en l’occurence, nous utiliserons MySQL.

MySQL a plusieurs avantages : il est gratuit, le système de gestion de base de données est relationnel et il existe un module (node-mysql) très complet qui permet de travailler avec les bases de données de ce type en nodeJS.

L’écriture de nombreuses requêtes SQL améliorera vos compétences dans ce domaine. Vous parviendrez alors plus aisément à organiser vos données, à les trier et à récupérer ensuite celles dont vous avez besoin pour les transmettre à l’utilisateur de votre application.

Bootstrap¶

Vous rêvez de réaliser un site web au design propre mais vous n’avez pas assez d’idées et d’expérience avec CSS ? Alors bootstrap est fait pour vous ! Bootstrap est un framework CSS qui donne accès à une très grande quantité de directives CSS qui modifient l’apparence une page web. Il est entièrement compatible avec le responsive design (il aide même grandement à la création d’un site web responsive).

C’est tout simplement un site web qui s’adapte à la taille de l’écran depuis lequel on le visite. Pour illustrer ce concept, voici une image d’une page du forum pour un petit écran (à gauche) et pour un plus grand écran (à droite) :

Bootstrap aide donc à créer un site web responsive, notamment grâce à son système de grilles. Connaître ce framework vous permet de mieux appréhender le responsive design et d’apprendre à réaliser un site web avec un design moderne et uniforme.

HTML et CSS¶

Quasiment obligatoires lorsqu’il s’agit de créer un site web, ces langages sont aujourd’hui à la base du côté client de n’importe quelle application web. Les travaux pratiques de ce tutoriel vous permettront d’approfondir vos connaissances dans ces langages pour ainsi modifier aisément l’esthétique de votre page.

Tout cela vous donne envie ? Alors commençons l’apprentissage !