REFACTORING WITH CODEMODS
@KENNETH_SKOVHUS
COPENHAGEN.JS X-MAS SPECIAL 2016
Slide 2
Slide 2 text
JAVASCRIPT CODEMODS
@KENNETH_SKOVHUS
COPENHAGEN.JS X-MAS SPECIAL 2016
Slide 3
Slide 3 text
CODEMODS?
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
SEARCH AND REPLACE
Slide 6
Slide 6 text
SEARCH AND REPLACE
REGULAR EXPRESSIONS
Slide 7
Slide 7 text
SEARCH AND REPLACE
REGULAR EXPRESSIONS
BABEL
Slide 8
Slide 8 text
SEARCH AND REPLACE
REGULAR EXPRESSIONS
CODEMODS
BABEL
Slide 9
Slide 9 text
“THINK OF CODEMODS AS A SCRIPTED
FIND AND REPLACE FUNCTIONALITY
THAT CAN READ AND WRITE CODE.”
JEREMY GREER @REERGYMEREJ
Slide 10
Slide 10 text
var O = 'Tannenbaum'
var song = 'Let it snow'
song += '!'
Slide 11
Slide 11 text
var O = 'Tannenbaum'
var song = 'Let it snow'
song += '!'
const O = 'Tannenbaum'
let song = 'Let it snow'
song += '!'
Slide 12
Slide 12 text
var O = 'Tannenbaum'
var song = 'Let it snow'
song += '!'
const O = 'Tannenbaum'
let song = 'Let it snow'
song += '!'
ABSTRACT SYNTAX TREE (AST)
Slide 13
Slide 13 text
var O = 'Tannenbaum'
var song = 'Let it snow'
song += '!'
const O = 'Tannenbaum'
let song = 'Let it snow'
song += '!'
Program
VariableDeclaration
{type: ‘var’}
VariableDeclaration
{type: ‘var’}
ExpressionStatement
VariableDeclarator
VariableDeclarator
AssignmentExpression
{operator: ‘+=‘}
Identifier: O
Literal: “Tannenbaum”
Identifier: song
Literal: “Let is snow”
Identifier: song
Literal: “!”
Slide 14
Slide 14 text
var O = 'Tannenbaum'
var song = 'Let it snow'
song += '!'
const O = 'Tannenbaum'
let song = 'Let it snow'
song += '!'
Program
VariableDeclaration
{type: ‘var’}
VariableDeclaration
{type: ‘var’}
ExpressionStatement
VariableDeclarator
VariableDeclarator
AssignmentExpression
{operator: ‘+=‘}
Identifier: O
Literal: “Tannenbaum”
Identifier: song
Literal: “Let is snow”
Identifier: song
Literal: “!”
Slide 15
Slide 15 text
var O = 'Tannenbaum'
var song = 'Let it snow'
song += '!'
const O = 'Tannenbaum'
let song = 'Let it snow'
song += '!'
Program
VariableDeclaration
{type: ‘const’}
VariableDeclaration
{type: ‘let’}
ExpressionStatement
VariableDeclarator
VariableDeclarator
AssignmentExpression
{operator: ‘+=‘}
Identifier: O
Literal: “Tannenbaum”
Identifier: song
Literal: “Let is snow”
Identifier: song
Literal: “!”
/**
* This doesn’t do anything.
*/
module.exports = function(fileInfo, api, options) {
// transform `fileInfo.source` here
// ...
// return changed source
return source;
};
Slide 20
Slide 20 text
/**
* This replaces every occurrence of variable "foo".
*/
module.exports = function(fileInfo, api) {
return api.jscodeshift(fileInfo.source)
.findVariableDeclarators('foo')
.renameTo('bar')
.toSource();
};
Slide 21
Slide 21 text
var O = 'Tannenbaum'
var song = 'Let it snow'
song += '!'
const O = 'Tannenbaum'
let song = 'Let it snow'
song += '!'
Program
VariableDeclaration
{type: ‘const’}
VariableDeclaration
{type: ‘let’}
ExpressionStatement
VariableDeclarator
VariableDeclarator
AssignmentExpression
{operator: ‘+=‘}
Identifier: O
Literal: “Tannenbaum”
Identifier: song
Literal: “Let is snow”
Identifier: song
Literal: “!”
ES2015 (ARROW FUNCTIONS, CONST/LET, TEMPLATE STRING)
COFFEESCRIPT TO ES2015
REACT CLASSES TO PURE COMPONENTS
PAINLESS LIB UPGRADING (REACT INCLUDES CODEMODS)
CODE FITNESS!
CODEMODS APPLICATIONS
Slide 25
Slide 25 text
“TOOL ASSISTED CODE MODIFICATIONS CAN
HELP EVOLVE COMPLEX SYSTEMS
INCREMENTALLY AND AID IN MAINTAINING
THE HEALTH OF LARGE CODEBASES.”
CHRISTOPH POJER @CPOJER
Slide 26
Slide 26 text
REMOVAL OF TRANSLATIONS
CODEMODS APPLICATIONS
const i18n = require('i18n');
var song = i18n.t('xmas.snow');
{
"xmas": {
"snow": "let it snow"
}
}
const __ = t => t;
var song = __('let is snow');
Slide 27
Slide 27 text
TRY OUT NEW SHINY TOOLS ON EXISTING CODEBASE
CODEMODS APPLICATIONS
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
TAPE
AVA
JEST
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
“CODEMODS ENABLES YOU TO
FIND THE RIGHT TOOL FOR THE JOB
BY LETTING YOU TRY OUT DIFFERENT
TOOLS ON EXISTING CODEBASE.”
Slide 32
Slide 32 text
THANKS!
Slide 33
Slide 33 text
@KENNETH_SKOVHUS
COPENHAGEN.JS X-MAS SPECIAL 2016
REFACTORING WITH CODEMODS
Slide 34
Slide 34 text
@KENNETH_SKOVHUS
COPENHAGEN.JS X-MAS SPECIAL 2016
REFACTORING WITH CODEMODS