Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Best Practices for Enterprise JavaScript Applications

9f3ca1db737cdb15bbded04d021da48a?s=47 Arthur Kay
November 14, 2013

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.

9f3ca1db737cdb15bbded04d021da48a?s=128

Arthur Kay

November 14, 2013
Tweet

More Decks by Arthur Kay

Other Decks in Programming

Transcript

  1. None
  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
  5. None
  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?

  47. None
  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

  50. None