Migrer un front de dix ans

La réécriture complète d'un front de dix ans échoue rarement sur la technique. Elle échoue au dix-huitième mois, quand la nouvelle application couvre 80 % des écrans, que l'ancienne reçoit encore des correctifs, et que les 20 % restants sont précisément ceux que personne ne comprend. À ce moment, vous maintenez deux fronts, et la direction demande pourquoi la feuille de route produit est à l'arrêt.

Je ne migre plus que par étranglement : l'ancien et le nouveau servent le même domaine, route par route, et l'ancien rétrécit jusqu'à pouvoir être éteint. Cette méthode a un coût que ses défenseurs minimisent, et je le détaille ici.

La cohabitation se joue au routage

Le point de bascule se trouve devant le code du front, dans le reverse proxy. Les deux applications tournent côte à côte, et le proxy envoie chaque chemin vers l'une ou l'autre.

# docker-compose.yml — labels Traefik
services:
  front-legacy:
    labels:
      - "traefik.http.routers.legacy.rule=Host(`app.example.com`)"
      - "traefik.http.routers.legacy.priority=1"

  front-next:
    labels:
      - "traefik.http.routers.next.rule=Host(`app.example.com`) && (PathPrefix(`/compte`) || PathPrefix(`/_next`))"
      - "traefik.http.routers.next.priority=10"

L'ancien front reçoit tout par défaut. Le nouveau prend les préfixes migrés, avec une priorité plus haute. Migrer un écran revient à ajouter un préfixe, et le rollback à le retirer. Ce rollback en une ligne est ce que vous achetez, et c'est ce qui rend la méthode supportable en production.

Certaines choses doivent être partagées dès le premier jour, sinon l'utilisateur voit la couture.

La session. Même domaine, même cookie, lu par les deux applications. Si l'ancien front garde son token dans le localStorage et que le nouveau attend un cookie HttpOnly, ce point se règle avant la première route : le back-end émet le cookie, et l'ancien front apprend à s'en servir. C'est une modification de l'ancien code, et elle est inévitable.

L'enveloppe visuelle. En-tête, navigation, pied de page. Vous allez les écrire deux fois, une dans chaque technologie, et les maintenir alignés. J'ai essayé de l'éviter avec un fragment servi par l'un et injecté dans l'autre ; le couplage créé coûtait plus que la duplication. On partage donc les design tokens (couleurs, espacements, typographie) en variables CSS, et on duplique le balisage.