?

JavaScript

Le côté dynamique de la page est géré par JavaScript

API

Les opérations côté serveur sont remplacées par des API

Markup

Les sites sont servis sous forme de fichier HTML statique

En gros, le site est composé de fichiers HTML statiques avec du JavaScript pour dynamiser tout ça

*Pour rappel, le web c'est juste du HTML et des liens

Mais c’est comme les sites des années 2000 !

Oui ! mais ...

Aujourd'hui, tout est automatique !

Fini FrontPage, Dreamweaver, FTP....

Pourquoi ?

🤷🏽‍♂️

Beaucoup de sites ont un contenu avec une fréquence d'update espacée.

Faire tourner un serveur PHP (ou autre) pour générer une page web qui ne change pas est un non-sens.

*oui, on peut ajouter un système de cache pour éviter ça.

Gérer une infra ? En 2021 ! Sérieusement !

😰

DX ! Meilleure expérience pour les développeurs.

Écosystème varié et outils de développement qui facilitent la vie !

Avantages

🔥

Performance accrue

Les pages du site et les assets sont servis à partir d’un CDN

Meilleure sécurité

Plus besoin de se soucier des vulnérabilités du serveur ou de la base de données

Coût bien moindre

L’hébergement de fichiers statiques est moins cher, voire gratuit

Flexibilité

Si votre site  est soumis à un pic d’activité, le CDN compensera sans problème.

Optimisation

Les éléments du site sont optimisés au déploiement automatiquement

Code source centralisé

Le code source est centralisé sur GitHub ou GitLab en sécurité.

Inconvénients

🌧

Vendre la jamstack a un client demande de la pédagogie

Pas forcement adapté à tous les projets:

• Gros volume de page,
• grosse fréquence de mise à jour.
• ...

Welcome to the Jungle

🤯🤪😨

Écosystème de la jamstack

1 - Hébergement

Le plus simple !

• Netlify
• Vercel
• Render
• Gatsby Cloud
• CloudFlare
• ...

Beaucoup d'offres

Pour des sites simples, les offres "free" suffisent souvent

Sinon comparer les prix et le plus compatible avec le générateur.

2 - Générateur

Ça dépend, ça dépasse

1er type de générateur

Les générateurs de fichiers HTML statiques

• Jekyll (Ruby)
• Hugo (Go)
• Eleventy (JS)
• Cecil (PHP)
• ...

Génère que des fichiers HTML.

Points forts :

• build très rapide
• fichiers légers

Par contre :

• Vous devez ajouter vous-même les dépendances JS, CSS, ...(comme un site normal)
• Certains sont très bons avec des fichiers MD, mais moins avec des data provenant d'une API

2e type de générateur

Les générateurs d'applications statiques

• Gatsby (React)
• Next.js (React)
• Nuxt.js (Vue)
• Scully (angular)
• ...

Génère une Web App sous forme de fichiers HTML et JS.

Points forts :

• optimise tout automatiquement (chunk js, images, etc..)

• agrégation des data

• expérience des visiteurs améliorés

Par contre :

• temps de build plus long
• sites moins rapides au chargement

3e type de générateur

Les générateurs d'applications statiques

• Astro (React, Vue, Svelte)
• îles (React, Vue, Svelte)

🏝

Génère des fichiers HTML avec des composants JS dynamiques !

Points forts :

• on utilise son FW habituel (React, Vue, Svelte)

• optimise tout automatiquement (chunk js, images, etc..)

• site rapide/vitesse de chargement

• expérience des visiteurs améliorés

Par contre :

• ...

Quelle générateur choisir ?

Pas de réponse simple.

• Quel est le besoin ?

• Quelle techno je maîtrise ?

• Faut-il un mode preview ?

• ....

3 - CMS..

...ou pas !

1 - Fichiers

Le contenu sous forme de fichiers

.md, .mdx, .json, .yaml

Avantages :

• plus simple à gérer
• stocké avec le code source
• plus rapide pour le build

Inconvénients :

• moins accessible par les non-tech
• faut maîtriser le markdown
• pas évident pour modeler le contenu (sauf avec MDX)
• multilingue 😬

Edition du contenu :

• directement dans les fichiers
• avec un CMS Git Based (Forestry, Netlify CMS, Tina CMS)

2 - CMS platform

Dato CMS, Prismic, StoryBlock, Contentful,...

Avantages :

• Rien à gérer (serveur, etc.)
• interface pour les non-Tech
• multilingue plus simple
• gestion des images

Inconvénients :

• seulement en lecture
• prix très variables
• création d'une dépendance avec le CMS

3 - CMS self-hosted

WordPress, Strapi, Craft CMS...

Avantages :

• Les data sont chez moi
• Lecture/écriture
• interface pour les non-Tech
• multilingue
• gestion des images

Inconvénients :

• gestion d'un serveur
• il faut ajouter le coût d’hébergement du backend
• gestion du backend

Quelle solution choisir ?

Pas de réponse simple.

• Quel est le besoin ?

• Qui va gérer le contenu ?

• Faut-il un mode preview ?

• Faut-il enregistrer des data ?

• ....

FAQ

☝️

Déployer mon site

la modification du code source sur GitHub déclenche un hook chez Netlify
ou

la modification du contenu sur le CMS notifie Netlify via un webhook

Exemple avec Netlify:

Netlify relance un process de deploiement

La nouvelle version du site est en ligne

Un formulaire

Pour un formulaire de contact, Netlify propose un système pour gérer l'envoi

Utiliser une fonction serverless pour gérer le traitement du formulaire

Utiliser un service externe pour gérer le traitement du formulaire (formspree,..)

Intégrer un formulaire d'un service externe (hubspot)

ou

ou

ou

Recherche

Utiliser le système de recherche de votre CMS

Utiliser un service externe

type Algolia

Utiliser un système self-hosted

type meilisearch

ou

ou

Un espace sécurisé

Possible uniquement sur les générateurs de web app

On crée des pages avec un système de middleware qui contrôle l'accès. Et surtout, on génère le contenu des pages uniquement côté client !

Beaucoup de pages !

Avec la génération incrémentale !

Pourquoi ?

Problème de déploiement à cause du poids du site

Preview du contenu

Avec certains frameworks

NextJS, Gatsby

Avec certains hebergements

Gatsby Cloud

Avec certains CMS

ou

ou

E-commerce

Avec un service Headless

Shopify, BigCommerce..

et

je développe mon site from scratch ou avec une solution type Vue Storefront

Intégration d'une solution type SnipCart

ou