• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,531
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
40
Comments
0
Likes
9

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
    Kevin Whinnery
    Engineer and Platform Evangelist
    Appcelerator, Inc.
    @kevinwhinnery
  • 2. Kevin Whinnery
    Engineer and Platform Evangelist
    Appcelerator since 2008
    Husband and father of three:
    Web developer and JavaScript slinger turned mobile and desktop hacker.
    http://kevinwhinnery.com
    http://twitter.com/kevinwhinnery
    http://github.com/kwhinnery
  • 3. Agenda
    • 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
  • JavaScript is a tragically misunderstood language.
  • 8. “JavaScript is the incredibly hot girl at the party that brings her loser boyfriend DOM”
    Tom Robinson
    Founder, 280 North
  • 9. JavaScript – What is it good for?
    • 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
  • JavaScript: The Good Parts
    • 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
  • Some Bad Parts
  • 17. Global Variables
    app.js
    some/library.js
  • 18. Truthy and Falsy
  • Floating Point Arithmetic
    Avoid this by converting to whole numbers, and converting back to decimal.
  • 28. typeof is a liar
  • 29. there’s more (http://wtfjs.com ),
    but let’s skip to…
  • 30. The Good Parts
  • 31. Expressive Object Literals
  • 32. Easy Object Serialization
  • 33. First Class Functions
  • 34. Closures
  • 35. Flexible Objects
  • 36. Duck Typing
  • 37. …plus it’s EVERYWHERE.
    one could develop all kinds of software applications with nothing else.
  • 38. OOP!
    (There it is!)
  • 39. JavaScript has Prototypal Inheritance, which creates new copies of objects from an existing object (the prototype)
    there’s much more to it than this, but we’ll keep it mostly high level…
  • 40. Object Constructors
    * The capital first letter is by convention, not requirement.
  • 41. Object Prototype
  • 42. we could have also wrote…
  • 43. …but object instantiation using the prototype to define functions/properties is faster.
    http://ejohn.org/blog/simple-class-instantiation
    mentions this and other methods for…
  • 44. Inheritance (One Approach)
  • 45. JavaScript doesn’t support multiple inheritance, but there are multiple libraries that handle that and more, including underscore.js
    http://documentcloud.github.com/underscore/#extend
  • 46. Parasitic Inheritance
    • 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)
  • Parasitic Inheritance
  • 50. Useful Tricks
  • 51. Self-Calling Function
    • Function scope is the only scope in JavaScript
    • 52. Self-calling function provides encapsulation
    • 53. Both forms at right are valid, second is preferred
  • Module Pattern
    • Necessary for <script> 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
  • Dynamic Function Signatures
    • 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
  • Call And Apply
    • 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
  • Apply Example
  • 62. Call Example
  • 63. A More Useful “this”
  • 64. Style Guidelines
  • 65. Style “Dos”
    • 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
  • Style “Don’ts”
    • 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…
  • Curly braces on the next line
    *this style will actually break in some environments (semicolon insertion)
  • 72. Unnecessary Indentation
  • 73. JavaScript in Titanium Mobile
  • 74. JavaScript Engines
    • 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)
  • Titanium Features
    • 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:
  • What’s special about proxies?
    • 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:
  • Further Reading
  • 81. Books and Reference
    • Mozilla Developer Network JavaScript Reference
    • 82. JavaScript: The Good Parts
    • 83. Eloquent JavaScript (free!)
    • 84. High Performance JavaScript
    • 85. JavaScript Patterns
  • Not Exhaustive “Must Follow” List
  • Potpourri
    • 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
  • Questions?
  • 99. Thank You!