Démarrez avec Express.JS

Démarrez avec Express.JS

La création d'applications orientées navigateur avec Node.JS devient fastidieuse. Express.JS est un Framework JavaScript dédié aux applications monopages et multipages hébergées dans l'environnement Node.JS.

Il fournit une fine couche de fonctionnalités d'applications Web fondamentales qui n'obscurciront pas les fonctionnalités de Node.JS que vous connaissez déjà, afin que vous puissiez être sûr que votre application finale sera à la hauteur des performances. Et c'est également idéal pour créer des API robustes, grâce à une pile de méthodes utilitaires HTTP et de middleware prêts à l'emploi.

Voulez-vous commencer? Voici ce que vous devez savoir.



01. Générer une structure viable

Commencez avec Express.JS: générez une structure viable

Présentez les bonnes options de travail pour commencer

Express.JS est fier d'être «sans opinion», c'est-à-dire que le cadre permet au développeur de se mélanger et de faire correspondre en termes d'architectures, de modèles et de moteurs de balisage. Malheureusement, une grande puissance s'accompagne d'une grande responsabilité.

L'équipe de développeurs Express cherche à adoucir le coup en introduisant un générateur de projet. Il arrive sur votre poste de travail sous la forme d'un package NPM, et aidera nos expériences avec le framework suivant:

tamhan@tamhan-thinkpad:~/Desktop/ Stuff/2018Aug/FutureExpressJS/ workspace$ sudo npm install express-generator -g

Le générateur contient également des dizaines d'options de projet - la figure accompagnant cette étape montre la sortie d'aide complète. Par souci de simplicité, nous nous limiterons à un projet basé sur les paramètres par défaut. Lancez son processus de génération avec:

tamhan@tamhan-thinkpad:~/Desktop/ Stuff/2018Aug/FutureExpressJS/ workspace$ express futuretest

Attention: le moteur de visualisation par défaut ne sera pas Jade dans les prochaines versions.

Une fois terminé, le répertoire de travail actuel contient un nouveau dossier appelé «futuretest». Il héberge notre projet de test et doit être configuré à l'aide de la commande de téléchargement de package de NPM. Au moment de l'écriture, le générateur inclut le générateur de vue Jade - le projet prévoit de changer cela dans un proche avenir, vous obligeant à passer un paramètre sélectionnant le moteur de vue prévu. Sinon, demandez l'utilisation de Pug - c'est le successeur officiel du moteur Jade:

cd futuretest/ npm install

02. Comprendre la structure de l'application

Maintenant que le générateur de projet a fait son travail, ouvrons App.js dans un éditeur de choix. Sa structure - très abrégée - se présente comme suit:

var indexRouter = require('./ routes/index'); var usersRouter = require('./ routes/users'); var app = express(); // view engine setup app.set('views', path.join(__ dirname, 'views')); app.set('view engine', 'jade'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path. join(__dirname, 'public')));

Express.JS est hautement modulaire. App.js sert de point d'entrée, où une ou plusieurs fonctions 'use ()' permettent l'ajout de composants destinés à gérer diverses requêtes. Les invocations de 'set ()' vous permettent d'ajuster les paramètres dans le moteur - dont l'un est l'installation du moteur de vue Jade mentionné à l'étape précédente.

L'émission réelle du contenu Web a lieu dans les classes de routeurs. Par souci de concision, limitons-nous à Index.js:

var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;

'get ()' est fourni avec une chaîne de correspondance et un gestionnaire d'événements qui est appelé chaque fois qu'un événement correspondant se produit. Dans notre cas, la méthode de rendu du moteur de modèle choisi est indiquée pour renvoyer le contenu au navigateur de l'utilisateur qui s'est connecté.

03. Exécutez la page Web

À ce stade, nous sommes prêts à tester le site Web pour la première fois. Revenez au terminal contenant l'installation d'Express.JS et appelez NPM start avec l'indicateur de débogage défini:

DEBUG=myapp:* npm start

Lorsque vous avez terminé, entrez http: // localhost: 3000 / dans un navigateur de votre choix pour regarder l'échafaudage créé par le générateur de projet. Une fois terminé, appuyez sur ctrl + C pour fermer la fenêtre et renvoyer le contrôle à l'interpréteur de ligne de commande - gardez à l'esprit que cela ferme également le serveur Web de débogage.

04. Tout est question de routage et de points de terminaison

Premiers pas avec Express.JS: routage et points de terminaison

Trier les bons points d'entrée, ajouter de nouvelles routes et introduire la prise en charge des expressions régulières

Par souci de simplicité, admettons qu'une application web est généralement constituée d'une séquence de points d'entrée. Express.JS les gère via la classe de routeur - considérez-la comme un référentiel de méthodes appelées en réponse à une requête entrante.

L'ajout d'un nouveau point de terminaison à une application se fait en ajoutant un nouveau travailleur dans la file d'attente. Notre exemple généré automatiquement crée deux types de routeur, chacun étant déclenché à l'aide de la méthode 'require':

var indexRouter = require('./ routes/ index'); var usersRouter = require('./ routes/ users');

À l'étape suivante, «app.use» enregistre les routeurs et les connecte aux chaînes de requête. Notre code ajoute en outre un gestionnaire d'erreurs qui est appelé si une URL inexistante est entrée dans le système:

app.use('/', indexRouter); app.use('/users', usersRouter); app.use(function(req, res, next) { next(createError(404)); });

05. Créer un nouvel itinéraire

Ouvrez Users.js et modifiez son code comme ci-dessous:

router.get('/user1', function(req, res, next) { res.send('Future says Hello 1'); }); router.get('/', function(req, res, next) { res.send('respond with a resource'); });

L'ajout de nouvelles routes à Express.JS est un processus mécanique. Saisissez l'objet routeur de votre choix et appelez la méthode correspondant au verbe HTTP que vous cherchez à gérer. Ensuite, passez une chaîne qui sera ajoutée au 'offset' enregistré avec 'app.use'. À partir de ce moment, http: // localhost: 3000 / users / user1 et http: // localhost: 3000 / users / renvoient une réponse valide.

Gardez à l'esprit qu'Express.JS ne se limite pas à la gestion des ressources «GET». 'post ()', 'put ()' et 'delete ()' gèrent les quatre requêtes HTTP traditionnelles, avec des dizaines de méthodes verbales supplémentaires répondant à des besoins plus inhabituels. Enfin, l'objet 'req' donne accès à l'en-tête de la requête - faites-en bon usage lors de l'analyse des paramètres ou des informations client.

06. Correspondance avancée

L'ajout de routes à la main devient fastidieux à mesure que la complexité du programme augmente. Express.JS résout ce problème en introduisant la prise en charge des expressions génériques et régulières. Par exemple, regardez la déclaration suivante qui utilise une expression régulière pour correspondre à diverses chaînes contenant la séquence de caractères dog.

app.get(/.*dog$/, function (req, res) { ... })

07. Acheminement anormal

Bien que la gestion des quatre requêtes HTTP devrait suffire à tout le monde (pointe du chapeau à Bill Gates), Express.JS peut également fonctionner avec des protocoles supplémentaires. Express-WS est un candidat particulièrement savoureux pour cette section - elle étend la portée d'Express.JS pour inclure les communications WebSocket.

Une fois le plugin ajouté au projet principal Express.JS, son activation est effectuée via un appel «require». Il renvoie un objet d'assistance contenant toutes les méthodes sauf une - appelez-le pour établir une connexion entre le routeur et le plugin:

var expressWs = require('express- ws') app); After that, a new method called 'ws()' can be invoked to add new routes based on WebSocket technology: app.ws('/', function(ws, req) { ws.on('message', function(msg) { console.log(msg); }); console.log('socket', req. testing); });

Leur prototype diffère des routes normales en raison de la présence de l'objet «ws» - il permet d'accéder à l'instance WebSocket sous-jacente connectée au client responsable de la connexion.

08. Intégrer des bases de données et des moteurs de modèles

Démarrez avec Express.JS: intégrez des bases de données et des moteurs de création de modèles

Assurez-vous d'utiliser la puissance du riche écosystème de plugins

Être basé sur Node.JS signifie que le riche écosystème de plugins est à votre disposition lorsque vous travaillez sur des applications Web. Par exemple, l'accès aux bases de données SQL et NoSQL - généralement une tâche extrêmement fastidieuse - peut être géré à l'aide de plugins fournis par les fournisseurs de bases de données. Le déploiement réel est aussi simple que l'installation du module NPM nécessaire - si votre code doit accéder à une base de données Redis, ajoutez simplement ce qui suit:

var redis = require('redis') var client = redis.createClient() client.set('stringKey', 'aVal', redis.print) . . .

Bien sûr, SQLite en mémoire est également pris en charge:

var sqlite3 = require('sqlite3'). verbose() var db = new sqlite3. Database(':memory:') db.serialize(function () { db.run('CREATE TABLE lorem (info TEXT)')

Gardez à l'esprit que l'intégration Node.JS ne se limite pas aux plugins de base de données. Les développeurs aventureux pourraient aller jusqu'à inclure des produits comme Tessel, créant ainsi des applications Web pouvant également interagir avec Internet des objets dispositifs.

09. Créer des modèles avec style

Un domaine où les programmes simples et réels diffèrent est la création de vues. Alors qu'un petit exemple de projet utilise généralement des chaînes fabriquées à la main, l'assemblage de grandes bandes de HTML avec une chaîne d'éléments connectés est très ennuyeux.

Les moteurs de modèles fournissent une solution de contournement intéressante. Ils permettent la création de fichiers de schéma prédéfinis, qui peuvent être remplis par programme lors de l'exécution.

Dans le cas de notre exemple de programme, les vues se trouvent dans des fichiers .jade. L'index d'ouverture révèle la structure suivante:

extends layout block content h1= title p Welcome to #{title}

Les expressions entre accolades agissent comme des champs de modèle dont les valeurs doivent être remplacées lors de l'exécution. Index.js appelle le rendu avec un objet paramètre, conduisant au rendu de la page de démarrage illustrée dans la figure accompagnant cette étape:

router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); });

La plupart des moteurs de création de modèles peuvent également analyser des tableaux lorsqu'ils sont fournis avec un modèle d'élément. Dans ce cas, chaque ligne du tableau est affichée avec une instance du modèle DOM - les similitudes avec le modèle d'affichage de liste trouvé dans Android sont purement fortuites. Express.JS n'est pas limité aux moteurs de création de modèles prédéfinis. Si vous avez envie de déployer le vôtre pour une raison quelconque, suivez simplement les étapes décrites ici - en principe, vous devez remplacer toutes les fonctions sauf une.

10. Gérer le contenu statique

Les applications Express.JS contiennent généralement des fichiers CSS et des images. Les servir via la fonction Render est inefficace - une manière plus intelligente impliquerait de les envoyer sur leur joyeux chemin avec une requête HTTP traditionnelle. Cela peut être réalisé via la fonction 'express.static ()', qui peut marquer des dossiers entiers pour l'exportation:

app.use(express.static('public')) app.use(express.static('files'))

11. Modifier le flux d'événements

Enfin, permettez-nous de citer brièvement le terme middleware. Dans le langage Express.JS, le middleware est un ensemble d'un ou plusieurs composants qui s'intègrent dans l'organigramme ci-contre. Ils peuvent ensuite être utilisés pour modifier les demandes à mesure qu'elles transitent par le système de routage - lorsqu'elles sont correctement mises en œuvre, des fonctionnalités illimitées peuvent être obtenues.

En outre, certains composants prêts peuvent être trouvés ici - visitez ce site avant de vous lancer dans un projet de développement à grande échelle.

12. Comment héberger une application Express.JS

Premiers pas avec Express.JS: comment héberger une application Express.JS

Pensez aux plateformes sur lesquelles vous pouvez héberger votre nouvelle création

Tester les applications basées sur Express.JS est facile. Des problèmes surviennent une fois que vous souhaitez que la page devienne accessible à des tiers - car elle est générée par l'environnement Node.JS, il n'y a aucun moyen d'obtenir une image statique adaptée au déploiement FTP sur les services d'hébergement Web.

En théorie, rien ne s'oppose à l'utilisation d'un Raspberry Pi, d'un OrangePi, d'un serveur dédié ou d'une machine virtuelle louée à un service cloud ou à un hébergeur web proposant un hébergement virtuel. Cependant, la location d'une machine virtuelle complète peut vous imposer la responsabilité de maintenir à jour l'environnement d'exécution et le système d'exploitation.

Si cette tâche ne vous convient pas, un fournisseur de plate-forme en tant que service peut être un choix plus attrayant (quoique, dans la plupart des cas, assez coûteux).

De nombreux développeurs considèrent Heroku, avec ses prix indiqués dans la figure accompagnant cette boîte, comme l'étalon-or pour tout ce qui est lié à l'hébergement Node.JS.

Ceci, cependant, est un peu injuste en vérité - Elastic Beanstalk d'Amazon, Cloud Platform de Google et Azure de Microsoft fournissent tous une prise en charge similaire pour l'exécution à distance des charges utiles basées sur Node.JS. Dans tous ces systèmes, le principal problème est la gestion - alors qu'Azure est connu pour ses déploiements lents, d'autres fournisseurs imposent aux développeurs des services back-end difficiles à utiliser de systèmes de configuration extrêmement complexes.

En outre, la version prise en charge de l'environnement Node.JS diffère d'un fournisseur à l'autre. Bien sûr, nous n'avons pas assez d'espace pour couvrir le sujet en profondeur. Visite Tutoriel de déploiement de Mozilla et Express.JS ' performance et fiabilité et Sécurité pages de bonnes pratiques pour certains des problèmes impliqués. Assurez-vous de consulter la documentation du fournisseur pour découvrir d'autres bonnes pratiques.

13. Protégez vos applications pour l'avenir

Démarrez avec Express.JS: pérennisez vos applications

Une foule de nouveaux ajouts doivent être notés

Le cycle de développement d'Express.JS est loin d'être fluide: les développeurs sont bien connus pour leurs fréquents changements d'API nécessitant des réécritures du code client. Le passage de 3.x à 4.x a été particulièrement douloureux, c'est pourquoi la sortie imminente de 5.x pourrait laisser un certain nombre d'entre vous mal à l'aise.

Alors qu'Express.JS 5.0 apporte quelques changements de rupture, leur impact est plus limité. Tout d'abord, un ensemble de fonctions déjà obsolètes est supprimé pour de vrai - si le code les utilise toujours, la mise à niveau vers 5.x nécessite une maintenance.

Les concepteurs de moteurs de vue doivent vérifier la croissance du classement de 'res.render ():' en ce qui concerne les moteurs de rendu de vue, ce qui a conduit à certaines implémentations synchrones de passer. La version 5 du framework améliore les performances en appliquant le rendu asynchrone.

En plus de cela, un ensemble d'améliorations et de changements divers documentés ici voit le retour de certaines fonctionnalités éteintes des versions précédentes - en outre, certains bogues de longue date seront corrigés dans la nouvelle version.

Enfin, sachez que vous pouvez déjà essayer la nouvelle version. Créez simplement une copie de votre code source, saisissez un terminal et entrez la commande suivante pour télécharger une archive de JavaScript de pointe à peine testé. Fais attention.

$ npm install express@>=5.0.0- alpha.1 --save

Cet article a été initialement publié dans le numéro 279 du magazine de conception Web créative Web Designer. Achetez le numéro 279 ici ou abonnez-vous à Web Designer ici .

Articles Liés: