Slide 1

Slide 1 text

Detangling Your JavaScript An Intro to JS Refactoring

Slide 2

Slide 2 text

Chris Powers Engineering Manager at Groupon @chrisjpowers

Slide 3

Slide 3 text

A Conversation

Slide 4

Slide 4 text

“Are you using JavaScript or jQuery?”

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

What is “Tangled” JavaScript?

Slide 7

Slide 7 text

It is not BROKEN code!

Slide 8

Slide 8 text

Broken code doesn’t work.

Slide 9

Slide 9 text

Tangled code does work, but...

Slide 10

Slide 10 text

Tangled code will become “broken” code eventually because...

Slide 11

Slide 11 text

Tangled code is hard to read and understand.

Slide 12

Slide 12 text

Tangled code is hard to update and maintain.

Slide 13

Slide 13 text

Tangled code is easy to accidentally break.

Slide 14

Slide 14 text

“Tangled code is code based on lost requirements.” - Noel Rappin

Slide 15

Slide 15 text

Tangled code was shaped by forces that YOU aren’t aware of

Slide 16

Slide 16 text

Got Tangled Code? Do you...

Slide 17

Slide 17 text

Option #1: Big Bang Rewrite

Slide 18

Slide 18 text

Option #2: Detangle (Refactor)

Slide 19

Slide 19 text

ALWAYS Detangle! NEVER Rewrite!

Slide 20

Slide 20 text

(well, almost)

Slide 21

Slide 21 text

Rewrite good code. Refactor tangled code.

Slide 22

Slide 22 text

Wat? Rewrite good code?

Slide 23

Slide 23 text

Rewrites are good for fixing performance and architecture bottlenecks

Slide 24

Slide 24 text

Rewrites are tempting

Slide 25

Slide 25 text

Coders want to Code!

Slide 26

Slide 26 text

OMG guys, let’s rewrite this in Coffeescript and Ember and D3!!!

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Writing code is easier than reading code.

Slide 29

Slide 29 text

You CANNOT rewrite code you don’t understand.

Slide 30

Slide 30 text

Your rewrite will likely miss requirements

Slide 31

Slide 31 text

In your client’s eyes, your rewrite will be worse than the original.

Slide 32

Slide 32 text

What is Refactoring?

Slide 33

Slide 33 text

Methodically improving code quality without altering behavior.

Slide 34

Slide 34 text

Making your complex code simple.

Slide 35

Slide 35 text

Simple code is...

Slide 36

Slide 36 text

#1 Tested

Slide 37

Slide 37 text

#2 Reveals Intent

Slide 38

Slide 38 text

#3 DRY - Each piece of knowledge exists in only one place

Slide 39

Slide 39 text

#4 Small

Slide 40

Slide 40 text

87% of refactoring is improving naming

Slide 41

Slide 41 text

What ISN’T Refactoring?

Slide 42

Slide 42 text

Making changes to untested code is not refactoring.

Slide 43

Slide 43 text

That’s just changing shit.

Slide 44

Slide 44 text

Turning JS into Coffeescript is not refactoring.

Slide 45

Slide 45 text

That’s just... silly.

Slide 46

Slide 46 text

Let’s Start Detangling! Ready... Set...

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Before refactoring, you may take 30 seconds to rage.

Slide 49

Slide 49 text

It’s cool, I’ll wait.

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Okay, now STOP IT!

Slide 52

Slide 52 text

You don’t know what forces affected this code, you might have done the same.

Slide 53

Slide 53 text

A certain level of respect for the code is necessary.

Slide 54

Slide 54 text

First Things First: Set a Goal

Slide 55

Slide 55 text

How much code needs to be refactored? How deeply?

Slide 56

Slide 56 text

Write a Test!

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Why write tests?

Slide 59

Slide 59 text

Makes the code simple

Slide 60

Slide 60 text

Ensures Behavior Does Not Change

Slide 61

Slide 61 text

Forces Developer to Understand Requirements

Slide 62

Slide 62 text

Defines the public API, if originally unclear

Slide 63

Slide 63 text

Refactoring #1 Name the Anonymous Functions

Slide 64

Slide 64 text

BEFORE

Slide 65

Slide 65 text

AFTER

Slide 66

Slide 66 text

Refactoring #2 Document Responsibilities with Comments

Slide 67

Slide 67 text

“Comment Driven Refactoring” (patent pending)

Slide 68

Slide 68 text

BEFORE

Slide 69

Slide 69 text

AFTER

Slide 70

Slide 70 text

Refactoring #3 Extract Methods

Slide 71

Slide 71 text

BEFORE

Slide 72

Slide 72 text

AFTER

Slide 73

Slide 73 text

Refactoring #4 Improve Variable Names

Slide 74

Slide 74 text

BEFORE

Slide 75

Slide 75 text

AFTER

Slide 76

Slide 76 text

Refactoring #5 Add Local Vars to Improve Legibility

Slide 77

Slide 77 text

BEFORE

Slide 78

Slide 78 text

AFTER

Slide 79

Slide 79 text

Keep Extracting Functions

Slide 80

Slide 80 text

BEFORE

Slide 81

Slide 81 text

AFTER

Slide 82

Slide 82 text

Refactoring #6 Add Clarity with Underscore.js

Slide 83

Slide 83 text

BEFORE

Slide 84

Slide 84 text

AFTER

Slide 85

Slide 85 text

Refactoring #7 Isolate Display Logic

Slide 86

Slide 86 text

BEFORE

Slide 87

Slide 87 text

AFTER

Slide 88

Slide 88 text

Refactoring #8 Isolate DOM Manipulation

Slide 89

Slide 89 text

BEFORE

Slide 90

Slide 90 text

AFTER

Slide 91

Slide 91 text

Refactoring #9 Hide “Private” Methods in Closures

Slide 92

Slide 92 text

BEFORE

Slide 93

Slide 93 text

AFTER

Slide 94

Slide 94 text

Refactoring #10 Scope Public Methods in Namespaces

Slide 95

Slide 95 text

BEFORE

Slide 96

Slide 96 text

AFTER

Slide 97

Slide 97 text

Refactoring #11 Use Nested Namespaces

Slide 98

Slide 98 text

BEFORE

Slide 99

Slide 99 text

AFTER

Slide 100

Slide 100 text

Refactoring #12 Extend Namespaces (Don’t Overwrite)

Slide 101

Slide 101 text

BEFORE

Slide 102

Slide 102 text

AFTER

Slide 103

Slide 103 text

Refactoring #13 DRY Up Namespace Initialization

Slide 104

Slide 104 text

BEFORE

Slide 105

Slide 105 text

AFTER

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

AFTER

Slide 108

Slide 108 text

Got questions? @chrisjpowers