MERN signifie “mongodb, express, react, nodejs”, c’est une combinaison de 4 technologies vous permettant de créer un site web de A à Z, le frontend et le backend.
Le gros avantage de la MERN stack, c’est que l’on utilise uniquement le javascript, REACT côté client et NodeJS côté serveur.
Le point central de la MERN stack, c’est la capacité de développer un site web seul. Dis comme ça, on peux avoir l’impression que c’est évident, tout les développeurs webs peuvent créer un site web de A à Z non ?
Et bien, absolument pas. La grande majorité des développeurs web ne savent créer qu’un côté du site web. Soit la partie base de donnée, algorithme et logique, c’est à dire le backend. Ou la partie design, expérience utilisateur et animations, c’est à dire le frontend.
Les développeurs fullstack sont en mesure de gérer les deux côtés, c’est une compétence extrêmement recherchée. Les petits buisness n’ont pas les moyens de recruter deux développeurs, un fullstack sera donc mieux payé et beaucoup plus solicité.
La MERN stack, c’est la combinaison des technologies les plus puissantes et les plus versatiles sur le marché. On entends d’ailleurs aussi parler de MEAN stack. Dans ce cas, on remplace REACT par AngularJS, un autre framework permettant de gérer le frontend.
Comment fonctionne la MERN stack ?
Il me semble important de comprendre comment fonctionne chaque technologie contenue dans la MERN stack. Dans cette partie, nous allons donc voir à quoi correspond exactement chaque lettre.
M pour MongoDB
Mongo DB est un système de base de données fonctionnant différemment du SQL. On n’utilise pas des tables mais des documents contenant des données sous format JSON.
Les documents MongoDB permettent de stocker beaucoup de données et d’établir des relations comme n’importe quel système SQL.
Dans la MEAN stack, on utilise MongoDB parce que les données sont gérées en JSON. Puisque ce langage provient initialement du Javascript, vous vous doutez qu’il est extrêmement simple de directement convertir des données de Javascript vers MongoDB et vise versa.
Pour se faire, il existe des librairies comme mongoose qui traduisent directement vos documents vers des objets et listes javascript directement utilisable dans vos programmes. La manipulation des données est donc extrêmement simple et efficace.
N pour Node JS
Alors, je sais que ne je vais pas dans l’ordre, mais il est important de prendre le N pour comprendre le E.
Node JS est un langage de programmation utilisant la syntaxe de Javascript. Vous comprenez donc que c’est un langage qui fonctionne en conjonction avec Javascript. Il est beaucoup plus simple de faire communiquer les deux parties.
De plus, si vous maîtrisez déjà javascript, apprendre Node JS sera beaucoup plus simple, et vise versa.
Enfin, node JS est un langage de programmation extrêmement rapide. Bien plus que tout les autres langages de programmation web. Il utilise la technologie asynchrone pour gagner en puissance et en vitesse. C’est une technologie difficile à maîtriser mais extrêmement performante entre de bonnes mains.
Beaucoup de grandes entreprises utilisent Node JS. Si vous utilisez des systèmes de chat en ligne comme facebook, vous pouvez être sur que c’est Node JS derrière la machine.
E pour Express.js
Vous savez ce qu’on utilise pour la base de donnée, vous savez quel langage on utilise pour le serveur, mais comment créer un serveur web ? Et comment manipuler la base de donnée ? Et bien c’est là qu’express entre en jeux.
Express c’est un framework permettant de développer un site web facilement et efficacement. Il utilise le système de middleware permettant d’empiler des fonctions afin de créer un site web complexe.
Avec express, on ne va pas directement créer le site web sur lequel l’utilisateur va se connecter. On va créer la REST API
Une rest API, c’est un site web qui va permettre de récupérer des données et de les modifier via des requêtes HTTP. On exécutera donc ces requêtes sur la partie React afin de récupérer des données et de les enregistrer.
R pour React.js
Parlons pour finir de React JS. C’est la technologie qui va nous permettre de créer la partie visible du site web.
React JS est un framework SPA . C’est une technologie qui permets de rendre tout le site web en Javascript. Cette méthode va rendre votre site beaucoup plus rapide puisqu’il n’aura jamais à télécharger de contenu statique.
Les animations, les transitions et les chargements sont bien plus rapides.
Sans trop rentrer dans les détails, React fonctionne avec un système de composants. On crée des bouts de code qui rendent de l’HTML et on peux les utiliser dans différents parties de notre site web, ce qui permets de réduire énormément le temps de développement.
De grands sites webs comme Netflix ou Facebook utilisent React. C’est le choix par excellence si vous voulez créer un site web extrêmement rapide.
Pour finir, sachez que React permets aussi de créer des applications mobiles et des logiciels. Il est donc possible de porter votre application sur plusieurs supports.
Comment est-ce que tout fonctionne ensemble ?
Maintenant que vous comprenez comment chaque partie fonctionne individuellement, je vais vous expliquer comment est-ce qu’une application MERN utilise toutes ces technologies en conjonction pour créer des applications puissantes et portatives.
On peut facilement découper la MERN stack en deux grands blocs. Comme un site web classique qui possède un backend et un frontend, la MERN stack possède aussi cette coupure.
MongoDB, Node JS et express permettent de développer la partie backend. Sur un site internet normal, cette partie va se charger de manipuler les bases de données, mais aussi de gérer les routes et le rendu des scripts / documents html.
Dans le cas de la MERN stack, notre but va être de créer des url , par exemple : site/utilisateurs/créer sur lesquels on va pouvoir créer, modifier et lire les données contenues dans MongoDB.
Ces url fonctionnent comme des fonctions. On peut voir les appels HTTP comme des déclencheurs. On donne des données dans la requête et le serveur s’occupe de modifier dans la base de données et de tout renvoyer sous format JSON (lisible directement par javascript)
Et c’est la qu’entre la seconde partie de la MERN stack, React. Cette technologie va exécuter ces requêtes HTTP de manière invisible à l’utilisateur grâce à une technologie appelée AJAX.
Ainsi, on peux avoir des téléchargements de données dynamiques sans avoir à recharger la page, ce qui rends le site internet beaucoup plus rapide que la moyenne.
AJAX cache toutes les requêtes, l’utilisateur aura l’impression que les données auront toujours étées là alors qu’elles viennent d’être téléchargées. Pensez-y, lorsque vous mettez un j’aime ou écrivez un commentaire sur un site, la page ne se recharge pas ? Et bien c’est grâce à AJAX.
Comments