La Jamstack va devenir un nouveau "standard"

Le développement Web a subi plusieurs évolutions majeures.
La dernière en date selon moi est la prolifération des frameworks Javascript côté frontend.

J’aurais pu parler de l’adoption en hausse de GraphQL, mais pour moi ce n’est qu’un détail…

Le problème induit par les Single Page Application c’est qu’on déplace un traitement autrefois effectué sur un serveur backend vers le frontend.
La construction de la page est alors gérée par du code Javascript directement dans le navigateur.
Le backend perd en responsabilité et devient alors un moyen de faire transiter de la donnée.

Entre temps, on s’est rendu compte des impacts sur la SEO et on a fait une demi-machine arrière en “créant” le Server Side Rendering…
Le SSR permet de générer le rendu d’une SPA côté serveur.

Autrement dit, on fait la même chose qu’avant, mais en plus compliqué…


Des évolutions trop rapides ?

Le web évolue rapidement, c’est à la fois une bonne et une mauvaise chose.
On ne contrôle pas forcément ce que deviennent les technologies, mais parfois j’ai un peu l’impression qu’on tourne en rond.

J’ai l’impression que l’industrie peut changer de standard d’un jour à l’autre.
Libre à toi de suivre ou pas, au risque de te retrouver sur la touche dans quelques mois…

Le pire qui puisse arriver c’est que tu ne prennes pas le train en marche.

Mes amitiés à tous ces développeurs backend qui ne considéraient pas le Javascript comme un langage et qui ne voyaient aucun intérêt à développer une SPA…

Tu as beau avoir raison (ou tord), quand le marché change, tu n’as pas le choix.

Quand j’ai entendu parler de la Jamstack pour la toute première fois, je me suis méfié.
Encore une technologie révolutionnaire, j’ai égoïstement pensé qu’il fallait d’abord laisser les early adopters essuyer les plâtres.

Quelques mois après, j’ai fini par tester GatsbyJS.
C’est une chose d’explorer un sujet, mais le mettre en pratique fait passer à un autre niveau.


Je n’étais pas prêt !

Dès les premières lignes de code, je me suis posé la question : “mais pourquoi on ne l’a pas fait plus tôt ?!”

GatsbyJS est un framework Jamstack basé sur React et GraphQL.

React te permet de développer des pages avec un framework que tu connais sûrement déjà.
GraphQL lui, te permet de requêter les données disponibles dans ton projet.

Ce qui m’a frappé, c’est la facilité avec laquelle il est possible de créer un site de A à Z.
Si tu n’as jamais entendu parler de la Jamstack, il te faut une piqûre de rappel (sinon tu peux sauter au paragraphe suivant).

La Jamstack est une forme d’architecture Web définie autour de 3 piliers.

Du Javascript, comme langage utilisé dynamiquement dans le navigateur.

Des API, pour interagir avec des systèmes ou services externes via HTTPS.

Jusque-là rien d’inhabituel…

Du Markup, pour générer du contenu HTML statique.

Là on tient quelque chose de différent.


Le markup permet de générer du HTML directement hébergé dans un CDN.

La particularité de la Jamstack c’est que le build de l’application va accéder à de la donnée pour générer un maximum de contenu sous forme de fichiers HTML pour être directement servis par un Content Delivery Network.

On déplace alors une partie des traitements précédemment effectués pendant l'exécution d’un applicatif vers le build de l’application.

Prenons l’exemple d’un blog.

Admettons que tu gères tes articles dans un CMS.
Dans une architecture Jamstack, ton process de build viendrait générer les pages html de chaque article.

À chaque modification ou publication d’article, un build incrémental viendrait mettre à jour le contenu statique.
Une fois le contenu généré, plus besoin de serveur applicatif.

Ton CMS n’est utilisé qu’au moment du build.


Pourquoi la Jamstack ?

L’avantage de la Jamstack c’est qu’elle embarque des bonnes pratiques dès la conception.
Elle permet une augmentation des performances.

Le contenu étant servi directement par un CDN, plus besoin de faire un aller-retour entre le serveur web et la base de données.

En supprimant les serveurs applicatifs et la base de données de la chaîne, on réduit le risque de failles de sécurité.
L’utilisation d’un CDN permet entre autres de scaler à moindre coût.

En effet, mettre à l’échelle du contenu HTML prégénéré est un jeu d’enfant.
Il suffit d’utiliser un service comme AWS Cloudfront, Firebase Hosting ou Netlify…

La mise en cache du contenu est gérée automatiquement par le système de build.

Plus besoin de se battre avec des ressources plus à jour…
La Jamstack apporte le chaînon manquant du web moderne en brisant les dépendances fortes aux systèmes de données.


Pourquoi GatsbyJS ?

Qui dit Jamstack ne dit pas forcément GatsbyJS.
J’ai choisi GatsbyJS parce qu’il est basé sur React et GraphQL.

Les communautés de ces deux projets étant énormes, ça facilite la recherche de ressources.
Le détail qui a fait mouche chez GatsbyJS, c’est sa simplicité d’utilisation.

GatsbyJS fonctionne sur un système de plugin.

La marche à suivre est relativement rapide :

Avant pour récupérer des données depuis une API, il fallait créer un client HTTP avec ta librairie préférée (Axios, fetch).
Créer des services et coder tous les appels.

Avec GatsbyJS, c’est plié en 10 minutes, le tout saupoudré de GraphQL !
Ça faisait longtemps que je n’avais pas vu quelque chose d’aussi efficace !

Une fois ta source de données ajoutée, GatsbyJS se charge du reste.
Tu peux développer tes pages, tout le contenu statique sera généré pendant le build.


Pourquoi s’en passer ?

Que tu sois un développeur freelance qui crée des sites vitrines, ou développeur web et ce peu importe ton langage backend, un outil comme GatsbyJS peut vite devenir incontournable.

La raison est simple, il te fait gagner énormément de temps.

Je crois qu’il n’y a pas de meilleur argument…
J’ai créé un contenu qui peut te permettre de sauter le pas.

Je l’ai compilé dans une nouvelle formation.

Dans cette formation, je crée mon portfolio en récupérant de la donnée depuis différentes sources : Ghost, Youtube Api, Markdown…

De quoi bien prendre en main la philosophie de GatsbyJS et de la Jamstack par la même occasion.

Cette formation, je l’ai appelée :

GatsbyJS Portfolio : devenir un as de la Jamstack

Pour le lancement, je t’ai créé un code qui te donne accès à une réduction de 80%, valable seulement jusqu’à mardi soir minuit. Après il sera trop tard...

Accéder à l’offre


Le but de cette formation

L’objectif court terme est de te permettre de mettre un pied dans la Jamstack.

Apprendre les bases de l’utilisation de GatsbyJS via un projet simple, développer un portfolio en accédant à plusieurs sources de données.

Une fois la Jamstack appréhendée, tu pourras monter en compétences bien plus facilement sur les problématiques de performances inhérentes au Web.


La Jamstack, est-ce vraiment efficace ?

Parler de technologies révolutionnaires, c’est une chose.
Analyser les résultats concrets en est une autre.

C’est à ce moment qu’entre en jeu Smashing Magazine.
Smashing Magazine est un média orienté création de produits tech :
Développement web, mobile, design, UX, UI, Photoshop…

Leurs résultats après migration de Wordpress vers la Jamstack sont édifiants.

Le temps du premier chargement est divisé par 10 !
Il passe d’une moyenne de 800ms à 80ms.

En termes de volumétrie, on parle ici de milliers d’articles et d’environ 20K commentaires.
On n’est clairement pas sur le site vitrine de l’artisan du coin…

Je te laisse le lien d’un article expliquant leur migration.


Pilule bleu ou rouge, deux options

L’option 1: continuer d’apprendre seul, ça te prendra surement plus de temps, tu devras lire la documentation de bout en bout… Faisable, mais pas optimal !

L’option 2: capitaliser sur la formation pour éviter de perdre du temps !
Prendre un raccourci, c’est toujours plus agréable !


Ce que tu vas apprendre

Pourquoi se compliquer la vie ?

Le retour sur investissement de GatsbyJS est ultra-simple.

Se simplifier la vie et gagner du temps.
Le fonctionnement de GatsbyJS rend la création d’un site statique simple et ultra-efficace.

Pas besoin de passer des jours à écrire du code pour brancher tes sources de données.
De plus, l’architecture Jamstack par nature te permet de déployer des sites fiables, sécurisés et performants.


Comment commander et suivre ?

C’est une formation vidéo, je code en live et je t’explique tous les détails en voix off.
Une fois la formation commandée, elle sera disponible à vie dans ton espace élève.

Tu auras aussi accès à la version finale du projet.

Bien sûr j’utilise des clés d’API que tu ne peux pas réutiliser telles quelles.
Si tu désires recopier le projet, il te faudra un accès à un blog Ghost et une chaine YouTube.

Une chaine YouTube est automatiquement créée si tu disposes d’un compte Google…

Mon conseil est de regarder la formation en entier en vitesse x1.5  ou de la regarder module par module en faisant avancer ton code.

Si besoin tu peux revenir sur certains chapitres ultérieurement…
Je te conseille vivement de partir sur ton propre portfolio.


Les prérequis

Cette formation nécessite de connaître les bases de React.

Le code final est un dossier zip qui contient un dépôt Git.

Tu peux t’en servir pour voir les différents commits mais Git n’est pas un prérequis bloquant pour suivre la formation.

La formation a une durée totale d’environ 4h30 (on me pose souvent la question).
Considéré par certains comme un gage de qualité, j’estime que ce sont deux facteurs complètement décorrélés…

À toute suite dans la formation !