TDD + JavaScript

Refactoring

Wolfram Kriesing, uxebu @wolframkriesing

Sche

dule

Intro Collect Dive in Crowd Start Solid

break

we hack

What did you take away?

ReminderSoftware

Craftsmanship

Apprentice Journeyman

Master

no IFs

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’s a

ll abo

ut d

esig

n

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 …

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?

smalltalk

- made it popular - enables agility

get from the book: - code smells - refactoring techniques

Incremental Design

Improve structure all the timewas 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

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 Clumpssets 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 blocksparticularly blocks that tend to grow larger or change significantly over time

Feature envya method making more use of another class than the one it is in

Speculative Generalitywrite 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 testit 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 fixturea setUp method contains code only used by some tests

Lazy testusing the same fixture for multiple tests

Test run wartest 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/