JSFoo Pune 2020

JSFoo Pune 2020

On component architecture, performance, security for front-end, and emerging trends

Rajasegar Chandiran


Codemods - A Paradigm Shift in Migrating Large code-bases

Submitted Jan 16, 2020

Codemod is a mechanism to make sweeping changes across your code with ease and effectiveness, assisting in large-scale migrations of the code-base. This can be performed through automated tools such as jscodeshift. Many JS frameworks rely heavily on codemods to make the associated code migrations seamless, so that the developers using the frameworks don’t have to rewrite a significant amount of code when they move on to new APIs or to a new version of the framework itself. Frameworks such as React, Vue, Angular and Ember have published a lot of codemods (and codemod tools) to assist the developers to carry out large-scale code migrations for the applications written in the frameworks.


Codemods - Why and What, Problem with Regex pattern matching, Find & Replace Limitations, AST, How codemods work, Tooling around codemods - jscodeshift, recast, astexplorer.net, ast-types, codemod-cli and possibly a small demo of creating a codemod if time permits.

Speaker bio

I am working with Freshworks as a front-end developer. I am passionate about open-source software and currently writing codemods for the Ember.js community.
Having studied and written
a lot of codemods in Javascript, I become more involved in the tooling using ASTs(Abstract Syntax Trees). So then I explored writing codemods even for other languages like Ruby for doing large-scale migrations for Ruby on Rails also. In the process, I became more familiar with the AST tooling like parsers, compilers and so on, such as Babel, JSCodeshift and ESCodegen. I have published a lot of official codemods for the Ember.js framework and work closely with the Core team on improving the codemod tooling for the framework.





{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}