Pile technologique
Avant d’aborder la pile MERN, revenons d’abord sur la définition de la pile technologique. Une pile technologique est un ensemble de technologies que vous utilisez pour créer une application Web, une application mobile ou toute application semblable. Une pile adaptée doit offrir une expérience utilisateur fluide, mais être également évolutive et rentable. Cette « full stack » contient généralement un front-end, un back-end et une base de données.
Les technologies de base du front-end et de l’interface utilisateur sont généralement les mêmes, à savoir HTML, CSS et JavaScript. Selon les exigences du projet, vous pouvez utiliser des bibliothèques et des frameworks, tels que React ou Angular, qui reposent sur ces technologies.
Le back-end se compose d’un serveur où réside la logique de votre application. Vous pouvez l’écrire dans un ou plusieurs langages de programmation comme JavaScript, Java, Python, ou utiliser des frameworks comme Django, Spring, Express.js. Pour exécuter les programmes, votre application a besoin d’un runtime comme Node.js, JRE (Java Runtime Environment).
La base de données centralise toutes les données relatives à l’application. Vous pouvez stocker vos données dans une structure tabulaire (à l’aide de bases de données relationnelles) ou utiliser des systèmes non relationnels, également appelés NoSQL, tels qu’une structure de document ou une structure de graphique, et sélectionner la base de données adéquate. MongoDB, Oracle et MySQL sont des exemples de bases de données.
Qu’est-ce que la pile MERN ?
Les développeurs peuvent personnaliser leur pile technologique en fonction des exigences du projet. Si les technologies sont déjà déterminées, ils peuvent également en choisir une prédéfinie.
MERN est une pile technologique prédéfinie basée sur JavaScript. MERN est l’acronyme de MongoDB, Express, React et Node, les quatre technologies sur lesquelles elle repose.
- MongoDB — base de données de documents
- Express(.js) — framework Web Node.js
- React(.js) — framework JavaScript côté client
- Node(.js) — premier serveur Web JavaScript (runtime)
Express et Node constituent le niveau intermédiaire (application). Express.js est un framework Web côté serveur et Node.js est le serveur JavaScript le plus populaire et le plus puissant. Quelle que soit la variante que vous choisissez, ME(RVA)N est l’approche idéale pour travailler avec JavaScript et JSON de bout en bout.
Comment fonctionne la pile MERN ?
La pile MERN facilite la création d’une architecture à trois niveaux (front-end, back-end, base de données) à l’aide de JavaScript et JSON.
Front-end React.js
Le niveau supérieur de la pile MERN est React.js, le framework JavaScript déclaratif pour la création d’applications dynamiques côté client en HTML. React vous permet de créer des interfaces complexes à l’aide de composants simples, de les connecter à des données sur votre serveur back-end et de les afficher en HTML.
Son point fort : la gestion d’interfaces avec état et son approche axées sur les données, qui nécessite un minimum de code. Ce framework possède toutes les fonctionnalités attendues d’un framework moderne : un excellente prise en charge des formulaires, la gestion des erreurs, des événements, des listes, etc.
Niveau serveur Express.js et Node.js
Le niveau suivant est le framework Express.js, qui fonctionne sur un serveur Node.js. Il se présente comme un « framework minimaliste, rapide et sans opinion », et c’est le cas. Express.js dispose de puissants modèles de routage d’URL (correspondance entre une URL entrante et une fonction serveur) et de traitement des requêtes et des réponses HTTP.
En effectuant des requêtes HTTP XML (XHR), GET ou POST depuis votre front-end React.js, vous pouvez vous connecter aux fonctions Express.js qui alimentent votre application. Ces fonctions utilisent nos pilotes Node.js pour accéder aux données de votre base MongoDB et les mettre à jour.
Niveau base de données MongoDB
Si votre application stocke des données (profils d’utilisateurs, contenu, commentaires, téléchargements, événements, etc.), vous aurez besoin d’une base de données aussi conviviale que React, Express et Node.js.
C’est là que MongoDB entre en jeu : les documents JSON créés sur votre interface React.js peuvent être envoyés au serveur Express.js, où ils peuvent être traités et stockés directement dans MongoDB pour être récupérés ultérieurement (à condition qu’ils soient valides). Si vous développez des applications dans le cloud, MongoDB Atlas vous sera d’une grande utilité. Poursuivez votre lecture si vous souhaitez créer votre propre pile MERN.
Exemple d’une simple requête/réponse utilisant la pile MERN
Une requête HTTP typique (provenant d’un client) exécute l’une des quatre opérations (POST, GET, PUT, DELETE) correspondant aux quatre opérations de base de données (CRUD : créer, lire, mettre à jour, supprimer). Pour y répondre, Express.js fournit des objets de demande et de réponse qui stockent les paramètres requis. La demande HTTP stocke les données fournies par l’utilisateur final et la réponse HTTP stocke les données extraites de la base de données.
Avec le pilote MongoDB Node.js, vous pouvez facilement connecter vos déploiements MongoDB à l’application.
Toutes les technologies de la pile MERN stockent les données dans le même format.
Le front-end, React, stocke les données sous forme d’objet JavaScript, le back-end (application) utilise du code JavaScript et la base de données MongoDB stocke les données au format BSON (Binary JavaScript ON). Express convertit les données entre JS et JSON à l’aide de la méthode .json ().
Node.js permet aux développeurs d’écrire la logique de l’application back-end (côté serveur) en JavaScript. Bien que Node.js fournisse des modules HTTP de base, leur écriture dans Express est davantage optimisée. Express propose également de puissantes fonctionnalités de routage pour obtenir les données requises depuis le bon endpoint. Les développeurs n’ont pas besoin d’écrire de code explicite pour le routage.
Étant donné que le code est écrit dans le même langage de bout en bout (JavaScript), le temps consacré aux conversions lors de la transition entre les couches est considérablement réduit.
Supposons qu’un client souhaite mettre à jour son numéro de téléphone portable par l’intermédiaire d’un portail en ligne. Le front-end, construit à l’aide de React.js, comporterait un formulaire dans lequel l’utilisateur pourrait saisir son numéro de téléphone portable. React utilise le crochet « useState » pour définir le numéro de mobile saisi par le client dans le paramètre de requête.
Le code Express.js extrait le numéro de téléphone mobile de la requête HTTP PUT, le met en correspondance avec le schéma du modèle de données de l’application et applique la méthode correspondante (par exemple, findByIdAndUpdate()) pour effectuer la mise à jour. La réponse est ensuite envoyée via l’objet de réponse HTTP avec un message de réussite ou d’échec.
Regardez ce tutoriel sur la pile MERN pour voir un exemple.
PILE MERN et développement full-stack
La pile MERN est une sorte de pile complète, où les couches technologiques sont prédéfinies. La formation des développeurs full-stack est plus complexe, car ils doivent maîtriser de nombreuses technologies, tandis que les développeurs de la pile MERN doivent uniquement connaître les technologies correspondantes. Les principales différences évoquées ci-dessous vous aideront à choisir entre une pile complète personnalisée et une pile MERN, en fonction des exigences de votre projet :