Your Code Sucks: Best Practices for Enterprise JavaScript Development

From ThatConference 2012

1. Best Practices for Enterprise JavaScript Applications YOUR CODE SUCKS
2. WHO AM I? •  Arthur Kay •  Solutions Engineer @ Sencha, Inc. •  Web Development ~15 years •  www.akawebdesign.com •  @arthurakay
3. AGENDA •  Improving application performance •  Increasing code stability •  Scaling applications for enterprise •  Tools •  Advice
5. IMPROVING APPLICATION PERFORMANCE Part 1
6. CACHING
7. THIS CODE SUCKS
8. DO THIS INSTEAD •  Cache values (references) •  Avoid using document.getElementById() and other global queries
9. DO THIS INSTEAD
10. OVER NESTING
11. THIS CODE SUCKS
12. DO THIS INSTEAD •  Use lightweight containers (reduce DOM) •  Lazy Rendering
13. DO THIS INSTEAD
14. MEMORY LEAKS
15. THIS CODE SUCKS
16. DO THIS INSTEAD
17. INCREASING CODE STABILITY Part 2
18. SYNTAX ERRORS
19. THIS CODE SUCKS
20. DO THIS INSTEAD •  Use JSLint (or something else) •  AUTOMATE SYNTAX CHECKING
21. ONE CLASS PER FILE
22. THIS CODE SUCKS
23. DO THIS INSTEAD •  Organize your file system •  Files and folders should match namespacing •  MVC (or something) •  Development loader / Production builder
24. NAMES HAVE MEANING
25. THIS CODE SUCKS
26. DO THIS INSTEAD •  Descriptive names on everything (except iterators) •  Common naming conventions (camelCase vs TitleCase vs nocase) •  Exceptions for •  constants ( SOME_CONSTANT ) •  constructors ( MyClass ) •  sub-namespaces ( Foo.bar.Class )_
27. COMMENTS / DOCUMENTATION
28. THIS CODE SUCKS
29. DO THIS INSTEAD •  Comment top-level structures •  Add notes whenever logic is not obvious •  Build your docs into a searchable tool
30. SCALING APPLICATIONS FOR ENTERPRISE Part 3
31. AVOID DUPLICATION
32. THIS CODE SUCKS
33. DO THIS INSTEAD •  Abstraction! •  Use mixins when possible •  Apply stuff to prototypes •  Have similar classes/methods? •  call() and apply()
34. DO THIS INSTEAD
35. SMALLER FILES. WHITE SPACE.
36. THIS CODE SUCKS
37. DO THIS INSTEAD •  Keep methods under 50 lines •  Keep files under 500 lines •  Use as much whitespace as possible.
38. UNIT TESTS
39. THIS CODE SUCKS
40. DO THIS INSTEAD •  Write “testable” code •  Focus on important / trouble areas •  AUTOMATE UNIT TESTING •  Don’t insist on UI (integration/iteraction) tests * Test Driven JavaScript Development by Christian Johansen
41. TOOLS Stuff You Should Know About
42. IDE
43. INSPECT ELEMENT
44. YSLOW
45. JS DUCK
46. PHANTOM.JS
47. ADVICE Things I’ve Learned
48. SPECIFICATION – NOT TDD
49. NEVER STOP LEARNING
50. BREAK (SOME) RULES
52. ADDITIONAL RESOURCES •  “Maintainable JavaScript” by Nicholas Zakas •  http://www.slideshare.net/nzakas/maintainable-javascript-2012 •  “Code Conventions for JS” by Douglass Crockford •  http://javascript.crockford.com/code.html •  “JavaScript Performance Tips & Tricks” by Grgur Grisogono •  http://moduscreate.com/javascript-performance-tips-tricks/
53. THANKS! Arthur Kay | @arthurakay
54. SPEAKERDECK.COM/U/ARTHURAKAY Share this presentation: