Using TypeScript enabled our ever-growing Admin teams to leverage TypeScript’s compiler to catch potential bugs and errors well before they ship.
Overview
The article discusses the migration of Shopify's large TypeScript codebase to utilize project references, highlighting the challenges faced with editor performance and the improvements achieved through this migration. It provides insights into the process, tools used, and the significant performance gains realized post-migration.
What You'll Learn
1
How to migrate a large TypeScript codebase to project references
2
Why project references improve TypeScript editor performance
3
When to use the TypeTrack plugin for measuring performance
4
How to identify leaf nodes in a project dependency graph
Prerequisites & Requirements
- Understanding of TypeScript and its configuration
- Familiarity with Visual Studio Code and its plugins(optional)
Key Questions Answered
What are the benefits of migrating to TypeScript project references?
Migrating to TypeScript project references improves the performance of the TypeScript language features in Visual Studio Code, reducing initialization times significantly. This allows developers to work more efficiently by loading only the necessary parts of the codebase, leading to a smoother development experience.
How did Shopify measure improvements during the migration process?
Shopify initially used VSCode's TSServer logs to measure performance, which produced around 80,000 lines of logs. They later developed a plugin called TypeTrack to help teams track editor initialization times more effectively, making it easier to verify improvements.
What steps should be taken to migrate a codebase to project references?
To migrate a codebase to project references, start by identifying leaf nodes in the dependency graph, create project-level tsconfig files for those nodes, and gradually work up the dependency tree while resolving any compiler errors encountered during the process.
What common errors occur when migrating to project references?
Common errors during migration include the TypeScript compiler being unable to find referenced modules. This typically requires creating project-level tsconfig.json files for the dependent modules and ensuring they are referenced correctly in the consuming projects.
Key Statistics & Figures
Initialization time for packages/@web-utilities/env/index.ts
~155s
Before migration
Initialization time for packages/@shopify/address-autocomplete/AddressAutocomplete.ts
~155s
Before migration
Initialization time for tests/utilities/environment/app.tsx
~155s
Before migration
Improved initialization time for packages/@web-utilities/env/index.ts
~13s
After migration
Improved initialization time for packages/@shopify/address-autocomplete/AddressAutocomplete.ts
~8s
After migration
Improved initialization time for tests/utilities/environment/app.tsx
~10s
After migration
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Programming Language
Typescript
Used for developing the Shopify merchant admin UI and implementing project references.
Editor
Visual Studio Code
Provides TypeScript language features and tools for developers.
Key Actionable Insights
1Start the migration process by identifying leaf nodes in your project's dependency graph to ensure a manageable transition.Focusing on leaf nodes allows for a gradual migration that minimizes disruption and helps maintain code quality as you break down the codebase into smaller, more manageable projects.
2Utilize the TypeTrack plugin to measure and track improvements in editor performance during the migration.This tool provides valuable insights into initialization times, enabling teams to make informed decisions and adjustments as they migrate their code to project references.
3Run the TypeScript compiler with the --diagnostics flag to gain insights into the migration process.This flag helps identify issues early on by providing detailed information about what the compiler is doing, which can be crucial for troubleshooting errors during migration.
Common Pitfalls
1
Expecting to migrate a large codebase all at once can lead to overwhelming errors and a chaotic process.
Instead, approach the migration gradually by breaking down the codebase into smaller, manageable projects, which allows for easier troubleshooting and a smoother transition.
2
Failing to create project-level tsconfig.json files for dependent modules can result in unresolved module errors.
Ensure that each module has its own tsconfig.json and that they are referenced correctly to avoid compilation issues during the migration.
Related Concepts
Typescript Project References
Performance Optimization In Typescript
Dependency Management In Large Codebases