Javascript Clean Code - BandungJS 2017

A 2017 BandungJS meetup talk on writing clean, maintainable JavaScript code, grounded in Robert C. Martin's "Clean Code" principles adapted for JS. The talk covers meaningful and pronounceable naming conventions for variables, functions, and classes; writing small, single-purpose functions with no side effects and short parameter lists; vertical and horizontal code formatting using the "newspaper metaphor," team conventions, and tools like ESLint with git commit hooks; the philosophy that good code should mostly explain itself, with examples of good versus bad comments; an overview of the JS testing ecosystem (Jest, Mocha, Chai, Jasmine) including test coverage and single-concept-per-test design; and moving away from callbacks toward Promises and async/await for concurrency. Delivered at BandungJS on August 28, 2017, while serving as CTO of UrbanIndo.com.

Transcript

1. Javascript Clean Code @petrabarus BandungJS 28 Ags 2017
2. Hi Everyone! I am Petra Novandi Now serves as Chief Technology Officer at UrbanIndo.com since 2011 - Contact me at Email: petra.barus@gmail.com Twitter: @petrabarus
3. WHAT AM I GOING TO TALK ABOUT?
4. 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
5. WHAT IS CLEAN CODE?
7. Clean Code is…. Elegant Simple Efficient Straightforward Clear Readable Automatically Tested Cared
8. COST OF CLEAN CODE
9. Time Productivity Clean Code
10. Boy-scout Rule: Leave the code cleaner than you found it
11. WHY IS IT HARD TO WRITE CLEAN CODE IN JAVASCRIPT?
12. Javascript was 2nd class citizen Too flexible, not a lot of rules Dynamic and weak typed
13. 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
14. HOW TO WRITE CLEAN CODE?
15. 1. MEANINGFUL NAMES
16. Use Meaningful and Pronounceable Variable Names
17. Use Searchable Names
18. Use Same Word for Same Concept
19. Avoid Mental Mapping
20. Class Name » Class name should have Noun or Noun Phrase. ⋄ e.g. Customer, Account, Parser
21. Function/Method » Function/method should have verb or verb phrase ⋄ getItem, render, renderItem, setName
22. Code Obfuscation Javascript code is published, don’t forget to obfuscate the code.
23. 2. FUNCTIONS
24. Small 20 to 30 line of codes (or statements) or shorter My personal motto: A function can be read in one breathe
25. Function Should Do One Thing Easier to read Easier to test Easier to maintain
26. Bad
27. Good
28. Avoid Long Parameters Easier to read Easier to test Easier to maintain
29. Bad
30. Has No Side Effect
31. Don’t Write To Global Funcs
32. Favor Functional over Procedural
33. 3. FORMATTINGS
34. Code is Communication
35. Vertical & Horizontal Formatting Vertical Vertical Openness Vertical Density Vertical Distance Vertical Ordering Horizontal Horizontal Openness Horizontal Alignment Indentation
36. Newspaper Metaphor Starts from headline First paragraph tells whole story Down to more details
37. Team Rules are Important
38. Use Tools: ESLint/JSLint/etc
39. Example configuration
40. Tips: Use git commit hook
41. 4. COMMENTS
42. A good code explains itself
43. Example
44. Example of Good Comments Legal Comment Explanation of Intent Warning of Consequence Public API Documentation
45. 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
46. 5. TESTS
47. A Good Code is A Tested Code
48. 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
49. Example test using Mocha & Chai
50. Coverage Example
51. Single Concept Per Test
52. 6. CONCURRENCY
53. Avoid Callbacks Promise is good Async/Await is even better!
57. 7. A
58. Let’s Wrap This Up!
59. 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
60. THANKS! Any questions? You can find me at » @petrabarus » petra.barus@gmail.com