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.

9

Share

Download to read offline

Write Better JavaScript

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

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 />
  • OsnyNetto

    Mar. 14, 2014
  • iambibhas

    Sep. 22, 2012
  • gloyd9954

    May. 25, 2012
  • keis1979

    Sep. 23, 2011
  • t32k

    Sep. 23, 2011
  • halilozan

    Sep. 22, 2011
  • Domon

    Sep. 21, 2011
  • fumichika

    Sep. 20, 2011
  • lis186

    Sep. 18, 2011

Views

Total views

4,293

On Slideshare

0

From embeds

0

Number of embeds

39

Actions

Downloads

45

Shares

0

Comments

0

Likes

9

×