The document discusses code maintenance and provides seven meditations or lessons on the topic. The lessons include naming things properly, avoiding clever code, commenting code, being deliberate, being consistent, understanding tools and costs, and that what developers do through code maintenance is important. The document emphasizes writing usable, scalable and maintainable code through these lessons and meditations.

1. zen and the art of code maintenance
@jemyoung jem@netflix.com

2. I am a not a
computer.

3. You are not a
computer.
(probably)
^

4. computer

5. https://github.com/jasondavies/bloomfilter.js/blob/master/bloomfilter.js
¯_(ツ)_/¯

7. We spend most of our
time reading code.

8. Sometimes it’s other
people’s code.

11. Sometimes it’s our
own code.

14. Our code changes because what
we learn changes.

15. code maintenance.

16. 7 meditations
Code
Architecture
Technology
What is maintainable code?
Why should you care?

17. @jemyoung
FORWARDJS 2017
Jem Young
Senior Software Engineer
@jemyoung

18. Things you should know about me
3. I’m LAZY
1. I love Fast and Furious
2. I’m taller than I look from this stage

19. LAZY

20. “…only a programmer will avoid writing
monotonous, repetitive code”
LAZY
-Phillip Lessen

21. function count() {
}
console.log(‘1’);
Write a function
that counts to
console.log(‘2’);
console.log(‘3’);
console.log(‘4’);
console.log(‘5’);
console.log(‘6’);
console.log(‘7’);
console.log(‘8’);
console.log(‘9’);
console.log(’10’);
10

22. function count() {
for (let i = 1; i <= 10; i++) {
console.log(i);
}
}
Write a function
that counts to
10

23. function count(max) {
for (let i = 1; i <= max; i++) {
console.log(i);
}
}
Write a function
that counts to
10
L A
Z
Y
000

24. LAZYengineers write good code
#LazyJS

25. What is good code?

26. usable scalable good code=+

27. Usable
•find/fix bugs quickly
•integrates with other code
•straightforward implementation

28. •fast ramp up time
•uses simple patterns
•easily handles traffic
Scalable

29. U
sability
Scalability

30. maintainable code good code=

31. function count() {
}
console.log(‘1’);
console.log(‘2’);
console.log(‘3’);
console.log(‘4’);
console.log(‘5’);
console.log(‘6’);
console.log(‘7’);
console.log(‘8’);
console.log(‘9’);
console.log(’10’);
U
sability
Scalability

32. function count(max) {
for (let i = 0; i <= max; i++) {
console.log(i);
}
}
U
sability
Scalability

33. function count(max) {
for (let i = 0; i <= max; i++) {
console.log(i);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
16
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
41
43
44
function count(max) {
for (let i = 0; i <= max; i++) {
console.log(i);
}
}
function count(max) {
for (let i = 0; i <= max; i++) {
console.log(i);
}
}
function count(max) {
for (let i = 0; i <= max; i++) {
console.log(i);
}
}
function count(max) {
for (let i = 0; i <= max; i++) {
console.log(i);
}
}

34. counter.js
Application

35. LAZYengineers write good code

36. LAZYit’s hard to be

37. 7 meditations
(that I wish I had when I first started programming)

38. top right bottom left

39. .btn {
padding: 10px 2px 12px 10px;
}
right left
top bottom

40. meditations on
architecture
technology
code

41. meditations on code
architecture
technology

42. // What’s in a name?

43. // What’s in a name?
function foo(x) {
const a = ‘er’;
return x + a;
}

44. // What’s in a name?
function foo(x) {
const a = ;
return x + a;
}-> 0xF165 0xF172‘er’

45. // What’s in a name?
function foo(x) {
const a = ‘er’;
return x + a;
}

46. function foo(x) {
const a = ‘er’;
return x + a;
}
name things properly
Lesson 1

47. name things properly
Lesson 1

48. -~[“a”, “b”].indexOf(“d”)

50. -~[“a”, “b”].indexOf(“d”)

51. 1111 1111 1111 1111 1111 1111 1111 1111-1 ===
[“a”, “b”].indexOf(“d”)-1 ===
0000 0000 0000 0000 0000 0000 0000 0000-1 ===
1000 0000 0000 0000 0000 0000 0000 0000~-1 ===
1000 0000 0000 0000 0000 0000 0000 0000-0 ===
1000 0000 0000 0000 0000 0000 0000 0000false ===
-~[“a”, “b”].indexOf(“d”)
~
-

52. -~[“a”, “b”].indexOf(“d”)
avoid clever code
Lesson 2
[“a”, “b”].indexOf(“d”) > -1

54. comment your code
Lesson 3

55. comment your code
Lesson 3

56. comment your code
Lesson 3

59. your code
Lesson 3
comment

60. your code
Lesson 3

61. your code
Lesson 3

62. your code
Lesson 3

63. Docblockr
comment your code
Lesson 3

64. comment your code
avoid clever code
name things properly

65. meditations on code
architecture
technology

66. meditations on
code
architecture
technology

67. var x
var y
var o = []
let x
const y
const o = new Int32Array()

68. let x
const y
const o = new Int32Array()
be deliberate
Lesson 4

69. WARNING

72. NSFW

73. let x
const y
const o = new Int32Array()
be deliberate
Lesson 4

74. Great Arguments in
Frontend History

75. vstabs spaces

76. vs

77. vs

78. MATTER
IT
DOES
NOT

79. 111,3,4,7,

80. 492,4,6,8,

81. be consistent
Lesson 5
input.spec.js
checkbox.spec.js
radio.test.js

82. be consistent
be deliberate
Prettier
ESlint

83. Before After
Prettier

84. be consistent
be deliberate
Prettier
ESlint

85. https://github.com/jhusain/eslint-plugin-immutable
ESlint

86. deliberateconsistent
usable scalable
maintainable

87. meditations on
code
architecture
technology

88. meditations on
code
technology
architecture

89. Jem Young
Software Engineer
Hacker
Designer
Python Expert
UX Consultant
Rockstar
Network Ninja
JQuery Wrangler
@jemyoung
San Francisco, CA
false

90. understand the tools
Lesson 6

91. ¯_(ツ)_/¯
understand the tools
Lesson 6

92. understand the tools
Lesson 6

93. sService
worker

94. service worker
intercept fetch requests
work offline
utilize web push
progressive web applications

95. 0

96. understand the cost
Lesson 7

97. understand the cost
Lesson 7

98. service worker
understand the cost
Lesson 7

99. javascript frameworks
understand the cost
Lesson 7

100. framework showdown
#It’sAboutToGoDown

101. MATTER
IT
DOES
NOT

102. what now?

103. Matthew Hardin
SiteOps
Thanks
Archana Sankaranarayanan
Developer Insights

104. Thanks
Ryan Burgess
@burgessdryan

105. Thanks

106. How can you care so
much about
code maintenance?

107. What you do is
important.

108. zen and the art of code maintenance
@jemyoung jem@netflix.com