Comprendre la MERN stack<span class="wtr-time-wrap after-title"><span class="wtr-time-number">14</span> min read</span>
MERN STACK

Comprendre la MERN stack14 min read

On entends beaucoup parler de Mean stack et de Mearn stack depuis quelques années. Je n’en parle pas beaucoup sur mon blog, mais je suis un expert en développement fullstack spécialisé sur MERN.

Dans cet article, je vais donc vous expliquer comment fonctionne la MERN stack, pourquoi l’utiliser, quels sont ses avantages et ses inconveignants

Ce premier guide est une introduction à la MERN, d’autres guides suivront dans l’objectif de vous expliquer plus de choses sur cette technologie. Si vous êtes intéressé, je vous invite donc à suivre mon blog afin d’être prévenu.

C’est quoi la MERN stack ?

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ée fonctionnant différamment 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 peux 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/creer sur lesquels on va pouvoir créer, modifier et lire les données contenues dans mongoDB.

Ces url fonctionnent comme des fonctions. On peux 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ée 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 appellé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 jaime ou écrivez un commentaire sur un site, la page ne se recharge pas ? Et bien c’est grâce à AJAX

Schéma fonctionnement MERN
Schéma illustrant la MERN stack

Pourquoi utiliser la MERN stack

Après cette introduction un peu longue, je vais vous expliquer pourquoi je pense que la MERN stack est un excellent choix si vous voulez développer un site web de qualité. Après cette section, nous verrons les inconvénients, rien n’es jamais parfait.

Avantages sur le backend

Comme je l’ai dit, on peux dissocier la MERN stack en deux parties, le frontend et le backend. Toute la logique de votre base de donnée est totalement isolée de votre site web visible. Ce système implique une chose très importante, votre REST API est réutilisable pour une application mobile ou un logiciel très facilement.

Pensez-y, votre API ne change jamais, elle es la et ses url http ne dépendent pas de votre site visible. Il est donc possible de créer d’autres frontend, par exemple, il est possible de créer deux sites partageant le même système d’utilisateurs très facilement.

Node JS est extrêmement rapide. Le langage de programmation se base sur l’asynchronisme, il est donc très performant. Si votre backend est rapide, les utilisateurs recevront leurs données beaucoup plus rapidement, ce qui améliorera l’expérience utilisateur et réduira le coût de fonctionnement du serveur.

Avantages sur le frontend

React JS est aussi extrêmement impressionnant. C’est un système basé sur le SPA. C’est à dire qu’il n’y à qu’un seul document HTML et que les éléments se mettent à jour via Javascript, et ce sans aucun téléchargement.

Un site React JS est aussi performant que possible techniquement parlant. Les pages web utilisant ce système semblent être sans téléchargement si elles sont bien développés. Cela rends l’expérience utilisateur très appréciable, il peut naviguer sur le site sans temps d’attente.

Si vous voulez développer un site très performant facilitant la navigation des utilisateurs et donc la vente par exemple, React est un très bon choix.

Les désavantages de la MERN stack

Comme je l’ai dit, rien n’es parfait dans le monde de la programmation. Il y a des points qui font que la MERN stack peut être un mauvais choix. Je vais vous les présenter dans cette section afin de vous donner un avis complet sur la MERN stack.

Les désavantages du backend

Comme je l’ai dit, Node JS utilise un système asynchrone . C’est une technologie permettant d’optimiser au maximum les performances d’un programme, en l’occurrence d’un site web.

Le problème, c’est que c’est une technologie assez complexe à maîtriser. Pour apprendre Node JS, il faut beaucoup travailler, bien plus que pour PHP par exemple.

Mongo DB possède aussi un inconvénient. C’est un système qui n’utilise pas le SQL, c’est donc un autre langage à apprendre. Beaucoup de développeurs maîtrisent SQL, ils y sont habitués et changer de système de base de donnée peut faire peur.

C’est néanmoins un système très performant si vous apprenez à le maîtriser, encore une fois c’est beaucoup de boulot.

Concrètement, il y a peu d’iconveignants technique à la MERN stack, c’est plutôt une question d’apprentissage et de maîtrise.

Les désavantages de React JS

React JS possède quelques inconveignants technique. Plutôt des inconveignants d’adaptation. Contrairement aux sites internet normaux qui utilisent plusieurs documents HTML, ici on n’en as qu’un seul et on utilise un système de composants.

Il faut donc s’adapter, apprendre un nouveau moyen de développer sur le web. C’est un apprentissage long, vous allez totalement changer votre manière de réfléchir au développement web.

Enfin, React JS demande de manier les requêtes AJAX, c’est encore une fois un système complexe qui demande une réflexion importante. 

Retenez néanmoins que tout est possible avec un peu de travail ! 

Comment apprendre la MERN stack ?

Avant de terminer, j’aimerai vous parler des différentes méthodes d’apprentissage de la MERN stack.

C’est une technologie très complexe car elle demande de maîtriser 4 technologies distinctes et de les coupler ensemble. Je vous recommande donc de suivre des tutoriels pour ces 4 techno et ensuite, entraînez vous à les coupler ensemble.

Youtube est votre amis. Beaucoup de tutoriels existent et ils sont vraiment pratiques.

Une des méthodes qui m’as permise d’apprendre la MERN stack très rapidement, c’est de lire des livres. Voici quelques liens de livres que j’ai lu et qui pourraient vous permettre d’apprendre beaucoup plus rapidement.

Ces liens sont sponsorisés, vous ne payez pas plus cher mais vous me soutenez financièrement si vous passez par mon site. Les livres sont en anglais.

Pro MERN stack

C’est un livre qui vous donne les bases dans chacune des technologies de la MERN stack. Vous allez apprendre React et toute la technologie du backend. Le livre vous fait construire des applications concrètes afin de mettre en pratique toutes ces compétences.

Globalement, il est bien écrit. Il donne des conseils pour chaque langage et il vous permets de tout mettre ensemble, ce qui est génial !

Learning React

Celui-là, c’est mon livre préféré de programmation tout domaine confondu. Et croyez moi, j’en ai bien lu une centaine.

Les exemples contenus sont juste parfait. La rédaction est top et vous allez avancer très rapidement. Des technologies très pratiques sont aussi enseignées, comme REDUX qui permets de gérer l’état d’une application REACT, un indispensable pour tout site MERN profesionnel.

Sincèrement, si vous voulez commencer REACT, je vous recommande de passer par là. C’est ce livre qui m’as introduit à cette technologie, et il m’as tellement passionné que c’est devenu mon outils de développement web préféré !

En conclusion

La MERN stack permets de concevoir des sites internets rapidement. C’est une solution qui réduits les coûts de serveurs et qui permets d’avoir un site internet avec des performances incroyables. De plus, il est très facile de porter son site web sur une application mobile ou un logiciel grâce à des technologies comme React Native.

Cette stack se base sur une séparation entre le backend et le frontend. Ce sont deux sites totalement différents et le frontend va effectuer des requêtes HTTP au backend. Ainsi, on supprime les temps de chargement et on conçoit un site web utilisant un seul document HTML.

La MERN stack est donc un système extrêmement optimisé permettant de concevoir des site web très complexes et très performant. Puisque toute la stack fonctionne avec Javascript, il est possible de concevoir un site web en entier avec une seule syntaxe.

Si vous maîtrisez Javascript et que vous désirez développer un site web fullstack c’est à dire le front end et le back end, cette stack est une excellente solution.

Si cet article vous as plu, n’hésitez pas à suivre ma newsletter. Vous recevrez un guide gratuit pour bien débuter la programmation !

Vous abonner à notre newsletter

* champ requis

Cet article a 3 commentaires

  1. Article au top. Par contre je ne considère pas l’apprentissage comme un inconvénient. Je m’attendais plutôt à des inconvénients techniques et évolutives mais apparemment pas 😁

  2. Il me semblait qu’au niveau des inconvénients majeurs il y a le référencement, pour ce qui est des sites SPA.Puisque tout est sur une seule page, l’optimisation du référencement est plus périlleuse.

    1. Je comprends cette réfléxion mais c’est un faux problème. Il est possible d’utiliser des méthodes simples comme créer des meta tags et descriptions pour certaines routes. Ainsi, on as le même rendu SEO qu’un site web normal. Effectivement, ça demande un peu plus de boulot mais avec un peu de travail, il n’y aura pas de différences

Laisser un commentaire

Fermer le menu
×
×

Panier