Le Rugbynistère v2

En 2016, j'avais recodé entièrement le site du Rugbynistère sous Laravel, puis enchaîné deux ans d'évolutions continues. 2018 a été l'année où nous sommes revenus sur les bases elles-mêmes : le site n'avait pas cessé de grossir, le trafic avec lui, et une grosse partie des composants a été redéveloppée pour améliorer les performances globales. Refonte et évolutions comprises, le chantier a duré environ neuf mois.

Une API globale, et Vue.js pour en consommer les données

Le coeur du travail a été le développement d'une API globale, gérant la quasi-intégralité du site. Passer par une API change la nature du code : les pages ne vont plus chercher leurs données en base, elles interrogent un point d'entrée unique qui répond dans un format neutre. L'intérêt de ce découplage : un même jeu de données peut alimenter plusieurs clients sans être réécrit pour chacun.

Côté navigateur, c'est Vue.js qui traite ces données : un framework JavaScript qui met à jour l'affichage quand l'état change, sans manipuler le document à la main. La rubrique Transferts figure toujours dans la navigation du site aujourd'hui.

Un cache JSON en base, pour ne pas recalculer deux fois

Le second levier de performance a été un système de cache maison, qui stocke les données au format JSON en base pour réduire le nombre de requêtes serveur. Le principe vaut pour tout site à forte audience : une même page d'actualité est servie un très grand nombre de fois à l'identique, et la reconstruire à chaque visite revient à refaire un travail dont le résultat n'a pas changé. Conserver la réponse déjà assemblée coupe court à cette répétition. Ce système n'est pas resté cantonné au site : c'est lui qui a ensuite servi à la nouvelle application mobile.

Bootstrap 4 et Sass

Le design a migré vers Bootstrap 4 et Sass. Les deux vont ensemble : Bootstrap 4 est écrit en Sass, là où la version précédente reposait sur Less. Adopter la nouvelle version revient à adopter son préprocesseur, avec ses variables, son imbrication et ses fichiers partiels, et avec la possibilité de recompiler le framework à partir de ses propres valeurs plutôt que de le surcharger après coup.

L'année a aussi apporté de nouveaux formats d'articles, des optimisations SEO, et un système de bannissements pour tenir l'espace de commentaires de la communauté.

Ce que cette version a apporté

• API globale et traitement des données côté client avec Vue.js
• Système de cache JSON en base de données pour réduire la charge serveur
• Lives de matchs commentés, compositions et pages de transferts
• Bannissements pour protéger l'espace commentaires de la communauté
• Optimisations SEO et nouveaux formats d'articles

La suite appartient au même récit : en 2019, l'application mobile repartait de zéro en React Native, et en 2026 c'est le site entier qui a été reconstruit, en stack TALL cette fois.