TechPrufer
Sign inGet started

Blogs›Shopify›TypeScript Project References for Monorepo Performance

TypeScript Project References for Monorepo Performance

TypeScript Project References for Monorepo Performance

3
posts
2020–2023

Shopify has developed and enhanced its Ruby LSP (Language Server Protocol) to improve the developer experience for Ruby and Rails developers. This involves providing accurate, performant, and stable language features like Go to Definition and Auto Formatting without requiring type annotations. The Ruby LSP leverages the Syntax Tree gem for parsing Ruby code into Abstract Syntax Trees (ASTs) and employs the visitor pattern for analyzing these ASTs to implement features such as Folding Range. Document synchronization ensures the server maintains an up-to-date representation of open files. Future plans include adding framework-specific features for Rails development.

2023

Improving the Developer Experience with the Ruby LSP - Shopify

2/24/2023

This post details the development of the Ruby LSP, a new language server for Ruby. It explains the motivation behind creating a new server, focusing on performance and stability for large monoliths, and its opinionated nature for Rails development. The post elaborates on how language servers work, the benefits of the LSP specification, and the technical implementation of the Ruby LSP. It covers document synchronization, parsing Ruby code using the Syntax Tree gem to generate ASTs, and analyzing these ASTs using the visitor pattern to implement features like Folding Range. The post also highlights the use of JSON for communication between the editor (client) and the language server.

2021

Reusing Code with React Native Packages at Shopify - Shopify

9/29/2021

This 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.

2020

Migrating Large TypeScript Codebases To Project References - Shopify

7/29/2020

This post details the migration of a large TypeScript codebase to use TypeScript Project References. It addresses the problem of slow editor performance (TS-Server initialization taking minutes) in monolithic TypeScript projects. The solution involves breaking the codebase into smaller, inter-referenced projects. The post outlines the process of identifying leaf nodes, creating project-level tsconfig.json files, and referencing them. It also introduces a custom VSCode plugin, TypeTrack, for measuring editor initialization time improvements and provides documentation for other teams to adopt this strategy. The core technical contribution is the systematic application of Project References to improve monorepo developer experience.