Le site fait peau neuve

La nouvelle version du site est enfin en ligne ! Après 5 ans sans refonte majeure, l'objectif n'était pas de tout réécrire de zéro, mais plutôt de moderniser ce qui existe et de mieux mettre en avant les contenus.

Les nouveautés

Les cursus / parcours

C'est le gros morceau de cette nouvelle version. On introduit une nouvelle catégorie de contenu : les cursus (ou parcours), qui permettent de découvrir les technologies en fonction d'un objectif plutôt qu'en fonction d'une technologie.

Ces nouveaux types de contenu me permettent de mêler des formations, des tutoriels isolés et des vidéos dans une même vue cohérente et de voir la relation qu'il y a entre les différents contenus. Ces cursus vont me permettre de trouver les contenus manquant pour offrir une bonne continuité dans les parcours proposés.

Un nouveau listing

Le second changement concerne la refonte de la section tutoriels, avec l'introduction d'une barre de navigation latérale qui permet de filtrer et faire ressortir des contenus de manière plus fine qu'avant :

• Par technologie : toutes les technos sont listées avec le nombre de tutoriels associés
• Par niveau : pour cibler du contenu adapté à son niveau
• Par durée : pratique quand on a peu de temps

Une barre de recherche permet aussi de trouver rapidement une technologie précise, en complément de la recherche globale déjà présente sur le site.

Enfin, si vous êtes connecté, la progression est maintenant visible partout. Une petite coche apparaît sur les contenus déjà terminés. En un coup d'œil, vous saurez ce que vous n'avez pas déjà vu.

Des pages plus simples

La page d'un tutoriel a été entièrement repensé pour mieux mettre en avant la vidéo et la description. Moins de fioritures, plus de lisibilité. Un système de picture-in-picture a également été mis en place pour vous permettre de continuer à lire la vidéo pendant que vous lisez la description associée.

Pour les formations, une barre latérale de navigation permet désormais de se déplacer rapidement d'un chapitre à l'autre sans avoir à remonter en haut de la page.

Les quiz

Les formations intègrent désormais des quiz pour valider les connaissances. Questions à choix multiples ou champ libre, l'objectif est de s'assurer que les connaissances ont bien été assimilées. À terme, un système de questions aléatoires est prévu pour réviser l'ensemble des contenus vus depuis le début, à la manière des flashcards.

C'est une fonctionnalité encore expérimentale, les retours sont les bienvenus pour orienter les développements à venir.

Ce qui a disparu

Cette nouvelle version a aussi été l'occasion de nettoyer certaines parties du site qui ne sont plus utilisées.

Le forum

Le forum était passé en lecture seule l'année dernière. La fréquentation avait baissé avec l'essor de Discord, et plus récemment avec les IA. L'autre problème était la quantité trop importante de spam contre lequel je n'arrivais plus à lutter.

Le lien vers le forum a été retiré de la navigation principale, mais il reste accessible via les moteurs de recherche. Les sujets créés au fil des années sont préservés, pas question de supprimer du contenu que des gens ont pris le temps de produire.

Les commentaires

L'autre élément communautaire qui a été supprimé est le système de commentaire sous les vidéos. Comme pour le forum il y avait très peu d'activité et ce système était surtout utilisé par les spammers. Ce système a été remplacé par un système de support réservé aux membres premium. Ce système permet d'orienter les demandes vers des questions plus techniques et la limite premium permet de prévenir le spam.

Changements techniques

Côté technologies il y a eu pas mal de changements. Pour rappel le précédent site utilisait :

• Symfony pour le backend PHP.
• CSS maison à partir d'une maquette Figma.
• Des custom elements avec des composants Preact pour le frontend.
• Messenger pour le système de file d'attente.
• Mercure pour les notifications instantanées.
• Nginx pour le serveur web.
• PostgreSQL pour la base de données.

De Symfony à Laravel

C'est le changement le plus important. Sur la version précédente, le choix entre Laravel et Symfony s'était déjà posé, et Symfony l'avait emporté pour sa rigueur et son approche moins dynamique. J'ai entamé le développement de cette nouvelle version avec Symfony, mais après de trop nombreuses barrières j'ai décidé de sauter le pas vers Laravel.

Plus de fonctionnalités

Laravel embarque nativement un plus grand nombre de fonctionnalités

• Flow d'authentification complet (connexion, rappel de mot de passe, 2FA...)
• Un système de file d'attente.
• Configuration de Vite.
• Système de broadcasting pour passer des évènements au frontend.
• Tests fonctionnels.

Côté Symfony j'avais du installer ou développer pas mal de fonctionnalités qui sont offertes de base par Laravel.

L'ORM

C'est probablement le problème principal rencontré avec la version précédente. Doctrine (l'ORM de Symfony) est trop rigide pour des cas d'utilisation que je juge "classique".

• Récupération des données relatives trop complexes et souvent peu performante (LEFT JOIN multipliant le nombre de lignes). Pas de possibilité de contrôler l'eager loading à la demande.
• Par défaut Doctrine veut récupérer l'ensemble des champs lors d'une requête et récupérer seulement certains champs n'est pas évident.

Eloquent, l'ORM de Laravel, est bien plus flexible.

• Si on veut charger une relation, on ajoute un with(), l'ORM va automatiquement générer une seconde requête pour remplir les données et éviter le problème n + 1.
• On peut facilement ne récupérer que certains champs à l'aide de la méthode select().

La contre partie est que l'ensemble des champs peuvent être nullables, mais cela permet d'éviter d'avoir à créer autant d'objet que l'on a de combinaison de champs possibles.

Tests

Dans la version précédente l'écriture de tests fonctionnels était très complexe à cause de la rigueur de Symfony qui empèche parfois la modification de certains services mais aussi par le fait qu'il n'offre aucune mécanisme pour facilement mocker la base de données.

Côté Laravel les tests s'écrivent de manière beaucoup plus naturelle et de nombreux outils sont offerts pour pouvoir écrire des tests fonctionnels plus facilement :

• Un système permet de rafraichir la base de données entre chaque test et un système de fixture permet de remplir la base de données avec des données.
• La plupart des systèmes peuvent être mockés de manière globale pour pouvoir ajouter des assertions. Par exemple un simple avec Mail::fake() permet de court-circuiter le système d'envoi d'email et d'espionner l'envoi d'email.

L'adoption de Laravel m'a permis d'écrire plus de test.

La lisibilité du code source

Un point plus subjectif, mais qui compte quand on passe du temps à explorer les entrailles d'un framework : le code source de Symfony ne contient quasiment aucun commentaire explicatif là où c'est l'opposé avec Laravel, qui lui, documente chaque méthode. Ça peut paraître anecdotique, mais quand on est bloqué sur un comportement inattendu, pouvoir lire le code source sans se perdre est un vrai gain de temps. C'est particulièrement important sur les tableaux de configuration par exemple.

Laravel Data

La dernière pièce qui a fini de convaincre, c'est la librairie Laravel Data (du package Spatie) qui permet de représenter les données entrantes et sortantes sous forme d'objets PHP typés, là où Laravel utilise des tableaux par défaut. C'est l'équivalent de l'ObjectMapper de Symfony, mais en plus flexible et avec un meilleur support des collections.

Structure du projet

Côté structure j'ai adopté la même approche que j'avais utilisé pour la version précédente sur Symfony. Le changement de framework n'a pas forcément changé ma manière d'organiser les fichiers avec un système de Domain et d'Infrastructure. Je vous renvoie sur cet article si vous voulez plus de détails techniques sur les choix d'organisation.

Tailwind CSS pour le frontend

Côté CSS j'ai choisi de passer par Tailwind CSS car je n'ai pas forcément de maquette en amont et j'aime bien utiliser l'HTML pour prototyper les pages et tester des interfaces. Tailwind, par son approche, me permet d'utiliser l'HTML comme outil de design. En revanche, le point négatif de cette approche est le poids du CSS en sorti qui a quasiment été multiplié par 2 par rapport à la solution du CSS maison.

React & Custom Elements

La philosophie côté JavaScript reste la même qu'avant : les pages sont générées côté serveur et restent majoritairement statiques. Pour les éléments qui nécessitent de l'interactivité (le lecteur vidéo, le système de filtres...), des custom elements viennent servir de point d'ancrage pour la logique JavaScript.

• Les custom elements simples utilisent du TypeScript brut
• Les custom elements plus complexes servent de racine pour un composant React.

J'ai choisi d'abandonner Preact au profit de React pour pouvoir profiter de son écosystème (BaseUI, Shadcn...) même si cela signifie une augmentation du poids du bundle en sortie.

La navigation entre les pages se fait à l'aide de Hotwire Turbo ce qui permet de maintenir la connexion au serveur mercure pendant la navigation mais aussi d'améliorer la vitesse perçue de chargement entre les pages.

Inertia pour l'administration

En revanche, côté administration, vu que je n'ai pas besoin du référencement, les pages sont générées côté client avec Inertia. L'avantage principal est de pouvoir créer des formulaires complexes plus facilement qu'avec un mélange HTML / JavaScript. C'est surtout pratique pour la gestion des quiz, des formations et du nouveau système de parcours.

En plus, Laravel Data me permet d'avoir un typage de bout en bout car l'outil est capable de génèrer automatiquement les types TypeScript correspondant aux objets PHP.

FrankenPHP

Pour cette version j'ai aussi remplacé nginx par FrankenPHP, une version modifiée de Caddy qui intègre directement un serveur PHP. Nginx est puissant mais sa configuration n'est pas triviale, surtout quand on ne s'y replonge que de temps en temps. FrankenPHP permet de mettre un site en ligne avec un minimum de configuration et gère plusieurs éléments qui auparavant nécessitaient plusieurs outils :

• Le renouvellement des certificats SSL est géré par le serveur
• Mercure est intégré pour la gestion du SSE (server sent event)
• Pas besoin de PHP-fpm, la gestion de PHP est intégrée au serveur

Il est possible d'activer le mode worker qui permet de précharger le framework (avec Octane dans le cas de Laravel) mais d'après mes essais le gain en terme de performance n'est pas significatif par rapport à opcache et je ne connais pas encore assez bien le système pour mesurer l'impact en terme de sécurité.