Migrating Turo Search to React
This post summarizes my thoughts and learnings after successfully migrating an existing (large) piece of a product to a new technology.
Specifically, instead of focusing on React, I’m going to share the 12 key takeaways on how to keep the motivation and the different stages you can face during the project.
1. Impact
Projects have an impact in a product. Not only benefits but also disadvantages. Migrating search to our new stack meant unlocking the potential of quicker changes and better performance for the end user while putting product changes on hold while working in the new version.
2. Key stakeholders
Accept it: it’s a huge project and it impacts many areas of the company. You should find out who are the key stakeholders and get early feedback from them.
3. Find your testers
You’re going to need testing. And you’re going to need help testing. Try to find a group of users with different profiles so you can test different patterns of interaction.
4. Progressive adoption
You have to be able to seamlessly change from the current version to a new one and fall back to the previous one in case of emergency. A/B testing and a progressive rollout are a requirement.
5. Replication
From a user’s perspective, migrating means replicating. You don’t need to introduce existing bugs, but you shouldn’t feel creative about changes—don’t lose your focus.
6. Key affected areas
Analyze who is using search; it’s not just a link from the homepage: you need to take into account landing pages, marketing campaigns, navigation from/to other pages.
7. Divide & Conquer
Break it down to smaller chunks (if webpack does, why shouldn’t you?): you can find out all about the logic and then create a model of what needs to be created in the new version.
8. Split in components
“Componentize” the parts of the UI and decouple them from this business logic. This duality is visible in the widespread usage of a combination of React with redux-form when writing large web applications: embrace it and follow its patterns.
9. Testing
Organize testing sessions: make different people focus on different areas to be able to find as many issues as possible. There are definitely going to be bugs out there. Make sure unbiased testers have a look at your work and get all the benefits out of early bug discovery.
10. Patience
Be patient: you’re going to get feedback you’ll have to address. It’s part of the cycle and you should be ready to get the work done.
11. List your ideas
Take notes of your ideas. Even if you are not adding extra value while migrating existing functionality, think of it this way: you’re probably the first engineer to take a holistic view of a page that developed iteratively over some time. Socializing your insights is a good way to discover new opportunities.
12. Focus
Focus on small tasks. Every finished task counts towards the 100% done milestone. Think of what you’ve already finished and not of what you still need to get done.
As a closing thought, working in projects with a large scope, and hence a long duration, can be both stressful and demotivating: migrating our search page to React took a total of six months from inception to a 100% rollout in production, and we didn’t stop shipping new features during the process.
In my opinion, your best shot at overcoming these feelings is to be able to turn them around: it’s a marathon and not a sprint; every milestone gets you closer to the goal and gives you some extra motivation to reach the finish line.
