Download as PDF, PPTX
Uploaded byPetra Barus
Javascript Clean Code
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.
Javascript Clean Code
- 1.
- 2. Hi Everyone! I amPetra 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 IGOING TO TALK ABOUT?
- 4. Clean Code: A Handbookof 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.
- 7. Clean Code is…. Elegant SimpleEfficient Straightforward Clear Readable Automatically Tested Cared
- 8.
- 9.
- 10. Boy-scout Rule: Leave thecode cleaner than you found it
- 11. WHY IS ITHARD TO WRITE CLEAN CODE IN JAVASCRIPT?
- 12. Javascript was 2ndclass citizen Too flexible, not a lot of rules Dynamic and weak typed
- 13. Javascript is now1st 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 CLEANCODE?
- 15.
- 16. Use Meaningful andPronounceable Variable Names
- 17.
- 18. Use Same Wordfor Same Concept
- 19.
- 20. Class Name » Classname should have Noun or Noun Phrase. ⋄ e.g. Customer, Account, Parser
- 21. Function/Method » Function/method shouldhave verb or verb phrase ⋄ getItem, render, renderItem, setName
- 22. Code Obfuscation Javascript codeis published, don’t forget to obfuscate the code.
- 23.
- 24. Small 20 to 30line of codes (or statements) or shorter My personal motto: A function can be read in one breathe
- 25. Function Should DoOne Thing Easier to read Easier to test Easier to maintain
- 26.
- 27.
- 28. Avoid Long Parameters Easierto read Easier to test Easier to maintain
- 29.
- 30. Has No SideEffect
- 31. Don’t Write ToGlobal Funcs
- 32.
- 33.
- 34.
- 35. Vertical & Horizontal Formatting Vertical VerticalOpenness Vertical Density Vertical Distance Vertical Ordering Horizontal Horizontal Openness Horizontal Alignment Indentation
- 36. Newspaper Metaphor Starts fromheadline First paragraph tells whole story Down to more details
- 37.
- 38.
- 39.
- 40. Tips: Use gitcommit hook
- 41.
- 42. A good codeexplains itself
- 43.
- 44. Example of GoodComments Legal Comment Explanation of Intent Warning of Consequence Public API Documentation
- 45. Example of BadComments 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.
- 47. A Good Codeis A Tested Code
- 48. Testing Tools forJavascript 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.
- 50.
- 51.
- 52.
- 53. Avoid Callbacks Promise isgood Async/Await is even better!
- 57.
- 58.
- 59. Clean code isinvestment 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 canfind me at » @petrabarus » petra.barus@gmail.com