Javascript Clean Code
•
4 likes•1,065 views
Petra Novandi discusses how to write clean code in JavaScript. She covers meaningful naming conventions, writing small functions that do one thing, using proper formatting and spacing, adding helpful comments, thorough testing, avoiding callbacks for concurrency, and leveraging new ES features. Clean code results in code that is elegant, simple, efficient and readable, improving productivity and maintainability. While JavaScript is flexible, efforts have been made to strengthen it with newer ES versions and tools to help enforce best practices and write code that is easily understood.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Javascript Clean Code
Similar to Javascript Clean Code (20)
More from Petra Barus
More from Petra Barus (12)
Recently uploaded
Recently uploaded (20)
Javascript Clean Code
- 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
- 7. Clean Code is…. Elegant Simple Efficient Straightforward Clear Readable Automatically Tested Cared
- 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?
- 16. Use Meaningful and Pronounceable Variable Names
- 18. Use Same Word for Same Concept
- 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
- 33. 3. FORMATTINGS
- 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
- 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