The No Frills Frontend Migration Survival Guide

Bookmark
Rate this content

Migrating a large frontend application, say, moving from AngularJS to React can feel overwhelming at first. It’s easy to think of it as a huge “all-or-nothing” rewrite. But in reality, a gradual migration, done one piece at a time, is not only possible, it's actually the smarter way to go.

In this talk, I’ll walk you through what it really takes to pull off a migration like this without disrupting your team or your product. 

We’ll look at some of the common challenges you’ll run into like dealing with two different routing systems, keeping state consistent across frameworks, and managing bundle size when both frameworks need to live side by side for a while.

We’ll also get into practical strategies that have worked well in real-world projects, including patterns like the Strangler Fig. The goal is to give you a clear, realistic path forward so you can modernize your app, reduce tech debt, and end up with a cleaner, more maintainable codebase all without grinding your velocity.

This talk has been presented at React Summit US 2025, check out the latest edition of this React Conference.

FAQ

The talk focuses on framework migration and infrastructure migration, explaining the differences in strategies and risks associated with each.

The two main strategies are the big bang approach, which involves an atomic switch from one framework to another, and the gradual migration approach, which involves migrating piece by piece to reduce immediate risk.

Web components can serve as a bridge between old and new systems, allowing different frameworks to coexist without needing to rewrite the entire application. They provide a universal boundary for component consumption.

The three main building blocks are Shadow DOM, which provides an isolated DOM tree; Custom Elements, which allow defining custom HTML tags; and HTML Templates, which let you write chunks of markup.

Web components are production-ready today because recent versions of major frameworks like React, Vue, and Angular now offer full first-class support for custom elements, closing the gap between browser-native components and frameworks-driven UIs.

The outside-in approach starts from the outer shell, like app layout and routing, while the inside-out approach begins with small isolated components. Each approach trades control for safety based on system stability.

Lifecycle hooks in web components provide fine-grain control over initialization and cleanup, similar to lifecycle methods in frameworks like React, allowing seamless integration with different environments.

Understanding the type of migration is crucial because each type—framework, library, or infrastructure—touches different layers of the stack and requires distinct strategies and considerations.

MyApp.dev is a toolkit set co-founded by Adar Geva that helps teams connect and control remote UIs and micro front-ends more easily, facilitating modernizing large front-end systems without halting development.

Front-end migrations can be brutal due to the need to balance between deadline features, old code, and new frameworks while trying to avoid breaking production. They are inevitable because the front-end world evolves quickly.

Hadar Geva
Hadar Geva
13 min
21 Nov, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Front-end migrations challenges and survival guide. Understanding types of migrations: frameworks, libraries, and infrastructure. Strategies include big bang and gradual approaches, balancing risk, time, and maintenance. Comparing outside-in and inside-out migration approaches. Emphasis on the benefits of the inside-out approach for modernization. Web Components offering a universal way to use components across frameworks. Web Components lifecycle and integration with React. Cross-framework integration of Web Components for smooth migration.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
Watch video: Vue: Feature Updates
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Future of Frontend Frameworks Fireside Chat
React Summit 2024React Summit 2024
28 min
Future of Frontend Frameworks Fireside Chat
Fred K. Schott
Minko Gechev
Ryan Carniato
Daniel Afonso
Aakansha Doshi
Tim Neutkens
6 authors
Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.
A Frontend Developer’s Guide to Web3
React Summit 2022React Summit 2022
22 min
A Frontend Developer’s Guide to Web3
This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain wallets, using RPC endpoints and block explorers, and accessing smart contract data. The talk emphasizes the use of ABIs and JavaScript libraries like ethers for interacting with smart contracts. It mentions the shift in mindset from HTTP requests to using ABI code and libraries for front-end development in Web 3. The talk concludes by mentioning Web3UI and tools like PolygonScan and Etherscan for building on the blockchain.
Monitoring Errors and Slowdowns with a JS Frontend and Node Backend
Node Congress 2022Node Congress 2022
8 min
Monitoring Errors and Slowdowns with a JS Frontend and Node Backend
Watch video: Monitoring Errors and Slowdowns with a JS Frontend and Node Backend
Sentry is code monitoring for developers, specifically designed for the application layer. It helps identify error details, frequency, release, user information, and stack trace. Source maps can be uploaded to see the original source code and suspect commits can be identified. Performance monitoring helps identify slowdowns and determine the cause. Automating alerts and investigating errors helps gain instant context and trace errors across different projects.
Serverless for Frontends
DevOps.js Conf 2022DevOps.js Conf 2022
8 min
Serverless for Frontends
Premium
Welcome to my session on Serverless for Front-ends. Serverless functions eliminate the need for a runtime and handle orchestration for you. Microfrontends require a runtime and orchestration, but side-less UIs provide a runtime-free solution. In the demo, a new team adds functionality to an application and publishes it easily. Building and deploying applications is quick and easy with micro apps and PowerCLI, offering true loose coupling and instant availability without a runtime.
DevOps for Frontend: beyond Desktop Browsers
DevOps.js Conf 2021DevOps.js Conf 2021
31 min
DevOps for Frontend: beyond Desktop Browsers
Today's Talk discusses DevOps for frontend beyond desktop browsers, focusing on the challenges and journey to DevOps, the importance of abstractions, maximizing flow and enabling team autonomy, applying DevOps principles beyond web applications, running automated tests on consoles and TVs, investing in tooling for TV testing, and the challenges of TV testing in the lab.

Workshops on related topic