Automating Front-End Refactoring
summary
Claim: using ASTs & codemods actually automates large front‑end API migrations with confidence. The team writes transformations with jscodeshift, builds and inspects trees in AST Explorer, and converts patterns (example: replacing many new Foo(arg1,arg2) constructors with Foo.build({a:arg1,b:arg2})). A single codemod runs across the repo, produces a big PR, and the migration applies reliably so manual edits drop from hundreds to a handful of review fixes.
AI-written summary · about
chapters (29)
- 0:00Introduction
- 0:30refactoring and migrations
- 0:51maintaining code
- 2:29the frontend nightmare
- 3:22current stack
- 4:51how we got there
- 5:18what is codemode
- 5:41how does codemode work
- 6:05syntax tree definition
- 6:36simple function
- 7:08ASP Explorer
- 7:25Function Declaration
- 7:53GS Coaches
- 9:07Object
- 9:50Regex
- 10:52AST Explorer
- 11:34New Expression
- 12:41Exporting a Function
- 13:54Transforming an Import
- 14:42Transforming Special New Expressions
- 14:57Importing New Expressions
- 15:33Object Expression
- 15:45Node Arguments
- 16:11Argument Object
- 16:58Result
- 17:09Transformation
- 17:27ASDs
- 18:25CSS
- 20:33Summary
related talks
47mComputer, refactor my code!
40mRefactoring large JavaScript codebases
27mHow Codemods Turned a Nightmare into a 3-Minute Migration
43mMachine Powered Refactoring: Leverage AST's to Push Your Legacy Code (& the Web) Forward
34mMass Frontend Refactors: Less Stress; More Success
22mMaking Code Automations at Scale: Leveraging AI for Code Migrations
25mManage large refactors with JSCodeShift
34mCodemods and Transforming JavaScript Code