Figma 迈向 TypeScript 的旅程 | Figma 博客

Skew's Origin and Purpose: Began as a side project in Figma's early days to build a prototype viewer with support on web and mobile. It became a compile-to-JavaScript language with advanced optimizations but faced challenges like difficulty for new hires and lack of an external developer ecosystem.
Migration to TypeScript: Recently finished migrating all Skew code at Figma to TypeScript. Reasons for the migration included more mobile browser support for WebAssembly, replacing Skew engine components with C++ engine components, and team growth.
- WebAssembly Support: Mobile browsers started supporting WebAssembly in 2018, and reliable mobile performance was achieved by 2020, making it possible to move to TypeScript.
- Performance Improvements: Other performance improvements caught up to Skew's optimizations. By replacing core components with C++ engine components, performance loss when moving to TypeScript was minimized.
- Team Growth: As Figma's prototyping and mobile teams grew, resources were available to focus on the developer experience and perform the migration.
Converting the Codebase: The migration was done gradually in three phases. In Phase 1, a transpiler was developed to show developers the new TypeScript codebase. In Phase 2, production traffic was rolled out to build from the TypeScript codebase directly, and type errors were fixed. In Phase 3, the Skew code was cut off, and developers were required to write code in TypeScript.
Transpiler Work: A transpiler was built to convert Skew code to TypeScript. It faced challenges like performance issues with array destructuring, handling Skew's "devirtualization" optimization, and dealing with initialization order differences in TypeScript. These issues were addressed to ensure the transpiler produced compiling TypeScript code that matched Skew's performance.
Case Studies:
- Keeping Developers Happy with Source Maps: Source maps were used to map compiled JavaScript back to Skew source code for debugging. New source maps were generated during the TypeScript migration to ensure correct mappings and a seamless debugging experience.
- Conditional Compilation: In Skew, top-level "if" statements allowed conditional code compilation. In TypeScript, conditional compilation was performed in the build step using esbuild's "defines" feature. However, this led to a slightly larger bundle size.
Benefits of TypeScript: Migrating to TypeScript modernized the codebase at Figma, enabling easier integration with internal and external code and improving developer efficiency. Future possibilities include further integration with the codebase, easier package management, and use of new TypeScript features.
Acknowledgments: Thanked Andrew Chan, Ben Drebing, and Eddie Shiang for their contributions. Encouraged others to work at Figma.