Geen TypeScript. Geen linter. Geen Sentry. 170 locaties gebruiken het dagelijks.

De geërfde CRA-frontend bestond uit gewoon JavaScript zonder TypeScript, ESLint, Prettier, Sentry, herbruikbaar componentensysteem of samenhangende functiestructuur. De code bevatte ruim 5.000 regels pure CSS, Tailwind-klassen die door inline stijlen werden overschreven, gekopieerde pagina's en een platte directory-indeling.

De problemen versterkten elkaar. API-wijzigingen bereikten de browser zonder feedback van de compiler. Gekopieerde schermen herhaalden dezelfde opmaakfouten. Productiefouten kwamen meestal binnen als gebruikersmeldingen omdat er geen monitoringpad was.

De toepassing bediende nog elke dag 170 klantlocaties. We converteerden V1 niet ter plaatse en wachtten niet op een volledige vervanging. We hielden de oude routes draaiend en eisten dat elke nieuwe V2-route aan de nieuwe normen voldeed.

Dat gaf het team een eenvoudige regel: breid de verouderde conventies niet uit. Verplaats het eigenaarschap wanneer een route opnieuw wordt gebouwd en verwijder het oude pad zodra het nieuwe in productie werkt.

• Joel Spolsky: Things You Should Never Do, Part I

Next.js 15 en TypeScript vormden de nieuwe buitengrens. Nieuwe routes gebruikten getypeerde routedefinities, gegenereerde API-clients, gedeeld fetchgedrag en componenten die bij hun functie hoorden. Het team converteerde niet eerst elk verouderd bestand; het stopte de uitbreiding van ongetypeerde code en verplaatste eigenaarschap naar V2 zodra het werk een route bereikte.

• TypeScript en getypeerde routes maakten fouten in navigatie en API-structuren tijdens de ontwikkeling zichtbaar.
• Gegenereerde clients en gedeeld fetchgedrag vervingen verspreide aanvraagconventies.
• Functiemappen gaven routes, hooks, schema's en tests expliciete eigenaars.
• Herbruikbare basisonderdelen vervingen kopieën op paginaniveau voor terugkerende interactiepatronen.

Modernisering veranderde ook hoe fouten werden opgespoord en wijzigingen werden toegelaten. Sentry voegde rapportage voor client, server en edge toe, naast foutgrenzen in de toepassing. Unit- en browserworkflows kregen expliciete vereiste gates, terwijl gedragsgerichte tests risicovolle processen zoals Investor Intake dekten.

Deze maatregelen herstelden V1 niet automatisch. Ze maakten elke V2-route observeerbaar en testbaar voordat die meer productieverantwoordelijkheid overnam.

• Bekijk hoe productiefouten met Sentry leesbaar zijn gemaakt
• Bekijk hoe vereiste CI-gates de uitvoering van tests afdwongen

V2 beheerde de algemene interface-elementen, authenticatie en elke nieuw gemigreerde functie. CRA bleef alleen voor routes die nog door CRA werden beheerd in één iframe. Het bijbehorende migratieartikel beschrijft de brug voor postMessage, SSO en routering uitvoerig.

Voor dit artikel draait het om eigenaarschap: de nieuwe normen golden aan de V2-grens en elke voltooide migratie verminderde de hoeveelheid code die daarvan was vrijgesteld.

Het eigenaarschap werd tijdens de overgang expliciet bijgehouden. Navbar, Topbar, Settings, Investor Intake, Authentication en Twilio verhuisden naar V2. Home, Genius Mode, Deals en Buyers bleven in V1 tot hun vervangers klaar waren. Klantlocaties verhuisden in beheersbare groepen in plaats van alle onvoltooide onderdelen tegelijk te ontvangen.

Die inventaris voorkwam dat de herschrijving een onbepaald parallel project werd. Een functie viel nog onder V1, werd via de compatibiliteitsgrens aangeboden of was native in V2.

Bij de definitieve omschakeling werden het iframe, de verouderde gegenereerde clients en de brugcode verwijderd. Daarna werden verouderde routes, tests, authenticatieguards, gedeelde dialercode en de componentenstructuur opgeschoond. De modernisering was pas voltooid toen de tijdelijke grens kon worden verwijderd.

• Meet de voortgang niet aan het aantal nieuw aangemaakte frameworkbestanden.
• Meet welke productieverantwoordelijkheden zijn verplaatst en welke compatibiliteitspaden kunnen worden verwijderd.
• Houd nieuwe code binnen de nieuwe normen in plaats van te wachten op een perfecte conversie van de volledige codebase.
• Verwijder tijdelijke migratie-infrastructuur nadat het laatste afhankelijke onderdeel is verplaatst.