Outils pour sites statiques modernes à l’intention du développeur paresseux

David Sferruzza

Bonjour à tous !

Je m’appelle David, je développe des sites web (depuis une quinzaine d’années) et je suis paresseux (depuis toujours).

Des sites web ?

La terminologie est variée :

  • site web

  • application web

  • services web

  • site Internet


Il n’y a pas de définitions formelles, c’est parti pour les abus de langage !

Le principe du site web

On a un logiciel qui s’exécute sur un serveur pour délivrer du contenu grâce au protocole HTTP d’un bout à l’autre du réseau Internet.

Les navigateurs web permettent d’appeler ces contenus, de les interpréter et de les afficher.

Sites web : deux familles, deux ambiances

1/ Sites statiques

On utilise un logiciel de serveur web standard (Apache, nginx, …​) qui va servir du contenu inerte.

Le contenu a été écrit préalablement.

2/ Sites dynamiques

On développe une application qui va recevoir chaque requête HTTP et générer une réponse potentiellement personnalisée.

Dynamisme 🤘

Le principe des sites dynamiques est beaucoup plus puissant !

  • on peut faire pareil ou plus que les sites statiques

  • on peut implémenter des comportements arbitraires

Dynamisme 😬

Sauf que tout ça a un coût en :

  • complexité du système

  • dépendances à d’autres logiciels

  • intégrité des données

  • étendue de la surface d’attaque

  • performances

  • …​

Dynamisme 😇

Heureusement, on peut affronter ces problèmes grâce à :

  • la recherche scientifique

  • des innovations industrielles

  • des professionnels du logiciel

  • des outils libres

Content Management System

Un CMS est un site dynamique pré-développé pour gérer du contenu sans avoir besoin de connaissances techniques.

Exemples : WordPress, Drupal, Joomla!, PrestaShop, …​

Quelques éléments de différentiation :

  • hypothèses sur le contenu

  • interface d’édition du contenu

  • extensibilité

  • écosystème (thèmes, add-ons)

CVE liées à WordPress 😬

CVE liées à WordPress

CVE liées à WordPress 😬

CVE liées à WordPress

Prenons du recul

Tout est compromis

En général, quand on fait un site web, le problème n’est pas de trouver une solution qui marche mais d’évaluer les risques/opportunités des solutions qui marchent pour choisir la meilleure.

En réalité

C’est vraiment très difficile. Il y a énormément de paramètres.

→ On choisit souvent à l’instinct 😅

Plot twist 😱

Limitations :

  • les biais cognitifs

  • les évolution de l’écosystème

  • les connaissances imparfaites

→ N’arrêtez jamais d’apprendre 🙏

Sites dynamiques

Parfois, c’est cool de faire un site dynamique :

  • les cas d’usage l’imposent

  • accès à des abstractions

  • …​

Parfois, c’est cool d’utiliser un CMS :

  • pas besoin de réinventer la roue

  • pas besoin de développeur

  • on a l’habitude

  • …​

Aujourd’hui on va parler des autres cas 😄

Le projet du jour

Parfois, on veut un site :

  • au contenu gérable par des non-développeurs

  • pour délivrer du contenu (peu d’interactions)

  • au rendu spécifique et performant

  • facile à maintenir sur le long terme

Bienvenue dans ma conférence !

Avec les bonnes techniques, on peut satisfaire ces contraintes avec un site statique !

Approche naïve

On édite et déploie manuellement des fichiers HTML, CSS, JS, …​

On utilise Git pour versionner tout ça 🙏

  • ❌ travail répétitif, pas d’abstractions/d’outils

  • ❌ déploiement sujet à erreurs humaines

Générateur de sites statiques

On ajoute une étape de construction pour séparer :

  • ce que le développeur écrit

  • le produit fini (un site statique)

Ça permet d’utiliser des abstractions et des fonctionnalités pré-développées.

  • langage de gabarit (templating)

  • pagination

  • blog (et flux RSS)

  • …​

Choisir un générateur

Il en existe plein. Quelques critères :

  • usage principal, fonctionnalités

  • format d’entrée

  • extensibilité (⇒ langage utilisé)

  • écosystème (modules, documentation, …​)

  • facilité d’installation

Exemples : Jekyll, Hugo, Gatsby, …​

Avec un générateur

Une fois la techno choisie et maîtrisée, le développement du site est plus rapide et sa maintenance bien plus facile !

Comme on a déjà payé le prix d’avoir une étape de construction, on peut l’exploiter encore plus (webpack, …​).

  • ✅ travail répétitif, pas d’abstractions/d’outils

  • ❌ déploiement sujet à erreurs humaines

Intégration continue

Un système lance des tâches à chaque fois qu’une nouvelle version du code est publiée.

  • générer (produire des artéfacts)

  • vérifier (éviter le "ça marche sur ma machine", lancer les tests automatisés)

  • déployer

Pour un site statique, on veut surtout générer le site et le déployer.

GitLab CI

C’est le système d’intégration continue lié à GitLab. Il est top 👌

variables:
  DEBIAN_FRONTEND: noninteractive
  NODE_VERSION: 14

build:
  stage: build
  image: ruby:2.6-stretch
  script:
    - curl -sL https://deb.nodesource.com/setup_$NODE_VERSION.x | bash -
    - apt-get install -y nodejs
    - npm install
    - npm run build
    - bundle install
    - bundle exec jekyll build
  artifacts:
    paths:
      - _site/
  tags:
    - docker

Avec un générateur + CI

  • ✅ travail répétitif, pas d’abstractions/d’outils

  • ✅ déploiement sujet à erreurs humaines

  • facile à maintenir sur le long terme

  • ❌ contenu gérable par des non-développeurs

Gestion du contenu

Dans la plupart des générateurs, le contenu est à écrire en Markdown et il faut savoir manipuler Git.

→ C’est un frein pour les non-développeurs 🤢

Gestion du contenu

Heureusement, il existe des services d’interface graphique d’édition :

  1. On configure le schéma des données

  2. On saisit les contenus via une interface graphique

  3. À chaque génération du site, on récupère les contenus via une API

Exemples : Contentful, Prismic, Strapi, …​

Contentful

contentful

Contentful : schéma

schema

Contentful : édition

data

contentful2md

contentful2md
#!/usr/bin/env sh

export CONTENTFUL_SPACE="..."
export CONTENTFUL_ACCESS_TOKEN="..."
export CONTENTFUL_PREVIEW="true"
export CONTENTFUL_CONTENT_TYPE_ID="post"
export CONTENTFUL_LOCALE="fr-FR"
export OUTPUT_DIR="src/_articles"

npm run contentful2md

Naddymess

naddymess

Écrire un article Naddymess

  1. Avoir une idée stupide disruptive

  2. Écrire l’article dans Contentful

  3. Créer un pipeline dans GitLab

  4. Attendre ~1 min

Absurde Séance

absurde

Ajouter une séance Absurde Séance

  1. Obtenir les droits d’un film stupide

  2. Éditer un CSV avec LibreOffice (ajouter une nouvelle ligne avec diverses informations concernant la séance et le film)

  3. Commit & push avec Git

  4. Attendre ~6 min

Conclusion

Besoin :

  • site web avec peu d’interactions

  • 1+ développeur à disposition

  • (contenu gérable par des non-développeurs)

Conclusion

Bilan (site statique) :

  • facilité de développement
    (versionnement, abstractions, outils)

  • facilité d’édition
    (admin UI, CI/CD, multiples sources de données)

  • avantages des sites statiques
    (sécurité, performances, simplicité)

→ Je peux maintenir une dizaine de sites sans effort 😎

NetlifyCMS

  1. L’admin est embarquée dans le site statique

  2. Les modifications sont persistées grâce à l’API de GitHub/GitLab/Bitbucket

  3. Chaque modification entraîne un re-déploiement du site

NetlifyCMS

Bilan :

  • potentiel : 🤩

  • mise en place : 😣

  • utilisation : 😐🙂

→ Tout n’est pas fluide mais ça évolue, à surveiller !

Questions ?

question

Twitter: @d_sferruzza

Slides sur GitHub :