Summary of art of readable code book with applications in Js

1. Qualities of clean code
With Applications in Javascript

2. Agenda
● Qualities of clean code
● Tools to ensure code styles (in Js)
● Hints to write Testable code
● Pure functions
● Useful functional programming
helpers
● Use JS Modules (AMD / CommonJs)

3. "Any fool can write code that a computer can
understand.Good programmers write code that
humans can understand."
-Martin Fowler

4. Qualities of clean code
● Naming
● Functions
● Comments
● AESTHETICS

5. Qualities of clean code -Naming
‘There are only two hard things in Computer
Science: cache invalidation and naming things.’
- Phil Karlton

6. Qualities of clean code -Naming
● Choosing specific words
● Using concrete names
● Deciding how long a name should be
● Using name formatting to pack extra information

7. Qualities of clean code -Naming (Choosing specific words)
● “get” is very unspecific def GetPage(url)
○ get a page from a local cache?
○ from a database?
○ from the Internet?
If it’s from the Internet, a more specific name might be FetchPage()
● Avoid Generic Names Like tmp and retval
● Names like i, j, iter, and it are commonly used as indices and loop iterators

8. Qualities of clean code -Naming (Choosing specific words)

9. Qualities of clean code -Naming (Using concrete names)
● Values with Units
var start = (new Date()).getTime()
var start_ms = (new Date()).getTime();
● Encoding Other Important Attributes

10. Qualities of clean code -Naming (how long a name should be)
● Shorter Names Are Okay for Shorter Scope
● TextMate ESC Acronyms and Abbreviations
○ i.e. naming a class BEManager instead of BackEndManager.
● Throwing Out Unneeded Words
○ ConvertToString(), ToString()

11. Qualities of clean code -Naming (name formatting to pack
extra information)
var x = new DatePicker(); // DatePicker() is a "constructor" function
var y = pageHeight(); // pageHeight() is an ordinary function
var $all_images = $("img"); // $all_images is a jQuery object
var height = 250; // height is not
<div id="middle_column" class="main-content">

12. Functions
● The smaller the better
● A function should only do one thing (KISS)
● No nested control structure
● Less arguments are better

13. Comments
● Comments are a code smell
● Comments are not subtitles
● Comments are not an art project
● Comments are not source control

14. Aesthetics
It’s “formatting” your code in a consistent, meaningful way,
you make it easier and faster to read

15. Aesthetics
● Organize Declarations into Blocks

16. Aesthetics
● Aligning parts of the code into “columns” can make
code easy to skim through.

17. Aesthetics
● Use empty lines to break apart large blocks into logical
“paragraphs.

18. Tools to ensure code styles (in Js)
● JSCS(.jscsrc)
● ESLint (.eslintrc.json) Eslint
● .jsbeautifyrc
Coding_Style

19. Hints to write Testable code
● Keep Business Logic and Display Logic Separate
● Avoid Side Effects
● Give Each Function a Single Purpose
● Don’t Mutate Parameters
● Use Dependency Injection
● Write Your Tests Before Your Code

20. Hints to write Testable code
● Keep Business Logic and Display Logic Separate

21. Hints to write Testable code
● Avoid Side Effects

22. Hints to write Testable code
● Use Dependency Injection

23. Hints to write Testable code
● Don’t Mutate Parameters

24. Pure Functions
A pure function is a function which:
● Given the same input, will always return the same output.
● Produces no side effects.
● Relies on no external mutable state.
pure-functions-javascript

25. Useful functional programming helpers (map,filter,reduce)
● Functional techniques can help you write more
declarative code that is easier to understand at a
glance, refactor, and test.
● One of the cornerstones of functional programming is its
special use of lists and list operations.
● These are natively available in any recent browser and
in Node.js

26. Useful functional programming helpers -map
Think of map as a "for each" loop, that is specifically for
transforming values - one input value corresponds to one
'transformed' output value.

27. Useful functional programming helpers -filter
The filter() method creates a new array with all elements
that pass the test implemented by the provided function

28. Useful functional programming helpers -reduce
The reduce() method applies a function against an accumulator and each value
of the array (from left-to-right) to reduce it to a single value.

29. Use JS Modules (AMD / CommonJs)
● AMD (Asynchronous Module Definition)

30. Use JS Modules (AMD / CommonJs)
● CommonJS

31. Use JS Modules (AMD / CommonJs)
● CommonJS

32. References
● Art of Readable Code
● https://www.toptal.com/javascript/writing-testable-code-in-javascript
● master-the-javascript-interview-what-is-a-pure-function