Skip to content
fr

Lead — Edito CMS rebuild · 2024–2025

e-TF1

Alban Pasquelin led the rebuild of TF1's Edito CMS from January 2024 to July 2025, migrating the front end from Vue.js to React with end-to-end TypeScript, preserving data integrity throughout and cutting load times by more than 30%.

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

Edito is the tool TF1's editorial teams use to build what viewers see. It cannot stop: a newsroom publishes every day.

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

So the Vue.js-to-React migration ran incrementally, old and new living side by side in the same application. Nobody had to wait for a big-bang switchover, and data integrity held throughout.

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

Moving to end-to-end TypeScript sharply cut production regressions: a structural mistake shows up at compile time, not on a Sunday night. Client-server exchange goes through GraphQL with schema validation, and the interface is built from atomic components.

type EditoPayload = ApolloCodegen<typeof editoSchema>

Load times dropped by more than thirty percent. For a newsroom publishing all day, that is time handed back to people.

expect(loadTime).toBeLessThan(before * 0.7)
return {
fasterLoadTimes: 30%, /** faster load times **/
daysOfEditorial: 0, /** days of editorial freeze **/
}
}
Migrating without downtime — Each square is one CMS screen. They move from Vue to React one at a time while the bar at the bottom — service availability — never moves.

← Experience