Modernizing an existing front-end

The real topic

The framework is often only the visible part. The real topic is the system: routes, stores, conventions, critical components, API integrations, business behavior, dependencies, missing tests and team habits. A migration that ignores this can produce more modern code but a less stable product.

1. Map

Before touching the code, I try to understand what keeps the project standing. Which pages are critical? Which dependencies are actually used? Where are the side effects? Which components are reused everywhere? Which files does nobody understand anymore?

• List critical routes, layouts, stores, plugins and modules.
• Identify sensitive areas: payment, forms, SEO, login, high-traffic pages.
• Spot dependencies that block an upgrade or migration.
• Write a simple system map instead of an endless audit.

2. Slice

A good modernization effort looks for natural seams. You isolate a page, a component family, a flow, a dependency or a convention. The goal is to ship useful, testable and reversible pieces.

3. Stabilize

Modernizing without stabilizing just moves the debt. Each step should make the project easier to understand through conventions, short documentation, clearer components, contribution rules, validation scripts and checkpoints before production.

4. Measure

What matters is not only the number of migrated files. I look at the ability to ship, fewer regressions, performance, readability, remaining debt and team confidence in the system.

AI

AI can help explore a codebase, draft documentation, compare approaches or generate migration scripts. But it does not replace product knowledge, critical reading or responsibility for what ships to production.