On Sunday, March 6, we migrated we converted more than 3.7 million lines of code with a single pull request. The next day, hundreds of engineers came in to start writing TypeScript for their projects.
Overview
The article discusses Stripe's migration of its largest JavaScript codebase from Flow to TypeScript, converting over 3.7 million lines of code in a single pull request. It highlights the challenges faced during the migration, the strategies employed, and the positive impact on developer productivity.
What You'll Learn
1
How to effectively migrate a large codebase from Flow to TypeScript
2
Why TypeScript is preferred over Flow for type checking in JavaScript
3
How to use automated tools for code conversion during migrations
Prerequisites & Requirements
- Understanding of JavaScript type systems
- Familiarity with TypeScript and Flow(optional)
Key Questions Answered
What challenges did Stripe face during the migration to TypeScript?
Stripe encountered issues with Flow's memory usage and slow integration, which prompted the switch to TypeScript. The tight coupling of components in their codebase made an incremental migration difficult, leading to the decision for a complete overhaul in a single pull request.
How did Stripe ensure a smooth transition from Flow to TypeScript?
Stripe planned the migration by using a codemod based on Airtable's conversion tool, allowing for a clean break from Flow. They also focused on passing builds through CI and conducting extensive manual testing to catch any issues before going live.
What were the immediate benefits of migrating to TypeScript?
The migration resulted in a significant boost in developer productivity, with engineers reporting improved tooling and satisfaction. The TypeScript community's resources and type definitions also enhanced the overall development experience.
What strategies did Stripe use to handle TypeScript errors during migration?
Stripe implemented a second pass in their codemod to suppress TypeScript errors using the @ts-expect-error comment. This allowed them to focus on eliminating Flow while addressing TypeScript errors progressively.
Key Statistics & Figures
Lines of code migrated
3.7 million
This figure represents the total code converted from Flow to TypeScript in a single pull request.
Error suppressions after initial migration
37,000
This number reflects the TypeScript error suppressions after iterating on the codemod, down from an initial 97,000.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Typescript
Used for type checking and improving developer productivity in Stripe's codebase.
Frontend
Flow
The previous type system used before migrating to TypeScript.
Frontend
Sail
A shared design system of strictly typed React components used during the migration.
Key Actionable Insights
1Utilize automated codemods for large-scale codebase migrations to reduce manual effort and cognitive overhead.Automated tools like the one developed by Airtable can streamline the conversion process, making it easier for teams to transition between different type systems without handling both simultaneously.
2Conduct thorough testing and validation before merging significant changes to ensure a smooth transition.Stripe's approach of locking the monorepo and performing extensive QA checks minimized risks associated with the migration, highlighting the importance of pre-merge testing.
3Engage with the developer community for shared tools and experiences to enhance migration strategies.Learning from other companies that have undergone similar migrations can provide valuable insights and resources, facilitating a more efficient transition.
Common Pitfalls
1
Failing to adequately test the migration can lead to subtle bugs in the codebase.
Without thorough testing, issues may arise post-migration that are not covered by existing automated tests, potentially affecting user experience.
Related Concepts
Javascript Type Systems
Automated Code Conversion
Developer Productivity Tools