@onishiweb
Taking the pain
out of Refactoring
Adam Onishi
Second Wednesday - March
Slide 2
Slide 2 text
@onishiweb
Front End
Cheese
@onishiweb
https://flic.kr/p/8RSfDf
Slide 3
Slide 3 text
@onishiweb
“Code Smells”
Cheese
Slide 4
Slide 4 text
@onishiweb
My code,
stinks!
Slide 5
Slide 5 text
@onishiweb
Cheese
Slide 6
Slide 6 text
@onishiweb
Old code
sucks!
http://bit.ly/old-code-sucks
Cheese
Slide 7
Slide 7 text
@onishiweb
Refactoring!
Slide 8
Slide 8 text
@onishiweb
- Martin Fowler
“The process of changing a
software system in such a way that
it does not alter the external
behaviour of the code yet improves
its internal structure.”
http://bit.ly/refactoring-book
Refactoring
@onishiweb
Clarity
“Code should be clear, well-
commented, and follow consistent
rules. A developer new to the project
should be able to understand it.”
Refactoring
Slide 13
Slide 13 text
@onishiweb
Maintainability
“Code should be easy to update &
maintain, not requiring hacks or
over-specific styles. It should be
clear where files and styles belong.”
Refactoring
Slide 14
Slide 14 text
@onishiweb
Efficiency
“It should be easy for a developer to
find where styles live, write new
styles, fix bugs, or find
documentation and instructions.”
Refactoring
Slide 15
Slide 15 text
@onishiweb
DRY
“Don't repeat yourself! Code
should be reusable, have efficient
selectors, and not be overly
repetitive or nested.”
Refactoring
Slide 16
Slide 16 text
@onishiweb
CSS & Sass
Smells
Slide 17
Slide 17 text
@onishiweb
http://bit.ly/css-smells
Undoing styles
Magic Numbers
Qualified/Dangerous
selectors
Hard-coded values
Brute forcing
Reactive !important
IDs
Loose Class names
Too much nesting
Code smells
Slide 18
Slide 18 text
@onishiweb
My Smelly
code…
Code smells
Slide 19
Slide 19 text
@onishiweb
When do you
refactor?
Slide 20
Slide 20 text
@onishiweb
All the time!
When
Slide 21
Slide 21 text
@onishiweb
- Robert “Uncle Bob” Martin
“The act of leaving a mess in the
code should be as socially
unacceptable as littering.”
http://deviq.com/boy-scout-rule/
When
Slide 22
Slide 22 text
@onishiweb
Set Goals
When
Slide 23
Slide 23 text
@onishiweb
- Amaury Moulron
“We have currently 9,000+ selectors
— that’s pre-refactoring. Once done,
we’re aiming at 5,000 selectors.”
http://bit.ly/buzzfeed-sass
When
Slide 24
Slide 24 text
@onishiweb
@onishiweb
When
Slide 25
Slide 25 text
@onishiweb
S.M.A.R.T Goals
for refactoring
When
Slide 26
Slide 26 text
@onishiweb
Our goals
When
Slide 27
Slide 27 text
@onishiweb
- Partials to have <300 lines of code
- Maximum 4 levels of nesting
- Code should adhere to our “Rules”
- Ability to use autoprefixer
When
Slide 28
Slide 28 text
@onishiweb
Names of stuff
Slide 29
Slide 29 text
@onishiweb
- Phil Karlton
“There are only two hard things in
Computer Science: cache invalidation
and naming things.”
Naming
@onishiweb
Why You Should Avoid
Sass @extend
Experiments
http://www.sitepoint.com/avoid-sass-extend/
Slide 51
Slide 51 text
@onishiweb
- Hugo Giraudel
“the more a string is repeated, the better it is
for compression. [… therefore] the difference
is likely to be inexistent.”
http://www.sitepoint.com/avoid-sass-extend/
Experiments
Slide 52
Slide 52 text
@onishiweb
With @extends
Size: 247.9KB
Gzipped: 28.9KB
With @includes
Size: 248.8KB
Gzipped: 29.0KB
Experiments
Slide 53
Slide 53 text
@onishiweb
Refactoring
in a team
Slide 54
Slide 54 text
@onishiweb
Git
Teams
Slide 55
Slide 55 text
@onishiweb
Git Flow
http://bit.ly/gitflow
Teams
Slide 56
Slide 56 text
@onishiweb
Fix conflicts on
feature branch
Teams
Slide 57
Slide 57 text
@onishiweb
Code reviews
Teams
Slide 58
Slide 58 text
@onishiweb
Refatoring
doesn’t have to
be painful
Slide 59
Slide 59 text
@onishiweb
Mentally
challenging
Painless
Slide 60
Slide 60 text
@onishiweb
- Be pragmatic
- Be prepared
- You’re improving the product
- Help other developers
Painless
Slide 61
Slide 61 text
@onishiweb
There is more to
writing code
than writing good code
Be Great
Slide 62
Slide 62 text
@onishiweb
- James Higgs
“A good developer can code.
A really good developer can
write clean code.
A great developer knows when
clean code is a waste of time.”
http://youtu.be/znBtzBAS9Bo
Be Great
Slide 63
Slide 63 text
@onishiweb
Thank you
Adam Onishi
Second Wednesday - March