Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Write Better JavaScript

1,776 views

Published on

Published in: Technology
  • Be the first to comment

Write Better JavaScript

  1. 1. Write Better JavaScript<br />Kevin Whinnery<br />Engineer and Platform Evangelist<br />Appcelerator, Inc.<br />@kevinwhinnery<br />
  2. 2. Kevin Whinnery<br />Engineer and Platform Evangelist<br />Appcelerator since 2008<br />Husband and father of three:<br />Web developer and JavaScript slinger turned mobile and desktop hacker.<br />http://kevinwhinnery.com<br />http://twitter.com/kevinwhinnery<br />http://github.com/kwhinnery<br />
  3. 3. Agenda<br /><ul><li>The Good Parts and Bad Parts
  4. 4. Object-Oriented Programming in JavaScript
  5. 5. Useful JavaScript Patterns, Tricks, and Style Guidelines
  6. 6. JavaScript in Titanium Mobile
  7. 7. Further Reading</li></li></ul><li>JavaScript is a tragically misunderstood language.<br />
  8. 8. “JavaScript is the incredibly hot girl at the party that brings her loser boyfriend DOM”<br />Tom Robinson<br />Founder, 280 North<br />
  9. 9. JavaScript – What is it good for?<br /><ul><li>Absolutely nothing? Far from it…
  10. 10. Object-Oriented (Prototypical Inheritance)… or not
  11. 11. Flexible Objects
  12. 12. First-Class Functions
  13. 13. Built for event-driven UI</li></li></ul><li>JavaScript: The Good Parts<br /><ul><li>Published In 2008 by Doug Crockford
  14. 14. Covers the good and bad
  15. 15. I use patterns from this book every time I write JS
  16. 16. Buy/read/love</li></li></ul><li>Some Bad Parts<br />
  17. 17. Global Variables <br />app.js<br />some/library.js<br />
  18. 18. Truthy and Falsy<br /><ul><li>Falsy Values:
  19. 19. false
  20. 20. 0
  21. 21. ‘’
  22. 22. null
  23. 23. undefined
  24. 24. NaN
  25. 25. Truthy Values:
  26. 26. Everything else
  27. 27. Almost always, you want === and !==</li></li></ul><li>Floating Point Arithmetic<br />Avoid this by converting to whole numbers, and converting back to decimal.<br />
  28. 28. typeof is a liar<br />
  29. 29. there’s more (http://wtfjs.com ), <br />but let’s skip to…<br />
  30. 30. The Good Parts<br />
  31. 31. Expressive Object Literals<br />
  32. 32. Easy Object Serialization<br />
  33. 33. First Class Functions<br />
  34. 34. Closures<br />
  35. 35. Flexible Objects<br />
  36. 36. Duck Typing<br />
  37. 37. …plus it’s EVERYWHERE.<br />one could develop all kinds of software applications with nothing else.<br />
  38. 38. OOP!<br />(There it is!)<br />
  39. 39. JavaScript has Prototypal Inheritance, which creates new copies of objects from an existing object (the prototype)<br />there’s much more to it than this, but we’ll keep it mostly high level…<br />
  40. 40. Object Constructors<br />* The capital first letter is by convention, not requirement.<br />
  41. 41. Object Prototype<br />
  42. 42. we could have also wrote…<br />
  43. 43. …but object instantiation using the prototype to define functions/properties is faster.<br />http://ejohn.org/blog/simple-class-instantiation<br />mentions this and other methods for…<br />
  44. 44. Inheritance (One Approach)<br />
  45. 45. JavaScript doesn’t support multiple inheritance, but there are multiple libraries that handle that and more, including underscore.js<br />http://documentcloud.github.com/underscore/#extend<br />
  46. 46. Parasitic Inheritance <br /><ul><li>Create an existing object
  47. 47. Add new features and functionality to it (the parasites, if you will)
  48. 48. Pass it off as an instance of a new object
  49. 49. Slightly slower than .prototype but more flexible (and inescapable in certain cases)</li></li></ul><li>Parasitic Inheritance <br />
  50. 50. Useful Tricks<br />
  51. 51. Self-Calling Function<br /><ul><li>Function scope is the only scope in JavaScript
  52. 52. Self-calling function provides encapsulation
  53. 53. Both forms at right are valid, second is preferred</li></li></ul><li>Module Pattern<br /><ul><li>Necessary for <script> in the browser or Ti.include
  54. 54. Uses functional scope to provide a public interface to a module
  55. 55. Tweetanium/Training demos use a version of this</li></li></ul><li>Dynamic Function Signatures<br /><ul><li>Not necessary to explicitly name parameters
  56. 56. Function interfaces can rationalize many input types
  57. 57. jQuery does this well, and is very popular b/c of its API</li></li></ul><li>Call And Apply<br /><ul><li>Functions are first class objects
  58. 58. Passable, and callable
  59. 59. Can replace “this” inside function with something more useful
  60. 60. call: call a function with known arguments
  61. 61. apply: call a function with an array of arguments</li></li></ul><li>Apply Example<br />
  62. 62. Call Example<br />
  63. 63. A More Useful “this”<br />
  64. 64. Style Guidelines<br />
  65. 65. Style “Dos”<br /><ul><li>Use descriptive variable names (exception: well-understood, frequently typed modules/libraries, like “Ti” or “_” for Underscore.js)
  66. 66. JavaScript file contents (cohesion)
  67. 67. Google Style Guidelines: http://bit.ly/g_style
  68. 68. Follow the above and you are good to go</li></li></ul><li>Style “Don’ts”<br /><ul><li>terse local variable names – excuse me if I don’t know what “tvr” means inside your 300 line constructor
  69. 69. Huge files – if you want to write 13,000 lines in a file, go back to enterprise Java
  70. 70. Semicolons are not optional – you don’t want the interpreter writing code for you
  71. 71. and these monstrosities…</li></li></ul><li>Curly braces on the next line<br />*this style will actually break in some environments (semicolon insertion) <br />
  72. 72. Unnecessary Indentation<br />
  73. 73. JavaScript in Titanium Mobile<br />
  74. 74. JavaScript Engines<br /><ul><li>iOS – JavaScriptCore – C-based, pretty darn fast
  75. 75. Android – Rhino – Java-based, meant for the server-side, just okay in terms of performance
  76. 76. Coming soon – Android/V8 – C-based, super duper fast, minimum Android version 2.2 (don’t freak out, check the version distribution stats)
  77. 77. Android: Very important not to load all scripts up front in large applications (slow)</li></li></ul><li>Titanium Features<br /><ul><li>Built-in JSON serialization
  78. 78. CommonJS Module Spec
  79. 79. Proxy objects are special – what’s a proxy? A stand-in for a native object, like anything you get back from something like:</li></li></ul><li>What’s special about proxies?<br /><ul><li>You can’t modify the prototype
  80. 80. You can’t add functions or properties that start with “get” or “set” – these are magic in Titanium proxies:</li></li></ul><li>Further Reading<br />
  81. 81. Books and Reference<br /><ul><li>Mozilla Developer Network JavaScript Reference
  82. 82. JavaScript: The Good Parts
  83. 83. Eloquent JavaScript (free!)
  84. 84. High Performance JavaScript
  85. 85. JavaScript Patterns</li></li></ul><li>Not Exhaustive “Must Follow” List<br /><ul><li>@kevinwhinnery 
  86. 86. @BrendanEich
  87. 87. @functionsource
  88. 88. @dalmaer
  89. 89. @thomasfuchs
  90. 90. @zacharyjohnson
  91. 91. @wycats
  92. 92. @DavidKaneda
  93. 93. @rem
  94. 94. @dawsontoth (Titanium goodness)</li></li></ul><li>Potpourri <br /><ul><li>http://javascriptweekly.com- seriously, stop what you’re doing and go there right now
  95. 95. http://badassjs.com- then, after that, go here
  96. 96. http://jsbin.com - handy test harness
  97. 97. https://github.com/cjohansen/juicer - Great compression and obfuscation utility (Ruby)
  98. 98. http://crockford.com - Pay your respects</li></li></ul><li>Questions?<br />
  99. 99. Thank You!<br />

×