If your project has working features, a living design system, quality assurance and a code style guide, there is nothing that you will learn in this talk. Maybe.

1. @jcemer
Managing and
evolving
JavaScript
Code

2. http://jcemer.com
@jcemer

4. Code refactoring is the
process of improving the
design of existing code
without changing its
external behavior.
https://martinfowler.com/
books/refactoring.html

5. If your project has
1. working features,
2. a living design system,
3. quality assurance and
4. a code style guide…

6. There is nothing that
you will learn in this
talk. Maybe.

7. 4. Code
Style

8. The way code looks
adds to our
understanding of it.
https://www.smashingmagazine.com/
2012/10/why-coding-style-matters/

10. Working in a well-
organized code base is
like cooking in a clean
kitchen. If things feel
messy, it’s easy not to
treat it with respect.
Joe Ferris

11. Inconsistent
formatting is the first
sign of a code base
that nobody really
cares about.
Joe Ferris

12. The code style of a
project must be
consistent.

13. Writing is an act of
ego, and you might
as well admit it.
On Writing Well: The Classic
Guide To Writing Nonfiction

15. Commit changes in
code style is one of the
worst feelings to me.

17. After agreeing in
spaces or tabs, it is
important to discuss
other conventions.

21. .jshintrc sample config file

22. There are JSHint, JSLint
and ESLint. If you can,
pick the last one with a
preset!

23. > npm install -g eslint
> eslint --init
? How would you like to configure
ESLint? Use a popular style guide
? Which style guide do you want to
follow? Airbnb
? Do you use React? No
? What format do you want your config
file to be in? JavaScript

24. error 'define' is not defined
no-undef
error Unexpected dangling '_' in '_$scope'
no-underscore-dangle
error A space is required after '{'
object-curly-spacing
error Unexpected tab character
no-tabs
✖ 167053 problems
(157018 errors, 10035 warnings)

25. The language and
the open source
projects evolve!

27. Legacy projects
don't have modern
language and API
features.

28. var values = [{name: 'misko', gender: 'male'}];
var log = [];
angular.forEach(values, function(value) {
this.push(
angular.extend({ info: info }, value)
);
}, log);

29. const values = [{name: 'misko', gender: 'male'}]
values.map((value) => ({ info, ...value }))

30. We have tens of thousands
of JS modules at Facebook.
When an engineer makes
breaking API changes we
transform all of our
JavaScript to new code.
@cpojer

33. 3. Quality
Assurance

34. Linting through static
code analysis is the
simplest tool to
improve quality and
reduce defects.

36. https://martinfowler.com/bliki/
TestPyramid.html
Code testing

38. It is harder to
measure the benefit
of refactoring code
if the code base
doesn't include tests.

39. 1. Low test coverage
2. Fear of refactoring
3. Sloppy code
4. Bad design
http://blog.codeclimate.com/blog/
2013/12/05/refactoring-without-good-tests/

40. 1. JUnit, 2. Jasmine,
3. Jest, 4. Karma,
5. AVA, 6. Mocha+chai,
7. Nightwatch.js.

41. I will not lie, it is still
hard to properly test
rich web applications.
But try Jest.

42. Code review checks
for things that the
automation might miss.
It ensures the business
logic and prevents
poor coding decisions.

43. 2. Living
Design

44. Learn deeply the
project tech stack,
paradings, and
patterns.

45. 1. Prototypejs,
2. Angular, 3. jQuery,
4. BackboneJS,
5. React, 6. RxJS,
7. Redux, 8. Flow,
9. Vue.js.

46. The project design
is a hostage of the
tech stack.

47. Generally, code that
doesn’t have good
test coverage is also
badly designed.
http://blog.codeclimate.com/blog/
2013/12/05/refactoring-without-good-tests/

48. The same logic in
different places
needs to be changed
at least twice.

50. Try different
approaches to
improve your
design quality.

52. These code variations were
written on the same day.

53. Examine every word you
put on paper. You'll find
a surprising number that
don't serve any purpose.
On Writing Well: The Classic
Guide To Writing Nonfiction

55. all[type].splice(
all[type].indexOf(handler) >>> 0,
1
);
this isn't simple

56. Simplify,
simplify.
On Writing Well: The Classic
Guide To Writing Nonfiction

57. 1. Working
Features

58. Quality Control is a
procedure to detect
faults by inspecting
and testing the final
product.

59. It’s important to
collect and measure
the incidents that
happen on the
client side.

61. At least, briefly
understand the
real-world
business rules.

62. And when
you face
a bug…

63. 1. Issues tracking,
2. tests, and 3. Git blame
are the best ways to
understand the product.

65. debugger and
console.log() are
your best friends to
isolate problems.

66. 1. Pay attention on
the console insights

68. 2. Look into other
people's solutions

69. 3. Investigate any
memory leaking

70. It is common to get
stuck on a complex
problem, then solve it
quickly. Programming
is about persistence.

71. Chris Pojer: Building
High-Quality JavaScript Tools
JSConf EU 2017

72. Chris Pojer: Building
High-Quality JavaScript Tools
JSConf EU 2017

73. Work hard for
1. working features,
2. a living design system,
3. quality assurance and
4. a code style guide.

75. https://xkcd.com/1428/

76. Zuckerberg: 'Move
fast and break things'
isn't how Facebook
operates anymore

78. @jcemer
Thank you!
I hope you had some fun.