JAMStackvsMERNStack

C'est LA question que se pose tout bon développeur web : avant de me lancer dans mon projet de site internet responsive, e-commerce, application web ou mobile, quelle pile technologique choisir pour réaliser mon développement ?

Si nous avons déjà évoqué par le passé notre stack préférée chez Blacksmith et avons déjà consacré un article à la JAMStack, nous allons dans cet article nous concentrer sur les différences entre JAMStack et MERN Stack, une autre stack populaire dans le monde du développement web.

Pourquoi ce comparatif avec la stack MERN (MongoDB, Express, React, Node) et pas avec la stack LAMP (Linux Apache MySQL PHP), très plébiscitées par les développeurs du langage web PHP ?

Car si LAMP, est une des stacks les plus populaires (elle est utilisée comme base sur les CMS Drupal ou Wordpress, très répandus sur le web mais aussi par les développeurs Symfony, Laravel, etc.), nous souhaitons comparer 2 stacks dans le langage de programmation JavaScript, comme pourrait être amené à le faire un développeur rigoureux JS ou TypeScript en réflexion pour sa création de site ou d'applications web.

Le MERN Stack permet aux développeurs web de créer des web apps complexes en se basant sur des technologies web open source Javascript.

MongoDB est une base de données non-relationnelle, qui permet de stocker des données sans avoir à utiliser le langage SQL, mais en utilisant plutôt le JS pour stocker les données en utilisant le format JSON.

Express est utilisé pour créer les routes API (interface de programmation d'applications) et gérer les requêtes HTTP entrantes.

Côté front, les développeurs web et intégrateurs pourront se baser sur React.js, un framework Javascript très puissant, créé par les ingénieurs de Facebook et qui permettra d'intégrer des maquettes responsive (formats desktop, mobile, tablette...) créées sur mesure par un webdesigner.

Côté serveur, les développeurs backend pourront travailler en utilisant Node.js (ou Nest.js, le framework TypeScript basé sur Node.js).

Si un dev web souhaite développer un produit avec de gros traitements sur les données, MERN peut être une bonne solution.

C'est aussi pratique pour les développeurs full stack qui vont coder tout le produit dans le même langage (en JS).

Le principal inconvénient de cette stack : elle n'est pas prévue pour utiliser des bases de données relationnelles. 

Envie de tester la stack MERN ? Voici un tutoriel !

La JAMStack permet de développer facilement des sites statiques générés.

Cette stack est très légère et présente des avantages certains en termes de coûts d'hébergement, puisqu'elle ne nécessite pas d'intéractions avec des bases de données.

Elle est parfaite pour la création de sites web s'appuyant sur des SaaS tiers ou, des sites vitrines ou encore des blogs.

Qui dit site statique ne dit pas "figé", vous pouvez avoir des sites JAMStack avec des pages web statiques présentant de nombreuses animations, micro-intéractions et dont le contenu est entièrement géré via un backoffice, comme ça serait le cas pour des sites réalisés avec des CMS comme Wordpress et n'utilisant pas la JAMStack.

Les sites internet développés en JAMStack sont globalement plus fluides, plus sécurisés (moins d'interactions avec un serveur backend), plus économiques à héberger et plus écologiques que des sites basés sur une stack LAMP ou MERN.

Comme en JAMStack on essaye de limiter le nombre d'appels vers des bases de données, cette pile techno va être plus axée sur la partie front-end que sur des problématiques de traitements backend. 

Si vous souhaitez récupérer des informations de façon dynamique, nous vous conseillons d'utiliser le système de hooks SWR.

Comme pour MERN, la JAMstack est une technologie adaptée pour du développement sur mesure, mais qui ne permet pas à quelqu'un qui n'est pas développeur de modifier facilement la structure du site comme le permettrait par exemple un "page builder" Wordpress.

Comment mettre en place un site vitrine responsive avec la JAMStack ? Chez Blacksmith nous aimons procéder de la façon suivante :

• Utiliser un Framework tel que React.js (développé par Facebook) ou Next.js pour gérer la partie intégration et dynamisation du Frontend

• Mettre en place le CMS Headless de notre partenaire Strapi pour créer l’API Rest et opérer la gestion de contenu du site depuis un back-office dédié

• Utiliser Next.js pour générer les pages en code HTML statiques (le "Markup") qui seront interprétées par les navigateurs

Pour compléter cela, le développeur full stack pourra ajouter
- un pipeline d'intégration et déploiement continu (CI/CD) afin de générer une nouvelle version de site et d'automatiser la mise en production dès qu'un développeur poussera une modification de code ou qu'un utilisateur effectuera un changement de contenu depuis le CMS. On peut utiliser par exemple le pipeline de Github (ou autre source control hébergeant votre code-source).
- l’hébergement via un CDN, en ce qui nous concerne, nous utilisons #Vercel et #AWS Amplify mais on peut également utiliser netlify :)

Même un développeur junior peut découvrir en autodidacte la JAMStack grâce au site https://jamstack.org/ qui permet d'en apprendre plus et de se former à la création de site internet en JAMStack.

Comme nous avons pu le voir dans cet article, la JAMStack et la MERN Stack présentent chacune leurs avantages et inconvénients en fonction du type d'application ou de site qu'on souhaite concevoir et développer dans le langage de programmation JavaScript.
On pourra être amené à choisir l'une ou l'autre des stack en fonction des situations se présentant au cours de son métier de développeur et des langages de programmation qu'on souhaite utiliser dans ses projets web ou pour développer des applications web.

Les deux stack permettent de créer des produits développés et designés sur-mesure, mais ont chacune leurs spécificités :

• si vous souhaitez développer une webapp complexe, nous vous conseillons de partir sur une stack MERN pour votre projet web

• si vous souhaitez développer un site vitrine fluide et à l'hébergement économique, nous vous conseillons de partir sur une stack JAMStack

Envie de voir à quoi ressemble un site développé en JAMStack ?

Voici quelques exemples de sites issus du portfolio de notre agence de design et développement web & mobile :

• Vyder

• Skillwise

• FHU Apollo (AP-HP)

• ... sans oublier le site Blacksmith sur lequel vous êtes actuellement :)

Dans tous les cas, si vous souhaitez créer un site ou une app web ou mobile en JAMStack ou MERNStack et que vous avez besoin d'aide, n'hésitez pas à nous contacter à partners@blacksmith.studio ;)