Share
Embed
Slide 1
Slide 1 text
Javascript Clean
Code
@petrabarus
BandungJS
28 Ags 2017
Slide 2
Slide 2 text
Hi Everyone!
I am Petra Novandi
Now serves as
Chief Technology Officer at
UrbanIndo.com since
2011
-
Contact me at
Email:
[email protected]
Twitter:
@petrabarus
Slide 3
Slide 3 text
WHAT AM I GOING
TO TALK ABOUT?
Slide 4
Slide 4 text
Clean Code: A
Handbook of Agile
Software Craftsman
It’s written for Java, but a lot of things
are applicable for Javascript
https://github.com/ryanmcdermott/cle
an-code-javascript
Slide 5
Slide 5 text
WHAT IS
CLEAN CODE?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Clean Code is….
Elegant
Simple Efficient
Straightforward
Clear
Readable
Automatically
Tested
Cared
Slide 8
Slide 8 text
COST OF CLEAN
CODE
Slide 9
Slide 9 text
Time
Productivity
Clean Code
Slide 10
Slide 10 text
Boy-scout Rule:
Leave the code
cleaner than you
found it
Slide 11
Slide 11 text
WHY IS IT HARD TO
WRITE CLEAN CODE IN
JAVASCRIPT?
Slide 12
Slide 12 text
Javascript was 2nd class citizen
Too flexible, not a lot of rules
Dynamic and weak typed
Slide 13
Slide 13 text
Javascript is now 1st class
citizen
» Driven by User Experience
⋄ Comes V8 followed by NodeJS
» Highly popular and developed
» Efforts for Improvements
⋄ ES5, ES6, ES7, ES8
Slide 14
Slide 14 text
HOW TO WRITE
CLEAN CODE?
Slide 15
Slide 15 text
1.
MEANINGFUL NAMES
Slide 16
Slide 16 text
Use Meaningful and Pronounceable Variable
Names
Slide 17
Slide 17 text
Use Searchable Names
Slide 18
Slide 18 text
Use Same Word for Same Concept
Slide 19
Slide 19 text
Avoid Mental Mapping
Slide 20
Slide 20 text
Class Name
» Class name should have Noun or Noun Phrase.
⋄ e.g. Customer, Account, Parser
Slide 21
Slide 21 text
Function/Method
» Function/method should have verb or verb phrase
⋄ getItem, render, renderItem, setName
Slide 22
Slide 22 text
Code Obfuscation
Javascript code is published, don’t
forget to obfuscate the code.
Slide 23
Slide 23 text
2.
FUNCTIONS
Slide 24
Slide 24 text
Small
20 to 30 line of codes (or statements) or
shorter
My personal motto:
A function can be read in one breathe
Slide 25
Slide 25 text
Function Should Do One Thing
Easier to read
Easier to test
Easier to maintain
Slide 26
Slide 26 text
Bad
Slide 27
Slide 27 text
Good
Slide 28
Slide 28 text
Avoid Long Parameters
Easier to read
Easier to test
Easier to maintain
Slide 29
Slide 29 text
Bad
Slide 30
Slide 30 text
Has No Side Effect
Slide 31
Slide 31 text
Don’t Write To Global Funcs
Slide 32
Slide 32 text
Favor Functional over
Procedural
Slide 33
Slide 33 text
3.
FORMATTINGS
Slide 34
Slide 34 text
Code is
Communication
Slide 35
Slide 35 text
Vertical & Horizontal
Formatting
Vertical
Vertical Openness
Vertical Density
Vertical Distance
Vertical Ordering
Horizontal
Horizontal Openness
Horizontal Alignment
Indentation
Slide 36
Slide 36 text
Newspaper Metaphor
Starts from headline
First paragraph tells whole story
Down to more details
Slide 37
Slide 37 text
Team Rules are
Important
Slide 38
Slide 38 text
Use Tools: ESLint/JSLint/etc
Slide 39
Slide 39 text
Example
configuration
Slide 40
Slide 40 text
Tips: Use git commit hook
Slide 41
Slide 41 text
4.
COMMENTS
Slide 42
Slide 42 text
A good code explains itself
Slide 43
Slide 43 text
Example
Slide 44
Slide 44 text
Example of Good Comments
Legal Comment
Explanation of Intent
Warning of Consequence
Public API Documentation
Slide 45
Slide 45 text
Example of Bad Comments
Unclear, redundant, misleading comments
Changelog comments
A comment instead of putting code into a
separate function
Banners, closing brace marker
Commented-out code
Documenting non-public API
Slide 46
Slide 46 text
5.
TESTS
Slide 47
Slide 47 text
A Good Code is A Tested Code
Slide 48
Slide 48 text
Testing Tools for Javascript
Jest
Mocha
Jasmine
Chai
Istanbul
JSDOM
Karma
Sinon
Phantom
Chrome
https://medium.com/powtoon-engineering/a-complete-
guide-to-testing-javascript-in-2017-a217b4cd5a2a
Slide 49
Slide 49 text
Example test
using Mocha
& Chai
Slide 50
Slide 50 text
Coverage
Example
Slide 51
Slide 51 text
Single Concept Per Test
Slide 52
Slide 52 text
6.
CONCURRENCY
Slide 53
Slide 53 text
Avoid Callbacks
Promise is good
Async/Await is even better!
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
7.
A
Slide 58
Slide 58 text
Let’s Wrap This Up!
Slide 59
Slide 59 text
Clean code is investment
It’s possible to code clean in Javascript
It takes discipline and teamwork, keep
practising!
Use newest ES. It’s there for this reason.
Use automated tools to help