Codemods: Refactoring JavaScript using JavaScript

on YouTube ↗29m

" summary

Explains how to programmatically refactor JavaScript using js-codeshift and recast, converting patterns like React.createClass to ES2015 classes and turning function expressions into safe arrow functions while avoiding uses of this. Describes parsing to ASTs, writing transformers that return modified source, running codemods across code bases, and safety practices: unit tests, small PRs, and no manual edits. Reports real results: modernizes thousands of files and saves hundreds of developer hours in practice.

AI-written summary · about

" chapters (19)

1. 0:00Start
2. 0:59code-what?
3. 2:05What does running a codemod look like?
4. 3:30Codemods unblock complex application-wide refactors.
5. 4:30What are some possible refactors?
6. 4:56Refactor React components to unblock upgrades after API changes.
7. 5:34We'll use jscodeshift to run codemod scripts on our files.
8. 6:50Recast is a tool for parsing JavaScript, manipulating it, and then returning it.
9. 7:28Recast generates an abstract syntax tree (AST) by parsing our JavaScript.
10. 8:04Trees are data structures that consist of nodes that are linked to one another.
11. 8:29The nodes in an abstract syntax tree describe the structure of our
12. 10:24Writing Codemods
13. 10:412. Modify the AST as required • Traverse tree for nodes ⚫ Update the nodes
14. 20:04Tips
15. 20:29Have safety nets in place before using codemods.
16. 20:58Don't make additional changes on codemod refactored branches.
17. 21:34Split up large refactors into multiple pull requests.
18. 21:52Write documentation for any codemods, and include them in pull requests.
19. 22:37Treat any coded scripts written internally as actual code.

" related talks

• 34mCodemods and Transforming JavaScript CodeMikhail Hatsilau · The Rolling Scopes Conference 2018
• 40mRefactoring large JavaScript codebasesMichele Riva · jsday 2022
• 13mCodemods how to support your users with breaking changes deliveryŁukasz Nowak · React Alicante 2023
• 43mMachine Powered Refactoring: Leverage AST's to Push Your Legacy Code (& the Web) ForwardAmal Hussein · Node+JS Interactive 2018
• 01h 09mBabel: A refactoring toolNicolò Ribaudo · HolyJS 2020 Moscow
• 20mThey see me refactorin'. They hatin'Vit Gottwald · ReactiveConf 2018
• 28mMaster the art of the AST and take control of your JSYonatan Mevorach · Full Stack Fest 2017
• 30mRefactoring large JavaScript codebasesMichele Riva · Øredev 2022