Aller au contenu
en

Responsable de la refonte du CMS Edito · 2024–2025

e-TF1

Alban Pasquelin a piloté la refonte du CMS Edito de TF1 de janvier 2024 à juillet 2025, migrant le front de Vue.js vers React avec un TypeScript intégral, sans rupture d'intégrité des données et avec plus de 30 % de temps de chargement gagnés.

import { React, TypeScript, GraphQL, Apollo } from '@/stack'
export function (cms: VueApp): TypedReactCMS {

Edito est l'outil avec lequel les équipes éditoriales de TF1 fabriquent ce que voient les téléspectateurs. Il ne peut pas s'arrêter : une rédaction publie tous les jours.

const cms = editorialTeams.publishTo(viewers) /** every single day **/

La migration de Vue.js vers React s'est donc faite progressivement, l'ancien et le nouveau cohabitant dans la même application. Personne n'a eu à attendre une grande bascule, et l'intégrité des données a été préservée d'un bout à l'autre.

for (const screen of cms.screens) migrate(screen, { from: vue, to: react })

Le passage à TypeScript intégral a fait chuter les régressions en production : une erreur de structure se voit à la compilation, pas un dimanche soir. Les échanges client-serveur passent par GraphQL avec validation de schéma, et l'interface est construite en composants atomiques.

type EditoPayload = ApolloCodegen<typeof editoSchema>

Les temps de chargement ont baissé de plus de trente pour cent. Pour une rédaction qui publie toute la journée, c'est du temps rendu aux gens.

expect(loadTime).toBeLessThan(before * 0.7)
return {
fasterLoadTimes: 30%, /** de temps de chargement gagnés **/
daysOfEditorial: 0, /** jour de gel éditorial **/
}
}
Migrer sans couper la production — Chaque carré est un écran du CMS. Ils passent de Vue à React un par un, pendant que la barre du bas — la disponibilité du service — ne bouge jamais.

← Parcours