Overview
Pinterest successfully migrated 3.7 million lines of code from Flow to TypeScript over eight months, enhancing type safety and developer experience. The article details their motivations, the migration process, and the lessons learned from this large-scale project.
What You'll Learn
1
How to migrate a large codebase from Flow to TypeScript
2
Why TypeScript is preferred over Flow for JavaScript type checking
3
How to automate the conversion process using codemods
Prerequisites & Requirements
- Familiarity with JavaScript and type checking concepts
- Experience with TypeScript and ESLint(optional)
Key Questions Answered
What were the main reasons for migrating from Flow to TypeScript?
Pinterest migrated to TypeScript due to better community support, enhanced language features, and the availability of TypeScript-proficient developers. The decision was influenced by the industry's shift towards TypeScript as the standard for JavaScript type checking.
How did Pinterest automate the migration process?
Pinterest employed a 'big bang' approach, migrating the entire codebase at once using a codemod. The process involved three key phases: Setup, Conversion, and Integration, ensuring a streamlined transition from Flow to TypeScript.
What challenges did Pinterest face during the migration?
Challenges included ensuring compatibility with existing systems, managing filename references, and addressing ESLint compatibility issues. The team had to track down numerous in-code references and adjust their build systems to accommodate the new TypeScript files.
Key Statistics & Figures
Lines of code migrated
3.7 million
This was the total amount of Flow code migrated to TypeScript over eight months.
Positive migration experience rating
97%
This percentage reflects survey respondents' overall satisfaction with the migration process.
Improvement in ESLint linting latency
40%
Switching to Discord's ESLint fork improved the full-project ESLint linting latency from 120 seconds to 70 seconds.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Typescript
Used as the new type-checking system for the codebase.
Frontend
Flow
The original type-checking system that was replaced during the migration.
Tools
@typescript-eslint
Used for linting TypeScript code.
Key Actionable Insights
1Automate the migration process to reduce manual errors and streamline workflows.Using codemods and automation scripts can significantly minimize the time spent on manual fixes and reduce the potential for human error during large migrations.
2Ensure comprehensive testing before and after the migration to validate functionality.Daily automated testing and multiple rounds of manual testing helped identify issues early, ensuring a smooth transition and maintaining code quality.
3Provide thorough training for developers on new technologies to ease the transition.Internal training sessions were beneficial, as 64% of survey respondents found the training helpful, leading to a more confident team during the migration.
Common Pitfalls
1
Failing to account for filename changes during migration can lead to integration issues.
Many systems relied on specific file extensions, and not updating these references resulted in significant manual effort to ensure compatibility with TypeScript.
2
Neglecting to automate the migration process can increase the risk of errors.
Manual migration processes are prone to human error, and automating these steps can help maintain consistency and reduce the workload.
Related Concepts
Typescript Migration Strategies
Automated Code Transformation Tools
Eslint Configuration For Typescript