« Express.js » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 5 : Ligne 5 :


===Objectifs de cette page===
===Objectifs de cette page===
Cette page fait principalement référence au cours [[STIC I]] du Master MALTT et s'inscrit dans la perspective d'aborder les fondamenteaux de la programmation à travers [[JavaScript]]. Plus en détail, Express.js permet de montrer de manière concrète et pragmatique des éléments conceptuels et techniques liés à l'architecture requête/réponse des applications web.  
Cette page fait principalement référence au cours [[STIC I]] du Master MALTT et s'inscrit dans la perspective d'aborder les fondamentaux de la programmation à travers [[JavaScript]]. Plus en détail, Express.js permet de montrer de manière concrète et pragmatique des éléments conceptuels et techniques liés à l'architecture requête/réponse des applications web.  


Pour comprendre le contenu de cette page la lecture des pages suivantes et conseillée :
Pour comprendre le contenu de cette page la lecture des pages suivantes et conseillée :
Ligne 18 : Ligne 18 :


*  Ce [https://openclassrooms.com/courses/les-requetes-http tutoriel sur OpenClassrooms] qui explique le mécanisme
*  Ce [https://openclassrooms.com/courses/les-requetes-http tutoriel sur OpenClassrooms] qui explique le mécanisme
* La [https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol page sur le protocol HTTP sur Wikipedia]
* La [https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol page sur le protocole HTTP sur Wikipedia]
* Cette [https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP liste de codes HTTP sur Wikipedia] pour connaître les différents status associés aux résultats d'une requête
* Cette [https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP liste de codes HTTP sur Wikipedia] pour connaître les différents status associés aux résultats d'une requête


Ligne 57 : Ligne 57 :
  var express = require('express');
  var express = require('express');


Contrairement à d'autres modules tels que <code>fs</code>, cependant, qui retournent un objet avec des propriétés et des méthodes, Express.js retourne une fonction. Pour cette raison, on associe cette fonction à une autre variable (généralement appelée <code>app</code>) qui reprèsente l'application web elle-même :
Contrairement à d'autres modules tels que <code>fs</code>, cependant, qui retournent un objet avec des propriétés et des méthodes, Express.js retourne une fonction. Pour cette raison, on associe cette fonction à une autre variable (généralement appelée <code>app</code>) qui représente l'application web elle-même :


  //Importer le module express
  //Importer le module express
Ligne 66 : Ligne 66 :
===Première application web avec Express.js===
===Première application web avec Express.js===


Express.js est un framework basé sur le module <code>http</code> de Node.js (avec quelques éléments en plus). Donc l'architecture d'un service/server web créé avec Express.js est assez similaire à un server/service web créé avec le module http. Voici un exemple avec des commentaires pour faciliter la compréhension des différents éléments :
Express.js est un framework basé sur le module <code>http</code> de Node.js (avec quelques éléments en plus). Donc l'architecture d'un service/serveur web créé avec Express.js est assez similaire à un serveur/service web créé avec le module http. Voici un exemple avec des commentaires pour faciliter la compréhension des différents éléments :


<source lang="JavaScript">
<source lang="JavaScript">
Ligne 87 : Ligne 87 :
</source>
</source>


Le changement plus important par rapport à un simple server web avec http concerne l'utilisation des "routes" avec la méthode <code>app.get()</code> qui a comme objectif d'intercepter les requêtes en fonction de l'URL. Dans cet exemple, nous spécifions la route "/", c'est-à-dire l'URL même de notre server/service web, qui dans notre cas est le localhost avec la porte 9000. Voici le résultat que vous obtenez à l'adresse http://localhost:9000 :
Le changement plus important par rapport à un simple serveur web avec http concerne l'utilisation des "routes" avec la méthode <code>app.get()</code> qui a comme objectif d'intercepter les requêtes en fonction de l'URL. Dans cet exemple, nous spécifions la route "/", c'est-à-dire l'URL même de notre serveur/service web, qui dans notre cas est le localhost avec la porte 9000. Voici le résultat que vous obtenez à l'adresse http://localhost:9000 :


[[Fichier:Express.js-simple-web-app.png|400px|vignette|néant|Simple application avec Express.js.]]
[[Fichier:Express.js-simple-web-app.png|400px|vignette|néant|Simple application avec Express.js.]]


Ce simple exemple ne permet pas d'apprecier les potentialités de Express.js, mais donne néanmoins déjà un aperçu de sa "philosophie" de framework basé sur l'architecture requête/réponse. Dans la suite de cette page, nous fournirons quelques concepts théoriques et quelques exemples pour approfondire cette architecture.
Ce simple exemple ne permet pas d’apprécier les potentialités de Express.js, mais donne néanmoins déjà un aperçu de sa "philosophie" de framework basé sur l'architecture requête/réponse. Dans la suite de cette page, nous fournirons quelques concepts théoriques et quelques exemples pour approfondir cette architecture.


==Comprendre Express.js==
==Comprendre Express.js==


Express.js permet d'exploiter la structure événementielle de Node.js dans le cadre spécifique des applications web basées sur l'architecture client/server et requête/réponse. Pour bien comprendre le fonctionnement de Express.js, il peut être utile de faire une comparaison avec un server web "normal" tel que Apache.  
Express.js permet d'exploiter la structure événementielle de Node.js dans le cadre spécifique des applications web basées sur l'architecture client/serveur et requête/réponse. Pour bien comprendre le fonctionnement de Express.js, il peut être utile de faire une comparaison avec un serveur web "normal" tel que Apache.  


===Le rôle de l'interprète===
===Le rôle de l'interprète===


Une des différences fondamentales entre un server web Node.js/Express.js et un server traditionnel consiste dans le positionnement et le rôle de l'interprète du langage de programmation utilisé pour générer des pages web dynamique.
Une des différences fondamentales entre un serveur web Node.js/Express.js et un serveur traditionnel consiste dans le positionnement et le rôle de l'interprète du langage de programmation utilisé pour générer des pages web dynamique.


====Cycle requête/réponse avec un server web traditionnel====
====Cycle requête/réponse avec un server web traditionnel====
Un server "traditionnel" est principalement construit pour servir des pages statiques (i.e. en simple HTML) selon une simple association entre l'url de la ressource souhaitée et le positionnement des fichiers HTML sur le server web. Pour générer des pages web dynamiques, donc, un server comme Apache nécessite de la présence d'un interprète, comme par exemple PHP, qui identifie des pages dynamiques en fonction de l'extension (.php). Dans le cas de ces pages, le server exécute les instructions contenues dans le fichier - qui servent normalement à générer du HTML - avant de renvoyer la ressource en tant que réponse. La carte conceptuelle suivante montre le cycle requête/réponse lorsque le server utilise un server HTTP "traditionnel" :
Un serveur "traditionnel" est principalement construit pour servir des pages statiques (i.e. en simple HTML) selon une simple association entre l’URL de la ressource souhaitée et le positionnement des fichiers HTML sur le serveur web. Pour générer des pages web dynamiques, donc, un server comme Apache nécessite de la présence d'un interprète, comme par exemple PHP, qui identifie des pages dynamiques en fonction de l'extension (.php). Dans le cas de ces pages, le serveur exécute les instructions contenues dans le fichier - qui servent normalement à générer du HTML - avant de renvoyer la ressource en tant que réponse. La carte conceptuelle suivante montre le cycle requête/réponse lorsque le serveur utilise un serveur HTTP "traditionnel" :
[[Fichier:Express.js-normal-web-server.png|none|thumb|500x500px|Cycle requête/réponse avec un server HTTP "traditionnel".]]
[[Fichier:Express.js-normal-web-server.png|none|thumb|500x500px|Cycle requête/réponse avec un server HTTP "traditionnel".]]


====Cycle requête/réponse avec un server web Node.js/Express.js====
====Cycle requête/réponse avec un server web Node.js/Express.js====


Le même cycle requête/réponse est par contre très différent avec un server créé avec Node.js, comme c'est le cas de Express.js. Node.js permet en effet de créer directement un server HTTP qui est chargé de traiter les requêtes faites par un client et genérer des réponses, comme par exemple des pages HTML. En d'autres termes, en accord avec le principe événementielle de Node.js, les requêtes faites à travers un protocol HTTP ne représentent qu'un type d'événement particulier, qui peut être géré avec un module http. Express.js est tout simplement un ensemble d'objets (avec des propriétés et méthodes) qui peuvent être utiles pour gérer le cycle requête/réponse. La carte conceptuelle suivante montre ce cycle avec Express.js :
Le même cycle requête/réponse est par contre très différent avec un serveur créé avec Node.js, comme c'est le cas de Express.js. Node.js permet en effet de créer directement un serveur HTTP qui est chargé de traiter les requêtes faites par un client et générer des réponses, comme par exemple des pages HTML. En d'autres termes, en accord avec le principe événementielle de Node.js, les requêtes faites à travers un protocole HTTP ne représentent qu'un type d'événement particulier, qui peut être géré avec un module http. Express.js est tout simplement un ensemble d'objets (avec des propriétés et méthodes) qui peuvent être utiles pour gérer le cycle requête/réponse. La carte conceptuelle suivante montre ce cycle avec Express.js :


[[Fichier:Express.js-node-web-server.png|none|thumb|500x500px|Le cycle requête/réponse avec Express.js.]]
[[Fichier:Express.js-node-web-server.png|none|thumb|500x500px|Le cycle requête/réponse avec Express.js.]]

Version du 28 décembre 2015 à 15:39

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.



Introduction

Express.js est un framework basé sur Node.js pour le développement d'applications web.

Objectifs de cette page

Cette page fait principalement référence au cours STIC I du Master MALTT et s'inscrit dans la perspective d'aborder les fondamentaux de la programmation à travers JavaScript. Plus en détail, Express.js permet de montrer de manière concrète et pragmatique des éléments conceptuels et techniques liés à l'architecture requête/réponse des applications web.

Pour comprendre le contenu de cette page la lecture des pages suivantes et conseillée :

Rappel sur l'architecture requête/réponse

À faire, en attente voir par exemple :

Installation de Express.js

Installer le module Express

Comme tout module node.js qui se trouve sur npm, il y a deux possibilité pour installer Express.js :

  1. En locale dans le dossier de votre application
  2. Globalement dans votre système

Installation locale dans le dossier de l'application

La commande pour installer Express.js en tant que module locale dans le dossier de votre application est le suivant :

npm install express

Ce type d'installation résulte dans l'arborescence suivante :

Votre_dossier
|- node_modules
   |- express
|- votre_fichier_node_principale.js

Installation globale dans le système

Pour installer Express.js de manière globale dans le système, la commande est la suivante :

npm install -g express

Avec ce type d'installation, Express.js sera disponible à n'importe quel endroit dans le système.

Importer le module dans votre application

Encore une fois, Express.js est un "simple" module Node.js et par conséquent il est suffisant d'utiliser la fonction require() pour l'importer dans votre application :

var express = require('express');

Contrairement à d'autres modules tels que fs, cependant, qui retournent un objet avec des propriétés et des méthodes, Express.js retourne une fonction. Pour cette raison, on associe cette fonction à une autre variable (généralement appelée app) qui représente l'application web elle-même :

//Importer le module express
var express = require('express');
//Le module express exporte une fonction, donc associer la fonction à une variable
var app = express();

Première application web avec Express.js

Express.js est un framework basé sur le module http de Node.js (avec quelques éléments en plus). Donc l'architecture d'un service/serveur web créé avec Express.js est assez similaire à un serveur/service web créé avec le module http. Voici un exemple avec des commentaires pour faciliter la compréhension des différents éléments :

//Importer le module express
var express = require('express');
//Le module express exporte une fonction, donc associer la fonction à une variable
var app = express();

//Définir la route principale de l'application et envoyer une réponse
app.get('/', function(request, response) {
    //Express envois automatiquement les headers en fonction du contenu, dans ce cas du text/plain
    response.send("My first express app!");
});

//Le server http écoute sur la porte 9000
app.listen(9000);

//Message pour la console
console.log("Server listening at http://localhost:9000/");

Le changement plus important par rapport à un simple serveur web avec http concerne l'utilisation des "routes" avec la méthode app.get() qui a comme objectif d'intercepter les requêtes en fonction de l'URL. Dans cet exemple, nous spécifions la route "/", c'est-à-dire l'URL même de notre serveur/service web, qui dans notre cas est le localhost avec la porte 9000. Voici le résultat que vous obtenez à l'adresse http://localhost:9000 :

Simple application avec Express.js.

Ce simple exemple ne permet pas d’apprécier les potentialités de Express.js, mais donne néanmoins déjà un aperçu de sa "philosophie" de framework basé sur l'architecture requête/réponse. Dans la suite de cette page, nous fournirons quelques concepts théoriques et quelques exemples pour approfondir cette architecture.

Comprendre Express.js

Express.js permet d'exploiter la structure événementielle de Node.js dans le cadre spécifique des applications web basées sur l'architecture client/serveur et requête/réponse. Pour bien comprendre le fonctionnement de Express.js, il peut être utile de faire une comparaison avec un serveur web "normal" tel que Apache.

Le rôle de l'interprète

Une des différences fondamentales entre un serveur web Node.js/Express.js et un serveur traditionnel consiste dans le positionnement et le rôle de l'interprète du langage de programmation utilisé pour générer des pages web dynamique.

Cycle requête/réponse avec un server web traditionnel

Un serveur "traditionnel" est principalement construit pour servir des pages statiques (i.e. en simple HTML) selon une simple association entre l’URL de la ressource souhaitée et le positionnement des fichiers HTML sur le serveur web. Pour générer des pages web dynamiques, donc, un server comme Apache nécessite de la présence d'un interprète, comme par exemple PHP, qui identifie des pages dynamiques en fonction de l'extension (.php). Dans le cas de ces pages, le serveur exécute les instructions contenues dans le fichier - qui servent normalement à générer du HTML - avant de renvoyer la ressource en tant que réponse. La carte conceptuelle suivante montre le cycle requête/réponse lorsque le serveur utilise un serveur HTTP "traditionnel" :

Cycle requête/réponse avec un server HTTP "traditionnel".

Cycle requête/réponse avec un server web Node.js/Express.js

Le même cycle requête/réponse est par contre très différent avec un serveur créé avec Node.js, comme c'est le cas de Express.js. Node.js permet en effet de créer directement un serveur HTTP qui est chargé de traiter les requêtes faites par un client et générer des réponses, comme par exemple des pages HTML. En d'autres termes, en accord avec le principe événementielle de Node.js, les requêtes faites à travers un protocole HTTP ne représentent qu'un type d'événement particulier, qui peut être géré avec un module http. Express.js est tout simplement un ensemble d'objets (avec des propriétés et méthodes) qui peuvent être utiles pour gérer le cycle requête/réponse. La carte conceptuelle suivante montre ce cycle avec Express.js :

Le cycle requête/réponse avec Express.js.

Single thread vs. Multi thread

À expliquer éventuellement.

Architecture Model-View-Controller

À expliquer éventuellement.

Le concept de "middleware"

À expliquer éventuellement.

Les éléments principaux de Express.js

Express.js se base sur les éléments principaux suivants :

  1. L'application : l'ensemble de tous les éléments qui contribuent au fonctionnement global (i.e. la logique)
  2. La requête : les informations envoyées par le client à l'application;
  3. La réponse : les informations envoyées par l'application au client;
  4. Les routes : les différentes url (i.e. les "entry points") disponibles dans l'application;