Des visiteurs du monde Symfony contribuent au front-end de recherche de documentation TYPO3
Auteurs : Mathias Bolt Lesniak
Traduit par : Léo - W-Seils
Lorsque la fonctionnalité très améliorée de docs.typo3.org a été mise en place, il lui manquait encore une belle interface. Ce travail a été réalisé par deux entreprises françaises du monde Symfony. Voici leur histoire.
Vous avez peut-être déjà lu l'article sur les améliorations apportées à la fonctionnalité de recherche de docs.typo3.org. Cependant, l'histoire de l'apparence et de la convivialité n'a pas encore été racontée. Elle est le résultat d'une collaboration entre les sociétés JoliCode et Premier Octet. J'ai discuté avec Damien Alexandre de JoliCode pour savoir comment tout cela s'est passé.
Dans l'écosystème Symfony depuis le début
« Nous sommes deux entreprises françaises à taille humaine qui travaillent ensemble », explique Damien. « JoliCode s'occupe du backend et Premier Octet du frontend. Nous croyons beaucoup à l'open source et nous y contribuons régulièrement ». Ensemble, les entreprises travaillent avec des technologies comme Symfony, React, Rust, Next.js et Elasticsearch.
« Nous sommes des fossiles dans l'écosystème Symfony », déclare Damien. « Certains d'entre nous travaillaient avec avant la sortie de la version 1.0. Nous avons été très vite enthousiasmés par Symfony. À l'époque, il nous manquait vraiment un cadre solide, avec des opinions bien arrêtées, pour industrialiser correctement les projets. Nous avons ressenti un énorme gain de qualité - et nous ne sommes jamais revenus en arrière ». Aujourd'hui, ils sont contributeurs et sponsors de Symfony et se considèrent comme des experts du framework.
TYPO3 est construit sur d'excellentes fondations
TYPO3 était une nouvelle expérience pour eux, mais Damien était excité par cette opportunité. « Je n'ai jamais eu l'occasion de travailler sur un projet TYPO3, c'est donc très intéressant pour nous de mettre un pied dans cet univers. J'aime que TYPO3 utilise Doctrine et de nombreux composants Symfony 7. Nous avons su dès le départ qu'il reposait sur d'excellentes fondations ».
Les deux entreprises ont pris contact avec la responsable de l'équipe de documentation TYPO3, Lina Wolf, parce qu'elle avait demandé des évaluations et cherchait quelqu'un pour terminer la partie frontale de la fonction de suggestion de recherche pour la documentation TYPO3.
« Aider un projet open source dans le besoin est très satisfaisant », dit Damien et nous étions convaincus que cela faisait partie de nos compétences. Nous nous sommes donc mis d'accord pour terminer la fonctionnalité complète moyennant une petite somme forfaitaire. Les 3 000 euros du budget de l'équipe de documentation ont fini par couvrir environ la moitié du coût, JoliCode et Premier Octet faisant don du reste au projet TYPO3.
Damien a réalisé le travail avec Colin Regourd de Premier Octet. Les deux partagent un bureau, « c'était donc très pratique pour nous », explique Damien.
Ensemble, ils ont travaillé sur deux dépôts dans l'organisation GitHub de TYPO3 Documentation : t3docs-search-indexer pour l'API et Elasticsearch suggestions et render-guides pour le frontend actuel.
« La partie Elasticsearch était déjà très bonne, donc la plus grande partie du travail était du côté du frontend », dit Damien. « Avec l'aide de Lina Wolf, nous avons réussi à faire fonctionner ces projets localement, et il s'agissait ensuite de comprendre comment ils interagissaient les uns avec les autres.
Conservateur et non intrusif, avec une bonne expérience utilisateur
Colin et Damien apprécient la façon dont la documentation TYPO3 est construite. « Le fait de n'avoir que du HTML statique à héberger en ligne est une nécessité », explique Damien. En même temps, cela a aussi rendu le processus de développement un peu plus long : « Lorsque vous changez quelque chose, vous devez reconstruire la documentation. »
L'implémentation finale ajoute un composant React pour le panneau de recherche. Damien explique que leur travail répondait à quatre motivations principales :
- Être aussi conservateur que possible avec les dépendances. (« Nous avons ajouté React, react-dom et lodash.debounce, c'est tout », dit Damien).
- Ne changez rien d'autre sur la page.
- Soyez aussi peu intrusif que possible.
- Offrez une bonne expérience à l'utilisateur.