TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

TypeScript Project References for Monorepo Performance

3 posts · Jul 2020 – Feb 2023

What this trail covers

Shopify has developed and enhanced its use of TypeScript Project References to improve monorepo performance and developer experience. This involves breaking down large TypeScript codebases into smaller, more manageable projects, reducing editor initialization times and improving build performance. The migration is done gradually, starting with leaf nodes in the dependency graph and working upwards, with tools like TypeTrack developed to measure improvements. This approach encourages code modularity and a healthier codebase.

All Shopify trails
  1. Improving the Developer Experience with the Ruby LSP - ShopifyThis post details the development of the Ruby LSP, a new language server designed to enhance the developer experience for Ruby and Rails developers. It explains the motivation for a new server, focusing on performance and stability without requiring type annotations. The post outlines how language servers work using the LSP specification and JSON communication. It then dives into the Ruby LSP's implementation, explaining document synchronization and how it parses Ruby code into Abstract Syntax Trees (ASTs) using the Syntax Tree gem. Finally, it describes the use of the visitor pattern to analyze ASTs for features like Folding Range.
  2. Reusing Code with React Native Packages at Shopify - ShopifyThis post details the implementation of a monorepo strategy for React Native packages at Shopify. It covers the considerations for choosing a monorepo over a multi-repo approach, focusing on reduced maintenance costs and lower entrance barriers. The setup details include using TypeScript with project references, Yarn Workspaces, and Lerna for publishing. It also describes custom configurations for Babel and Metro to support hot-reloading and cross-package referencing within a fixture app. The post further elaborates on code generation using PlopJS for new packages and auto-generated documentation with Gatsby, and outlines the release process using Lerna with pre- and version lifecycle scripts.
  3. Migrating Large TypeScript Codebases To Project References - ShopifyThis post details the migration of Shopify's large TypeScript codebase to use Project References. It explains the performance issues encountered with large codebases in VSCode and TypeScript's TS-Server, the collaboration with the TypeScript team at Microsoft, and the gradual migration strategy starting with leaf nodes. It also introduces TypeTrack, an internal VSCode plugin for measuring editor initialization times, and outlines general steps for migrating codebases to Project References, including handling common errors and refactoring spaghetti code.