SlideShare a Scribd company logo
Code Refactoring
in Javascript
Ilias Bartolini
Agenda
●
Introduction to Refactoring
●
Initial setup exercise
- break -
●
Refactoring examples
●
You own refactoring
journey
Where are my black socks?
Where are my black socks?
I need a 12mm spanner...
I need a 12mm spanner...
Coding activity
Writing code
Reading code
“Any fool can write code that a computer
can understand. Good programmers write
code that humans can understand.”
- Martin Fowler
Refactoring
Refactoring
“Refactoring is the process of changing a
software system in such a way that it does
not alter the external behavior of the code
yet improves its internal structure.”
- Martin Fowler
Hello demo exercise
●
Set up in pairs
...and exchange keyboard often!
●
Get the codebase
$ git clone
github.com/iliasbartolini/code_refactoring
$ cd code_refactoring
$ npm install
$ npm test
●
Check the /1_hello/ example
See: https://refactoring.com/catalog/
See: https://refactoring.guru
Some refactoring...
Rename method, variable, class, …
Replace magic numbers
Extract / Inline method or function
Extract / Inline variable
Move method, Extract class
Replace if/switch with polymorphism
Pull up / Push down method, Extract interface
Replace inheritance with delegation
And some smells...
Source: iStock Michał Ludwiczak
Code smells and refactoring
Treatment
●
Extract duplicate part
●
Extract & split
●
Introduce class
●
Move responsibility
●
Split responsibilities
●
Introduce polymorphism, ...
●
Delete, delete, delete
●
Rename / Extract method
Symptom
●
Duplicated code
●
Long function/class
●
Long list of parameters
●
Code “envy”
●
Divergent changes
●
Common if/switch lists
●
Speculative generic code
●
Code comments
//are like a deodorant
Practice!
Check the examples in order
/2_date_parser/
/3_direction/
Tools & Language support
Let’s focus on baby steps!
1) Identify a smell
2) Make a refactoring
3) Run tests!
4) Repeat
●
Write down the list of
smells you see and
refactoring you apply
●
Remember to swap
keyboard ;)
Practice!
Check the examples in order
/4_order_receipt/
/5_rover/
Myths
“Refactoring takes time”
Good design makes you faster
https://www.martinfowler.com/bliki/DesignStaminaHypothesis.html
Myths
“You don’t need to refactor
your test code”
TDD
Test Driven Development
Write a
test first
Implement
solution
Refactor
Commit
Add more tests
“Test code” is “code”
...and should be maintained
with the same quality criteria
Myths
“We need to stop the project
for this refactoring”
Boy scout rule
“Leave the campground
cleaner than you found it.”
Summary
●
Change code in “baby steps”
●
Make use of a test suite
●
Learn to identify “smells”
●
Try to make your code “obvious”
●
Continuously improve the “code design”
●
Practice, practice, practice makes perfect
:)
Feedback
bit.ly /
<add a feedback link>
Thank you! :)
This work is licensed under a Creative Commons
Attribution-ShareAlike 3.0 Unported License.
It makes use of the works of...
Slides template:
Mateus Machado Luna
Images credits:
https://www.flickr.com/photos/dietjay/3140774470/
https://www.flickr.com/photos/147489968@N06/
https://www.flickr.com/photos/silvertje/2197752384/
https://www.flickr.com/photos/mtneer_man/7819976694/
https://www.flickr.com/photos/lingoflora/2331681471/
Ad

Recommended

Language portfolio
Language portfolio
Dhaval Dalal
 
Good coding-style, a talk made in 2008 to encourage changes in MySQL coding s...
Good coding-style, a talk made in 2008 to encourage changes in MySQL coding s...
Kostja Osipov
 
Pmd naming-rules
Pmd naming-rules
3trg
 
Common design patterns in php
Common design patterns in php
David Stockton
 
Behat - human-readable automated testing
Behat - human-readable automated testing
nyccamp
 
Coding standards for java
Coding standards for java
maheshm1206
 
Coding standard
Coding standard
FAROOK Samath
 
BDD with Behat
BDD with Behat
Richard Shank
 
Refactoring, 2nd Edition
Refactoring, 2nd Edition
jexp
 
Writing Readable Code
Writing Readable Code
eddiehaber
 
Extract Method Refactoring Workshop (2016)
Extract Method Refactoring Workshop (2016)
Peter Kofler
 
Working With Legacy Code
Working With Legacy Code
Andrea Polci
 
TDD and Simple Design Workshop - Session 1 - March 2019
TDD and Simple Design Workshop - Session 1 - March 2019
Paulo Clavijo
 
How I Learned to Stop Worrying and Love Legacy Code.....
How I Learned to Stop Worrying and Love Legacy Code.....
Mike Harris
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
Gavin Pickin
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE - CFObjective() 2017
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE - CFObjective() 2017
Ortus Solutions, Corp
 
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Chris Laning
 
Code Quality
Code Quality
François Camus
 
Good Coding Practices with JavaScript
Good Coding Practices with JavaScript
🏁 Pierre-Henry Soria 💡
 
Few minutes To better Code - Refactoring
Few minutes To better Code - Refactoring
Diaa Al-Salehi
 
Refactoring
Refactoring
Avner Sorek
 
Ruby code smells
Ruby code smells
Rodrigo Urubatan
 
Evolutionary Design - Refactoring Heuristics
Evolutionary Design - Refactoring Heuristics
Adi Bolboaca
 
Half-automatic Compilable Source Code Recovery
Half-automatic Compilable Source Code Recovery
Joxean Koret
 
Writing code for others
Writing code for others
Amol Pujari
 
YAGNI Principle and Clean Code
YAGNI Principle and Clean Code
Luan Reffatti
 
Code reviews
Code reviews
Roger Xia
 
Refactoring Legacy Code
Refactoring Legacy Code
Adam Culp
 
Getting started with Ruby on Rails
Getting started with Ruby on Rails
Ilias Bartolini
 
Building and evolving microservices
Building and evolving microservices
Ilias Bartolini
 

More Related Content

Similar to Code refactoring workshop (in Javascript) (20)

Refactoring, 2nd Edition
Refactoring, 2nd Edition
jexp
 
Writing Readable Code
Writing Readable Code
eddiehaber
 
Extract Method Refactoring Workshop (2016)
Extract Method Refactoring Workshop (2016)
Peter Kofler
 
Working With Legacy Code
Working With Legacy Code
Andrea Polci
 
TDD and Simple Design Workshop - Session 1 - March 2019
TDD and Simple Design Workshop - Session 1 - March 2019
Paulo Clavijo
 
How I Learned to Stop Worrying and Love Legacy Code.....
How I Learned to Stop Worrying and Love Legacy Code.....
Mike Harris
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
Gavin Pickin
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE - CFObjective() 2017
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE - CFObjective() 2017
Ortus Solutions, Corp
 
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Chris Laning
 
Code Quality
Code Quality
François Camus
 
Good Coding Practices with JavaScript
Good Coding Practices with JavaScript
🏁 Pierre-Henry Soria 💡
 
Few minutes To better Code - Refactoring
Few minutes To better Code - Refactoring
Diaa Al-Salehi
 
Refactoring
Refactoring
Avner Sorek
 
Ruby code smells
Ruby code smells
Rodrigo Urubatan
 
Evolutionary Design - Refactoring Heuristics
Evolutionary Design - Refactoring Heuristics
Adi Bolboaca
 
Half-automatic Compilable Source Code Recovery
Half-automatic Compilable Source Code Recovery
Joxean Koret
 
Writing code for others
Writing code for others
Amol Pujari
 
YAGNI Principle and Clean Code
YAGNI Principle and Clean Code
Luan Reffatti
 
Code reviews
Code reviews
Roger Xia
 
Refactoring Legacy Code
Refactoring Legacy Code
Adam Culp
 
Refactoring, 2nd Edition
Refactoring, 2nd Edition
jexp
 
Writing Readable Code
Writing Readable Code
eddiehaber
 
Extract Method Refactoring Workshop (2016)
Extract Method Refactoring Workshop (2016)
Peter Kofler
 
Working With Legacy Code
Working With Legacy Code
Andrea Polci
 
TDD and Simple Design Workshop - Session 1 - March 2019
TDD and Simple Design Workshop - Session 1 - March 2019
Paulo Clavijo
 
How I Learned to Stop Worrying and Love Legacy Code.....
How I Learned to Stop Worrying and Love Legacy Code.....
Mike Harris
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
Gavin Pickin
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE - CFObjective() 2017
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE - CFObjective() 2017
Ortus Solutions, Corp
 
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Taming the Legacy Beast: Turning wild old code into a sleak new thoroughbread.
Chris Laning
 
Few minutes To better Code - Refactoring
Few minutes To better Code - Refactoring
Diaa Al-Salehi
 
Evolutionary Design - Refactoring Heuristics
Evolutionary Design - Refactoring Heuristics
Adi Bolboaca
 
Half-automatic Compilable Source Code Recovery
Half-automatic Compilable Source Code Recovery
Joxean Koret
 
Writing code for others
Writing code for others
Amol Pujari
 
YAGNI Principle and Clean Code
YAGNI Principle and Clean Code
Luan Reffatti
 
Code reviews
Code reviews
Roger Xia
 
Refactoring Legacy Code
Refactoring Legacy Code
Adam Culp
 

More from Ilias Bartolini (11)

Getting started with Ruby on Rails
Getting started with Ruby on Rails
Ilias Bartolini
 
Building and evolving microservices
Building and evolving microservices
Ilias Bartolini
 
Desing principles: tensions and synergies v3.0
Desing principles: tensions and synergies v3.0
Ilias Bartolini
 
Desing principles: tensions and synergies
Desing principles: tensions and synergies
Ilias Bartolini
 
Climate Change
Climate Change
Ilias Bartolini
 
Training and Coaching Agile Minds
Training and Coaching Agile Minds
Ilias Bartolini
 
Facilitation 101
Facilitation 101
Ilias Bartolini
 
The hidden beauty of the rainbow
The hidden beauty of the rainbow
Ilias Bartolini
 
Paul Collier - The Bottom Billion
Paul Collier - The Bottom Billion
Ilias Bartolini
 
A personal (self) review
A personal (self) review
Ilias Bartolini
 
Lean startup And Occupy Movement
Lean startup And Occupy Movement
Ilias Bartolini
 
Getting started with Ruby on Rails
Getting started with Ruby on Rails
Ilias Bartolini
 
Building and evolving microservices
Building and evolving microservices
Ilias Bartolini
 
Desing principles: tensions and synergies v3.0
Desing principles: tensions and synergies v3.0
Ilias Bartolini
 
Desing principles: tensions and synergies
Desing principles: tensions and synergies
Ilias Bartolini
 
Training and Coaching Agile Minds
Training and Coaching Agile Minds
Ilias Bartolini
 
The hidden beauty of the rainbow
The hidden beauty of the rainbow
Ilias Bartolini
 
Paul Collier - The Bottom Billion
Paul Collier - The Bottom Billion
Ilias Bartolini
 
A personal (self) review
A personal (self) review
Ilias Bartolini
 
Lean startup And Occupy Movement
Lean startup And Occupy Movement
Ilias Bartolini
 
Ad

Recently uploaded (20)

AI for PV: Development and Governance for a Regulated Industry
AI for PV: Development and Governance for a Regulated Industry
Biologit
 
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
Top Time Tracking Solutions for Accountants
Top Time Tracking Solutions for Accountants
oliviareed320
 
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
 
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
 
From Code to Commerce, a Backend Java Developer's Galactic Journey into Ecomm...
From Code to Commerce, a Backend Java Developer's Galactic Journey into Ecomm...
Jamie Coleman
 
University Campus Navigation for All - Peak of Data & AI
University Campus Navigation for All - Peak of Data & AI
Safe Software
 
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
 
Key Challenges in Troubleshooting Customer On-Premise Applications
Key Challenges in Troubleshooting Customer On-Premise Applications
Tier1 app
 
IObit Driver Booster Pro 12 Crack Latest Version Download
IObit Driver Booster Pro 12 Crack Latest Version Download
pcprocore
 
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
WSO2
 
Which Hiring Management Tools Offer the Best ROI?
Which Hiring Management Tools Offer the Best ROI?
HireME
 
Heat Treatment Process Automation in India
Heat Treatment Process Automation in India
Reckers Mechatronics
 
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
pcprocore
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
arctitecture application system design os dsa
arctitecture application system design os dsa
za241967
 
IDM Crack with Internet Download Manager 6.42 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 [Latest 2025]
HyperPc soft
 
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdf
IMG Global Infotech
 
AI for PV: Development and Governance for a Regulated Industry
AI for PV: Development and Governance for a Regulated Industry
Biologit
 
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
Top Time Tracking Solutions for Accountants
Top Time Tracking Solutions for Accountants
oliviareed320
 
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
 
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
 
From Code to Commerce, a Backend Java Developer's Galactic Journey into Ecomm...
From Code to Commerce, a Backend Java Developer's Galactic Journey into Ecomm...
Jamie Coleman
 
University Campus Navigation for All - Peak of Data & AI
University Campus Navigation for All - Peak of Data & AI
Safe Software
 
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
 
Key Challenges in Troubleshooting Customer On-Premise Applications
Key Challenges in Troubleshooting Customer On-Premise Applications
Tier1 app
 
IObit Driver Booster Pro 12 Crack Latest Version Download
IObit Driver Booster Pro 12 Crack Latest Version Download
pcprocore
 
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
WSO2
 
Which Hiring Management Tools Offer the Best ROI?
Which Hiring Management Tools Offer the Best ROI?
HireME
 
Heat Treatment Process Automation in India
Heat Treatment Process Automation in India
Reckers Mechatronics
 
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
pcprocore
 
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
arctitecture application system design os dsa
arctitecture application system design os dsa
za241967
 
IDM Crack with Internet Download Manager 6.42 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 [Latest 2025]
HyperPc soft
 
Why Edge Computing Matters in Mobile Application Tech.pdf
Why Edge Computing Matters in Mobile Application Tech.pdf
IMG Global Infotech
 
Ad

Code refactoring workshop (in Javascript)