Write Better JavaScript<br />Kevin Whinnery<br />Engineer and Platform Evangelist<br />Appcelerator, Inc.<br />@kevinwhinn...
Kevin Whinnery<br />Engineer and Platform Evangelist<br />Appcelerator since 2008<br />Husband and father of three:<br />W...
Agenda<br /><ul><li>The Good Parts and Bad Parts
Object-Oriented Programming in JavaScript
Useful JavaScript Patterns, Tricks, and Style Guidelines
JavaScript in Titanium Mobile
Further Reading</li></li></ul><li>JavaScript is a tragically misunderstood language.<br />
“JavaScript is the incredibly hot girl at the party that brings her loser boyfriend DOM”<br />Tom Robinson<br />Founder, 2...
JavaScript – What is it good for?<br /><ul><li>Absolutely nothing?  Far from it…
Object-Oriented (Prototypical Inheritance)… or not
Flexible Objects
First-Class Functions
Built for event-driven UI</li></li></ul><li>JavaScript: The Good Parts<br /><ul><li>Published In 2008 by Doug Crockford
Covers the good and bad
I use patterns from this book every time I write JS
Buy/read/love</li></li></ul><li>Some Bad Parts<br />
Global Variables <br />app.js<br />some/library.js<br />
Truthy and Falsy<br /><ul><li>Falsy Values:
false
0
‘’
null
undefined
NaN
Truthy Values:
Everything else
Almost always, you want === and !==</li></li></ul><li>Floating Point Arithmetic<br />Avoid this by converting to whole num...
typeof is a liar<br />
there’s more (http://wtfjs.com ), <br />but let’s skip to…<br />
The Good Parts<br />
Expressive Object Literals<br />
Easy Object Serialization<br />
First Class Functions<br />
Closures<br />
Flexible Objects<br />
Duck Typing<br />
…plus it’s EVERYWHERE.<br />one could develop all kinds of software applications with nothing else.<br />
OOP!<br />(There it is!)<br />
JavaScript has Prototypal Inheritance, which creates new copies of objects from an existing object (the prototype)<br />th...
Object Constructors<br />* The capital first letter is by convention, not requirement.<br />
Object Prototype<br />
we could have also wrote…<br />
…but object instantiation using the prototype to define functions/properties is faster.<br />http://ejohn.org/blog/simple-...
Inheritance (One Approach)<br />
JavaScript doesn’t support multiple inheritance, but there are multiple libraries that handle that and more, including und...
Parasitic Inheritance <br /><ul><li>Create an existing object
Add new features and functionality to it (the parasites, if you will)
Pass it off as an instance of a new object
Slightly slower than .prototype but more flexible (and inescapable in certain cases)</li></li></ul><li>Parasitic Inheritan...
Useful Tricks<br />
Self-Calling Function<br /><ul><li>Function scope is the only scope in JavaScript
Self-calling function provides encapsulation
Both forms at right are valid, second is preferred</li></li></ul><li>Module Pattern<br /><ul><li>Necessary for <script> in...
Uses functional scope to provide a public interface to a module
Upcoming SlideShare
Loading in...5
×

Write Better JavaScript

3,663

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,663
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
44
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • A closure is a function, with a referencing environment for the free variables (arguments) to that function – it provides the function with a scope, that will live on for the life of the closure. It’s also the only way to create scope in JavaScript.
  • 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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×