L'éco-conception chez les Shifters

Pitch :

Faire un site d'informations à l'attention de deux populations (Public et Adhérents), développé et maintenu en interne par des bénévoles. Le contenu mise à disposition des Adhérents doit être sécurisé avec un accès utilisant la bd.theshifters.org, le SSO.

Contraintes subies :

• Sécuriser le site avec des pages ayant du contenu privé et du contenu public
• Utiliser des briques logiciels open source
• Utiliser des solutions qui permettront, comme on va s'appuyer sur des bénévoles qui ont peu de temps, des durées d'implications et de niveaux techniques variées, de rapidement être productif sur le projet
• Utiliser un CMS simple à contribuer pour les mêmes raisons que le point juste au-dessus

Contraintes choisies :

• Être cohérent entre le discours et les outils, donc faire un site éco-conçu à impact écologique maitrisé
• Ne pas utiliser WordPress et avoir un CMS headless
• Hébergement respectueux écologiquement et du RGPD pouvant héberger ces solutions techniques

Solutions pour y répondre

• GatsbyJS
  • Propose une génération de site statique se régénérant à la demande des contributeurs et permet de ne pas faire que du statique si le besoin s'en fait sentir un jour
  • Permet de se connecter à de multiples sources de données
  • Possède un cache permettant au moteur de re génération de pages ne re générer que ce qui a été modifié au travers des sources de données
  • A un moindre impact écologique avec une gestion des images performant
  • A de nombreux plugins et une base utilisateurs solide
• Strapi
  • Fonctionnalités multiples "out of the box"
  • Avec un connecteur avec GatsbyJS
  • Contribution simple et claire
  • Permettant de proposer une sorte de page builder pour que les contributeurs ne soient pas totalement contraints par des templates
  • Performant et s'appuyant sur une entreprise qui pilote le core, mais produit restant Open-Source
  • Pas de plugins au début du projet et encore peu aujourd'hui (mais on en utilise qu'un seul, développé par nous et proposé à la communauté Strapi)
• Tailwind CSS
  • Framework CSS permettant d'avoir une documentation claire et facile
  • Qui permet de restreindre les styles proposés afin de respecter complètement la charte graphique
  • Code performant, fonctionnant sur tous les navigateurs et ayant un impact réduit puisque, à la compilation, les styles du framework non utilisés sont supprimés
• Jelastic d'Infomaniak
  • Répond à nos contraintes de RGPD et d'hébergement respectueux de l'environnement
  • Permet d'héberger nos choix technologiques
  • Un déploiement "simplifié"
• NGINX + Proxy OAuth 2
  • Pour répondre à la contrainte de sécurisation, on publie deux versions du site. La sécurité et le routage vers l'une ou l'autre des deux versions est faite par NGINX + Proxy OAuth 2 qui s'appuie sur notre solution SSO
• Meilisearch
  Pour faciliter l'accès à l'information, l'ajout d'un moteur de recherche à été demandé et Meilisearch à été sélectionné.
  • Cette solution permet de répondre à nos contraintes de cloisonnement de contenus, de performance, de simplicité et comme il est auto-hébergeable, au RGPD et respect d'environnement
  • Meilisearch peut être connecté soit à Gatsby, soit à Strapi. Chez nous, c'est Gatsby qui se charge de remplir les index.
    • Gatsby faisant déjà des requêtes GraphQL complexes, il était plus logique de réutiliser le code déjà en place pour simplifier la maintenance
    • Gatsby à déjà connaissance des audiences possibles au niveau des requêtes, il était plus logique de s'appuyer dessus pour créer/updater les indexes
  • Son intégration avec Gatsby se fait avec @meilisearch/instant-meilisearch, gatsby-plugin-meilisearch et react-instantsearch-hooks-web