SlideShare a Scribd company logo
TDD + JavaScript
Refactoring

Wolfram Kriesing, uxebu @wolframkriesing
Schedule
Intro Collect Dive in Crowd Start Solid
break
we hack
What did you take
away?
Reminder
Software
Craftsmanship
Apprentice
Journeyman
Master
no IFs
Day2 - Refactoring (Lecture SS 2015)
Refactoring
Design is hard.
The design of
reusable software
is especially hard.
Reusable software usually is the
result of many design iterations.
William F. Opdyke, 1992
it’sallaboutdesign
Books, papers
• „REFACTORING OBJECT-ORIENTED FRAMEWORKS“

William F. Opdyke, 1992

http://www.ai.univ-paris8.fr/~lysop/opdyke-thesis.pdf

• „Refactoring: Improving the Design of Existing Code“

Martin Fowler, 1999

• „Working Effectively with Legacy Code“

Michael Feathers, 2004

• „31 Days of Refactoring“

http://lostechies.com/wp-content/uploads/2011/03/31DaysRefactoring.pdf

• „Subjective evaluation of software evolvability using code smells: An
empirical study“

http://www.soberit.hut.fi/~mmantyla/ESE_2006.pdf
http://www.testingeducation.org/pt/Refactoring-smells.pdf
Our software …
we plan first
over time …
https://www.flickr.com/photos/ronipothead/6294148752
it gets rusty …
we should …
Day2 - Refactoring (Lecture SS 2015)
improve design
after
code was written
Improve design
after
code was written
what?
isn’t it reverse?
Tennis
Let’s collect smells!
Where does it come
from?
Day2 - Refactoring (Lecture SS 2015)
smalltalk
- made it popular
- enables agility
get from the book:
- code smells
- refactoring techniques
Day2 - Refactoring (Lecture SS 2015)
Incremental Design
Improve structure all the time
was not possible with this tower, of course
https://www.flickr.com/photos/jessicabee/897482687/
Baby Steps
to
Stay Green
Refactoring in action
Refactoring in action
• monolithic

• >1 indention levels

• nested loops











• modular

• explicit function names

• tiny functions

• max. one level indent

• no nested loops

• composing
• transparent responsibilities
• separation of concerns
• possible reusability
• code structure
• no unmaintained comments
• transparent responsibilities
• separation of concerns
• possible reusability
• code structure
Day2 - Refactoring (Lecture SS 2015)
What are code
smells?
http://james.padolsey.com/javascript/jquery-code-smells/
$ prefixing
Artificial selectors
Inefficient jQuery usage
Hard-code dependencies
Chain explosion
No-caching
It’s all automatically detectable!
Explore
Stabilize
Commoditize
e.g. with esprima
:-)
Common
Code Smells
https://www.flickr.com/photos/awnisalan/352498081
Common
Code Smells
https://www.flickr.com/photos/awnisalan/352498081
1) Low-hanging fruit
Comments
• may be wrong

• they rot

• useless

• actual good (method) name
Long methods
• hard to read

• many contexts

• too many LOC

• too many statements

• define your own
Duplicated code
• duplicated bugs

• double the fixes

• more code to ship

• performance break
Bad names
Long parameter list
• too many responsibilities

• bad API

• hard to use

• hard to maintain

• points to design defects
Boolean trap
• intention not clear

• easy to understand wrong
Complexity
Inconsistent names
Dead code
many more …
Common
Code Smells
https://www.flickr.com/photos/awnisalan/352498081
1) Low-hanging fruit
2) Boomerang
Conditionals
Combinatorial Explosion
Type embedding
Data Clumps
sets of variables that are always together, get passed in, etc. => extract into class
avoid placing types in method names; it's not only redundant, but it forces you to
change the name if the type changes
You have lots of code that does almost the same thing
watch out for large conditional logic blocks

particularly blocks that tend to grow larger or change significantly over time
Feature envy
a method making more use of another class than the one it is in
Speculative Generality
write code to solve today's problems

and worry about tomorrow's problems when they actually materialize
Common
Code Smells
https://www.flickr.com/photos/awnisalan/352498081
1) Low-hanging fruit
2) Boomerang
3) In tests
Test smells
http://xunitpatterns.com/Test%20Smells.html
Obscure test
it is difficult to understand the test at a glance
Conditional test logic
• tests take too long to run

• make developers not run the tests

• leads to untested code

• demotivates continuous testing

• make code rot
Setup too complex
Unclear Act
Multiple asserts
No assert
Logic in test
Duplication in tests
Dependent tests
Modification of unit under test
General fixture
a setUp method contains code only used by some tests
Lazy test
using the same fixture for multiple tests
Test run war
test can only be run by one person at a time, due to use of same external ressource
JavaScript
Code Smells
https://www.flickr.com/photos/brian-fitzgerald/3334353375
?
Refactorings
http://refactoring.com/catalog/

More Related Content

PPTX
Thinking of Documentation as Code [YUIConf 2013]
PPT
Docs as-code-missing.-manual
PDF
WordCamp US: Clean Code
PPTX
Unit Testing TypeScript
PPTX
Tech breakfast 18
PDF
How To Become A Good C# Programmer
PPT
8 - Javascript unit testing framework
PDF
Bad Smell In Codes 1
Thinking of Documentation as Code [YUIConf 2013]
Docs as-code-missing.-manual
WordCamp US: Clean Code
Unit Testing TypeScript
Tech breakfast 18
How To Become A Good C# Programmer
8 - Javascript unit testing framework
Bad Smell In Codes 1

Similar to Day2 - Refactoring (Lecture SS 2015) (20)

PDF
Keeping code clean
PPTX
Code smells and Other Malodorous Software Odors
PPTX
Refactoring, 2nd Edition
PDF
Introduction to refactoring
PDF
Code refactoring workshop (in Javascript)
PDF
[DevDay2018] Let’s all get along. Clean Code please! - By: Christophe K. Ngo,...
PPTX
PPTX
Refactoring
PDF
PDF
Managing and evolving JavaScript Code
PPTX
Code smell overview
PPTX
Clean Code
PDF
Bade Smells in Code
PDF
Refactoring: Improve the design of existing code
PDF
Refactoring 2 The Max
PPTX
refactoring code by clean code rules
PDF
Patterns, Code Smells, and The Pragmattic Programmer
PPTX
mehdi-refactoring.pptx
PDF
Refactoring PHP
PPTX
Metric driven refactoring
Keeping code clean
Code smells and Other Malodorous Software Odors
Refactoring, 2nd Edition
Introduction to refactoring
Code refactoring workshop (in Javascript)
[DevDay2018] Let’s all get along. Clean Code please! - By: Christophe K. Ngo,...
Refactoring
Managing and evolving JavaScript Code
Code smell overview
Clean Code
Bade Smells in Code
Refactoring: Improve the design of existing code
Refactoring 2 The Max
refactoring code by clean code rules
Patterns, Code Smells, and The Pragmattic Programmer
mehdi-refactoring.pptx
Refactoring PHP
Metric driven refactoring
Ad

More from wolframkriesing (20)

PDF
JavaScript The Language Meetup - Async functions
PDF
Our react-native experiences at crewmeister
PDF
ES6 katas - talk given at enterjs
PDF
TDD for Kids - VLCjs (Valencia Spain, July 2015)
PDF
ES6Katas.org - an introduction and the story behind
PDF
TDD with Google Spreadsheets #enterjs 2015
PDF
Baby steps
PDF
TDD with Google Spreadsheets
PDF
ECMAScript 6 for real
PDF
Refactoring out of the mess
PDF
Day1 - TDD (Lecture SS 2015)
PDF
react.js - DOM as it was meant
PDF
Pixelplant - WebDev Meetup Salzburg
PDF
Better Code through TDD
PDF
April JavaScript Tools
PDF
Presentation Mobile Monday Munich, March 2012
PDF
Webtestsuite black berrydevcon
PDF
PDF
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript The Language Meetup - Async functions
Our react-native experiences at crewmeister
ES6 katas - talk given at enterjs
TDD for Kids - VLCjs (Valencia Spain, July 2015)
ES6Katas.org - an introduction and the story behind
TDD with Google Spreadsheets #enterjs 2015
Baby steps
TDD with Google Spreadsheets
ECMAScript 6 for real
Refactoring out of the mess
Day1 - TDD (Lecture SS 2015)
react.js - DOM as it was meant
Pixelplant - WebDev Meetup Salzburg
Better Code through TDD
April JavaScript Tools
Presentation Mobile Monday Munich, March 2012
Webtestsuite black berrydevcon
JavaScript Tools (PHPConference 2011, Berlin)
Ad

Recently uploaded (20)

PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Encapsulation_ Review paper, used for researhc scholars
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
cuic standard and advanced reporting.pdf
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
Big Data Technologies - Introduction.pptx
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Approach and Philosophy of On baking technology
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
Machine learning based COVID-19 study performance prediction
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
20250228 LYD VKU AI Blended-Learning.pptx
Encapsulation_ Review paper, used for researhc scholars
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Agricultural_Statistics_at_a_Glance_2022_0.pdf
NewMind AI Weekly Chronicles - August'25 Week I
cuic standard and advanced reporting.pdf
Chapter 3 Spatial Domain Image Processing.pdf
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Big Data Technologies - Introduction.pptx
“AI and Expert System Decision Support & Business Intelligence Systems”
Digital-Transformation-Roadmap-for-Companies.pptx
Per capita expenditure prediction using model stacking based on satellite ima...
Approach and Philosophy of On baking technology
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Advanced methodologies resolving dimensionality complications for autism neur...
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Machine learning based COVID-19 study performance prediction
Building Integrated photovoltaic BIPV_UPV.pdf

Day2 - Refactoring (Lecture SS 2015)