Le “making off” de Sophianet.com par Leo Largillet

Un adieu à Drupal et à WordPress : c’est ce que signe Sophianet.com dans sa nouvelle version et Webtimemedias.com qui reprend aujourd’hui ce CMS (Content Management System) nouvelle génération. De la réflexion initiale jusqu’à la mise en musique, en passant par les choix technologiques majeurs et le design, cette version a été développée par Leo Largillet. Freelance dans la Tech, en Master actuellement à Imperial College London après des études à HETIC, la grande école des métiers du web à Paris et une année de présidence européenne des Juniors Entreprises, il explique comment il a créé cette plateforme de nouvelle génération. (Photo SN : Leo Largillet et Yann Quillard, qui s’est occupé plus particulièrement de la mise en place du moteur de recherche sur Algolia).

Le départ : 

La réflexion initiale qui a été menée avant de s’attaquer à l’architecture du nouveau Sophianet.com ?

- "Construire le nouveau Sophianet, c’est réfléchir aux usages avant de penser à la technologie pour le construire. C’est pourquoi on a commencé par de longues phases de réflexion et de User Research autour du produit que l’on voulait créer."

"Nous avons recherché et identifié sur le site de WebtimeMedias les points de frictions rencontrés dans l’expérience utilisateur et sur les différents parcours proposés. Le design a donc été complètement repensé pour proposer une interface décomposée en 3 colonnes dont une principale et deux fixes, servant de barres de navigation. Avec ce nouveau modèle, peu importe où l’on se trouve sur le site. Il est toujours possible de naviguer entre les pages et sur les nouveaux contenus. Et ce qui est extra, c’est que ça marche aussi bien sur mobile !"

"Nous avons aussi optimisé tous les systèmes de recommandations et de propositions de contenu pour rendre tout le site accessible plus rapidement tout en permettant aux utilisateurs de lire des articles sans avoir à les chercher longtemps sur l’accueil."

Le choix des technologies

Comment se sont faits au départ les choix techniques? Pourquoi Directus ? Ce que ce choix impliquait ? Les autres composants majeurs comme le moteur de recherche ? 

- "Quand nous avons terminé la réflexion sur le modèle que nous souhaitions créer, nous avons recherché les technologies qui pouvaient être pertinentes pour construire la Web-App. Nous voulions un site très modulaire, modulable et réactif. Nous avons donc pensé à React, un framework JavaScript parmi les plus avancés du marché qui a déjà fait ses preuves auprès de millions d’utilisateurs."

"Problème : React n’est pas pensé pour le SEO à cause de son système de rendu des pages qui se fait côté client. Pour pallier cela, nous avons choisi de nous baser sur Next.js, une fork (= extension) de React qui, elle aussi, a plus que fait ses preuves. Elle propose de mélanger SSR (server side rendering) et CSR (client side rendering) pour optimiser au mieux nos appels de données, avec d’un côté les articles chargés par le serveur et les données annexes chargées côté client. C’est le meilleur des deux mondes !"

"Quitter les traditionnels WordPress et Drupal historiquement utilisés pour les journaux en ligne, c’est aussi devoir repenser la gestion et l’écriture des contenus. Pour cela nous avons retenu en Back-End les solutions Cloud de Directus. Elles nous permettent de gérer efficacement tous les articles du site et d’en écrire des nouveaux avec des possibilités infinies, du simple texte à l’intégration de vidéos ou bien plus encore."

Enfin, pour aller plus vite que jamais dans la recherche de contenu et proposer des articles cohérents, nous nous sommes branchés sur Algolia pour créer un moteur de recherche personnalisé et un système de recommandations d’articles basé sur un modèle de ML (Machine Learning). Ainsi, plus il y a d’articles sur le site, plus le système de recommandation se révèle pertinent.

Qu’est ce que vient apporter un CMS “headless” ?

-"Tout le site et les différents éléments sont interconnectés et modulables. Le détachement du Back-End et du Front-End nous permet d’avoir autant de supports d’affichage que l’on veut, et d’utiliser intelligemment la Data. Si l’on veut créer une application mobile, pas besoin de réinventer la roue, on vient simplement la brancher sur notre source de data."

La suite ?

- "Ce qui reste encore à terminer (profils, enregistrés, autres) , les évolutions que l'on peut imaginer (cartographie 3D de Sophia Antipolis, personnalisation des fils d’information, SEO). Est-ce que l'IA pourrait apporter quelque chose au site ?"

"Les nouvelles technologies et frameworks sur lesquels est basé le nouveau Sophianet permettent d’innombrables fonctionnalités pour l’avenir du site. Cela va de nouvelles façons de consommer le contenu jusqu’à de nouvelles formes du site, ou bien même de la création d’un compte Sophianet, et bien plus à venir !"

- Contact :