Codemods and large-scale refactors at Webflow

Codemods, short for code modifications, are scripts designed to automate tedious and error-prone code refactoring tasks, allowing engineers to efficiently handle large-scale changes across multiple codebases. At Webflow, codemods were successfully utilized to manage significant UI updates, such as the transition from old to new components using a higher-order component (HoC) called pickComponent, streamlining the process of toggling between different UI versions. The use of a toolkit like jscodeshift enabled the team to write unit tests for their codemods, ensuring reliability and minimizing errors during code transformations. Employing the AST (abstract syntax tree) explorer allowed for experimentation and test-driven development (TDD) practices, which facilitated the writing of effective codemods. As demonstrated in Webflow’s case, codemods significantly expedited the cleanup process, modifying over 20,000 lines of code without major visual regressions, proving their worth in managing complex codebases and enhancing development workflows.