A presentation at Meetfab #1 in in 93170 Bagnolet, France by Arnaud Ligny
Le statique c’est fantastique ! JAMstack, Générateurs & CMS headless
Site Web Dynamique VS Statique 2
Site Web dynamique. “Une page web dynamique est une page web générée à la demande. Le contenu d’une page web dynamique peut donc varier en fonction d’informations qui ne sont connues qu’au moment de sa consultation.” Source : - https://romainlebreton.github.io/ProgWeb-CoteServeur/classes/class1.html - https://fr.m.wikipedia.org/wiki/Page_web_dynamique 3
Site Web statique. “Une page web statique est une page web dont le contenu ne varie pas en fonction des caractéristiques de la demande, c’est-à-dire qu’à un moment donné tous les internautes qui demandent la page reçoivent le même contenu.” Source : https://fr.wikipedia.org/wiki/Page_web_statique 4
Mouvance statique & JAMstack 5
La mouvance statique. “En quelques années, les gestionnaires de contenu statique, Jekyll en tête sont devenus très populaires, de Google à Netflix en passant par Mailchimp, Mapbox ou NodeJS, ils sont partout et sont devenus le choix de la raison pour les sites de contenus à fort trafic. Leurs usages évoluent et de nouveaux services dédiés viennent enrichir et faciliter l’expérience utilisateur des contributeurs et des développeurs.” → La Mouvance statique - Frank Taillandier 6
JAMstack ? JAM = JavaScript + API + Markup “Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.” → https://jamstack.org 7
Les générateurs 8
Les générateurs. - Jekyll (ruby) Hugo (GO) Gatsby (React.js) Next.js (React.js) Nuxt.js (Vue.js) Cecil (PHP) Sculpin (PHP) → https://www.staticgen.com 9
CMS headless 10
CMS headless. “Basically the frontend component of a Headless CMS is decoupled from the actual serving of the website or app.” → https://headlesscms.org Source : Decoupled CMS and Headless CMS 101 11
Architecture 12
Workflow. 13
Cas client : Du Côté de Chez Vous → https://adfab.fr/work/du-cote-de-chez-vous/ 14
Merci ! 😊 Arnaud Ligny arnaud.ligny@adfab.fr arnaudligny.fr
for free. You
can too.