Your SlideShare is downloading. ×
0
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Write Better JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Write Better JavaScript

1,236

Published on

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

No Downloads
Views
Total Views
1,236
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. Write Better JavaScript<br />Kevin Whinnery<br />Engineer and Platform Evangelist<br />Appcelerator, Inc.<br />@kevinwhinnery<br />
    • 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. Agenda<br /><ul><li>The Good Parts and Bad Parts
    • 4. Object-Oriented Programming in JavaScript
    • 5. Useful JavaScript Patterns, Tricks, and Style Guidelines
    • 6. JavaScript in Titanium Mobile
    • 7. Further Reading</li></li></ul><li>JavaScript is a tragically misunderstood language.<br />
    • 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. JavaScript – What is it good for?<br /><ul><li>Absolutely nothing? Far from it…
    • 10. Object-Oriented (Prototypical Inheritance)… or not
    • 11. Flexible Objects
    • 12. First-Class Functions
    • 13. Built for event-driven UI</li></li></ul><li>JavaScript: The Good Parts<br /><ul><li>Published In 2008 by Doug Crockford
    • 14. Covers the good and bad
    • 15. I use patterns from this book every time I write JS
    • 16. Buy/read/love</li></li></ul><li>Some Bad Parts<br />
    • 17. Global Variables <br />app.js<br />some/library.js<br />
    • 18. Truthy and Falsy<br /><ul><li>Falsy Values:
    • 19. false
    • 20. 0
    • 21. ‘’
    • 22. null
    • 23. undefined
    • 24. NaN
    • 25. Truthy Values:
    • 26. Everything else
    • 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. typeof is a liar<br />
    • 29. there’s more (http://wtfjs.com ), <br />but let’s skip to…<br />
    • 30. The Good Parts<br />
    • 31. Expressive Object Literals<br />
    • 32. Easy Object Serialization<br />
    • 33. First Class Functions<br />
    • 34. Closures<br />
    • 35. Flexible Objects<br />
    • 36. Duck Typing<br />
    • 37. …plus it’s EVERYWHERE.<br />one could develop all kinds of software applications with nothing else.<br />
    • 38. OOP!<br />(There it is!)<br />
    • 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. Object Constructors<br />* The capital first letter is by convention, not requirement.<br />
    • 41. Object Prototype<br />
    • 42. we could have also wrote…<br />
    • 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. Inheritance (One Approach)<br />
    • 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. Parasitic Inheritance <br /><ul><li>Create an existing object
    • 47. Add new features and functionality to it (the parasites, if you will)
    • 48. Pass it off as an instance of a new object
    • 49. Slightly slower than .prototype but more flexible (and inescapable in certain cases)</li></li></ul><li>Parasitic Inheritance <br />
    • 50. Useful Tricks<br />
    • 51. Self-Calling Function<br /><ul><li>Function scope is the only scope in JavaScript
    • 52. Self-calling function provides encapsulation
    • 53. Both forms at right are valid, second is preferred</li></li></ul><li>Module Pattern<br /><ul><li>Necessary for &lt;script&gt; in the browser or Ti.include
    • 54. Uses functional scope to provide a public interface to a module
    • 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. Function interfaces can rationalize many input types
    • 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. Passable, and callable
    • 59. Can replace “this” inside function with something more useful
    • 60. call: call a function with known arguments
    • 61. apply: call a function with an array of arguments</li></li></ul><li>Apply Example<br />
    • 62. Call Example<br />
    • 63. A More Useful “this”<br />
    • 64. Style Guidelines<br />
    • 65. Style “Dos”<br /><ul><li>Use descriptive variable names (exception: well-understood, frequently typed modules/libraries, like “Ti” or “_” for Underscore.js)
    • 66. JavaScript file contents (cohesion)
    • 67. Google Style Guidelines: http://bit.ly/g_style
    • 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. Huge files – if you want to write 13,000 lines in a file, go back to enterprise Java
    • 70. Semicolons are not optional – you don’t want the interpreter writing code for you
    • 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. Unnecessary Indentation<br />
    • 73. JavaScript in Titanium Mobile<br />
    • 74. JavaScript Engines<br /><ul><li>iOS – JavaScriptCore – C-based, pretty darn fast
    • 75. Android – Rhino – Java-based, meant for the server-side, just okay in terms of performance
    • 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. 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. CommonJS Module Spec
    • 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. 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. Books and Reference<br /><ul><li>Mozilla Developer Network JavaScript Reference
    • 82. JavaScript: The Good Parts
    • 83. Eloquent JavaScript (free!)
    • 84. High Performance JavaScript
    • 85. JavaScript Patterns</li></li></ul><li>Not Exhaustive “Must Follow” List<br /><ul><li>@kevinwhinnery 
    • 86. @BrendanEich
    • 87. @functionsource
    • 88. @dalmaer
    • 89. @thomasfuchs
    • 90. @zacharyjohnson
    • 91. @wycats
    • 92. @DavidKaneda
    • 93. @rem
    • 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. http://badassjs.com- then, after that, go here
    • 96. http://jsbin.com - handy test harness
    • 97. https://github.com/cjohansen/juicer - Great compression and obfuscation utility (Ruby)
    • 98. http://crockford.com - Pay your respects</li></li></ul><li>Questions?<br />
    • 99. Thank You!<br />

    ×