Best Practices for Enterprise JavaScript Applications

Many times looking at someone else’s code will trigger ideas of your own. That said, code reviews are sometimes fun… but more often frustrating. This webinar will show you a number of common mistakes and provide guidance on how to avoid them.

Join code gurus Art Kay, Solutions Architect at Sencha, and Jay Garcia, CTO at Modus Create, and learn how to bring your code to the next level.

Transcript

2. Best Practices for Enterprise JavaScript Applications November 14, 2013
3. Arthur Kay •  Solutions Architect @ Sencha, Inc. •  Web Development ~15 years •  www.akawebdesign.com •  @arthurakay
4. Jay Garcia •  CTO @ Modus Create •  Author •  Ext JS in Action •  Sencha Touch in Action •  www.moduscreate.com •  @modusjesus
6. Top Ten List Best Practices for Enterprise JavaScript Applications
7. 10. Well Formed Code
8. Bad Practice
9. Best Practice •  Use JSLint (or something else) •  JSHint •  Esprima •  …and many more… •  AUTOMATE!
10. 9. Nesting callbacks == nightmare
11. Why is this bad?
12. Nesting callbacks == nightmare •  Difficult to •  Read •  Comprehend •  Follow •  Debug •  Code “pyramids” are just over-all bad practice
13. Best practice: use SCOPE
14. 8. Caching & References
15. Bad Practice
16. JSPerf http://jsperf.com/cache-deep-reference/2
17. Best Practice •  Use references! •  Avoid using: •  document.getElementById() •  Ext.getCmp() •  and other global queries
18. Best Practice
19. 7. Indentation
20. Improperly indented & wasteful code
21. Improperly indented & wasteful code Too much! Inconsistent Waste
22. Properly indented & optimized code
23. Best practice: Always code for readability!
24. 6. One Class Per File
25. Bad Practice
26. Best Practice •  Organize your file system •  Files and folders should match namespacing •  MVC (or something) •  Abstraction! •  Development loader / Production builder
27. 5. Too much work to return
28. This code is not wrong, but could be better
29. We’re starting to get there…
30. Yup, this is it! Add braces for readability May be hard to read at first glance.
31. 4. Comments / Documentation
32. Bad Practice
33. Best Practice •  Comment top-level structures •  Use Meaningful names •  “self documenting” code •  Add notes whenever logic is not obvious •  Build your docs into a searchable tool •  JSDuck •  …other tools…
34. 3. “===“ !== “==“
35. Truthy and Falsy •  When using “==“ or “!=“, JavaScript has room to coerce values •  Tests are boiled down to “Falsy” and “Truthy” •  Process is called coercion
36. “===“ || “!==“ •  Leaves no room for coercion •  All are false!
37. 2. Be Lazy
38. Bad Practice
39. Best Practice •  Lazy initialization •  Add items/views only when necessary •  Lazy rendering •  Save the browser some time! •  Reuse things •  Save yourself some time!
40. 1. Knowing this!
41. Two rules for “this” •  When a function is executed via a var reference, the default execution context (“this”) is “window. •  When a function is executed via an object key, the execution context (“this”) is the object.
42. The “var” rule •  When a function is executed via a var reference, the default execution context (“this”) is “window”.
43. The object “key” rule •  When a function is executed via an object key, the execution context (“this”) is that object.
44. Two rules for “this” (review) •  When a function is executed via a var reference, the default execution context (“this”) is “window. •  When a function is executed via an object key, the execution context (“this”) is the object.
45. Mixing and matching What is the context?
46. Mixing and matching What is the context?
48. 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/
49. Thanks! Arthur Kay | @arthurakay Jay Garcia | @modusjesus