@onishiweb
Adam Onishi
MK Geek Night - March
Taking the pain
out of Refactoring
Slide 2
Slide 2 text
@onishiweb
@onishiweb
Hello!
Slide 3
Slide 3 text
@onishiweb
Hello!
Slide 4
Slide 4 text
@onishiweb
Old code
sucks!
Hello!
Slide 5
Slide 5 text
@onishiweb
- me
“…we’re constantly evolving our
practices so regularly with the
environment changing around us every
day, you look back on code you wrote
a few months ago and wonder what on
Earth you were thinking.”
http://bit.ly/old-code-sucks
Hello!
Slide 6
Slide 6 text
@onishiweb
What is
Refactoring?
Slide 7
Slide 7 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
What is 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.”
Importance
Slide 12
Slide 12 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.”
Importance
Slide 13
Slide 13 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.”
Importance
Slide 14
Slide 14 text
@onishiweb
DRY
“Don't repeat yourself! Code
should be reusable, have efficient
selectors, and not be overly
repetitive or nested.”
Importance
Slide 15
Slide 15 text
@onishiweb
Spotting bad
code
Slide 16
Slide 16 text
@onishiweb
Front End
https://flic.kr/p/8RSfDf
Bad code
@onishiweb
Slide 17
Slide 17 text
@onishiweb
Code Smells
Bad code
Slide 18
Slide 18 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
Bad code
Slide 19
Slide 19 text
@onishiweb
Preparation
Slide 20
Slide 20 text
@onishiweb
When is right
to refactor?
Preparation
Slide 21
Slide 21 text
@onishiweb
Preparation
ALL the time,
is a good time!
Slide 22
Slide 22 text
@onishiweb
Mental
preparation!
Preparation
Slide 23
Slide 23 text
@onishiweb
Be pragmatic
Improve the product
Help other developers
Learn something new!
Preparation
Slide 24
Slide 24 text
@onishiweb
Set Goals
Preparation
Slide 25
Slide 25 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
Preparation
Slide 26
Slide 26 text
@onishiweb
S.M.A.R.T
Goals
Preparation
Slide 27
Slide 27 text
@onishiweb
Tools
Slide 28
Slide 28 text
@onishiweb
Sassy CSS
Tools
Slide 29
Slide 29 text
@onishiweb
Version
Control
Tools
Slide 30
Slide 30 text
@onishiweb
Build tools
Tools
Slide 31
Slide 31 text
@onishiweb
Scss-lint
Tools
Slide 32
Slide 32 text
@onishiweb
Tools
http://bit.ly/front-end-rules
Slide 33
Slide 33 text
@onishiweb
Tools
Slide 34
Slide 34 text
@onishiweb
Scss-lint
Stylestats
Tools
Slide 35
Slide 35 text
@onishiweb
Scss-lint
Stylestats
PerfBudget
Tools
Slide 36
Slide 36 text
@onishiweb
refactoring
in practice
Slide 37
Slide 37 text
@onishiweb
Our goals
In practice
Slide 38
Slide 38 text
@onishiweb
Partials to have <300 lines of code
Maximum nesting of 4 levels deep
Code should adhere to The Rules
Ability to use autoprefixer
In practice
Slide 39
Slide 39 text
@onishiweb
Naming
conventions
In practice
Slide 40
Slide 40 text
@onishiweb
$clr-lightblue:#4BCEFA;
$clr-pink:#F96EC4;
$clr-orange:#FFB400;
$clr-green:#8DD400;
$clr-purple:#009edc;
In practice
Slide 41
Slide 41 text
@onishiweb
In practice
Slide 42
Slide 42 text
@onishiweb
In practice
Slide 43
Slide 43 text
@onishiweb
$clr-lightblue:#F02233; // RED!
$clr-pink:#F96EC4;
$clr-orange:#FFB400;
$clr-green:#8DD400;
$clr-purple:#009edc;
In practice
Slide 44
Slide 44 text
@onishiweb
$clr-brand:#4BCEFA;
$clr-activities:#F96EC4;
$clr-parenting:#FFB400;
$clr-sustainability:#8DD400;
$clr-mmr:#009edc;
In practice
Slide 45
Slide 45 text
@onishiweb
Breakpoints
In practice
Slide 46
Slide 46 text
@onishiweb
In practice
Slide 47
Slide 47 text
@onishiweb
Using
Scss-lint
In practice
Slide 48
Slide 48 text
@onishiweb
.related-products {
[…]
}
[…]
.related-products {
[…]
}
In practice
Slide 49
Slide 49 text
@onishiweb
In practice
Slide 50
Slide 50 text
@onishiweb
In practice
Slide 51
Slide 51 text
@onishiweb
Breaking up
existing files
In practice
Slide 52
Slide 52 text
@onishiweb
/pages/_sys-archive.scss
/pages/_sys-single.scss
/components/_sys-select.scss
/components/_sys-filter.scss
In practice
Slide 53
Slide 53 text
@onishiweb
[...]
// Sass file "_sys-filter.scss"
.sys-filter {
[...]
}
In practice
Slide 54
Slide 54 text
@onishiweb
Experiment
In practice
Slide 55
Slide 55 text
@onishiweb
In practice
“Why You
Should Avoid
Sass @extend”
http://www.sitepoint.com/avoid-sass-extend/
Slide 56
Slide 56 text
@onishiweb
In practice
@include vs
@extend
Slide 57
Slide 57 text
@onishiweb
- Hugo Giraudel
“the more a string is repeated, the
better it is for compression.
[… therefore] the difference is
likely to be inexistent.”
In practice
http://www.sitepoint.com/avoid-sass-extend/
Slide 58
Slide 58 text
@onishiweb
With @extends
Size: 247.9KB
Gzipped: 28.9KB
With @includes
Size: 248.8KB
Gzipped: 29.0KB
In practice
Slide 59
Slide 59 text
@onishiweb
refactoring
in a team
Slide 60
Slide 60 text
@onishiweb
Git
Teams
Slide 61
Slide 61 text
@onishiweb
Teams
Fix conflicts on
feature branches
Slide 62
Slide 62 text
@onishiweb
Teams
Code reviews
Slide 63
Slide 63 text
@onishiweb
Wrapping up
Slide 64
Slide 64 text
@onishiweb
Clarity, Maintainability,
Efficiency, DRY
Prepare yourself
Set S.M.A.R.T goals
Use tools to help
Summary
Slide 65
Slide 65 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
Summary
Slide 66
Slide 66 text
@onishiweb
Thank you
Adam Onishi
MK Geek Night - March