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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Write Better JavaScript

3,574
views

Published on

Published in: Technology

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,574
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
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!