Write Better JavaScript
Upcoming SlideShare
Loading in...5

Write Better JavaScript






Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.linkedin.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Write Better JavaScript Presentation Transcript

  • Write Better JavaScript
    Kevin Whinnery
    Engineer and Platform Evangelist
    Appcelerator, Inc.
  • Kevin Whinnery
    Engineer and Platform Evangelist
    Appcelerator since 2008
    Husband and father of three:
    Web developer and JavaScript slinger turned mobile and desktop hacker.
  • Agenda
    • The Good Parts and Bad Parts
    • Object-Oriented Programming in JavaScript
    • Useful JavaScript Patterns, Tricks, and Style Guidelines
    • JavaScript in Titanium Mobile
    • Further Reading
  • JavaScript is a tragically misunderstood language.
  • “JavaScript is the incredibly hot girl at the party that brings her loser boyfriend DOM”
    Tom Robinson
    Founder, 280 North
  • JavaScript – What is it good for?
    • Absolutely nothing? Far from it…
    • Object-Oriented (Prototypical Inheritance)… or not
    • Flexible Objects
    • First-Class Functions
    • Built for event-driven UI
  • JavaScript: The Good Parts
    • 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
  • Some Bad Parts
  • Global Variables
  • Truthy and Falsy
    • Falsy Values:
    • false
    • 0
    • ‘’
    • null
    • undefined
    • NaN
    • Truthy Values:
    • Everything else
    • Almost always, you want === and !==
  • Floating Point Arithmetic
    Avoid this by converting to whole numbers, and converting back to decimal.
  • typeof is a liar
  • there’s more (http://wtfjs.com ),
    but let’s skip to…
  • The Good Parts
  • Expressive Object Literals
  • Easy Object Serialization
  • First Class Functions
  • Closures
  • Flexible Objects
  • Duck Typing
  • …plus it’s EVERYWHERE.
    one could develop all kinds of software applications with nothing else.
  • OOP!
    (There it is!)
  • 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…
  • Object Constructors
    * The capital first letter is by convention, not requirement.
  • Object Prototype
  • we could have also wrote…
  • …but object instantiation using the prototype to define functions/properties is faster.
    mentions this and other methods for…
  • Inheritance (One Approach)
  • JavaScript doesn’t support multiple inheritance, but there are multiple libraries that handle that and more, including underscore.js
  • Parasitic Inheritance
    • 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)
  • Parasitic Inheritance
  • Useful Tricks
  • Self-Calling Function
    • Function scope is the only scope in JavaScript
    • Self-calling function provides encapsulation
    • Both forms at right are valid, second is preferred
  • Module Pattern
    • Necessary for <script> in the browser or Ti.include
    • Uses functional scope to provide a public interface to a module
    • Tweetanium/Training demos use a version of this
  • Dynamic Function Signatures
    • Not necessary to explicitly name parameters
    • Function interfaces can rationalize many input types
    • jQuery does this well, and is very popular b/c of its API
  • Call And Apply
    • Functions are first class objects
    • Passable, and callable
    • Can replace “this” inside function with something more useful
    • call: call a function with known arguments
    • apply: call a function with an array of arguments
  • Apply Example
  • Call Example
  • A More Useful “this”
  • Style Guidelines
  • Style “Dos”
    • Use descriptive variable names (exception: well-understood, frequently typed modules/libraries, like “Ti” or “_” for Underscore.js)
    • JavaScript file contents (cohesion)
    • Google Style Guidelines: http://bit.ly/g_style
    • 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
    • Huge files – if you want to write 13,000 lines in a file, go back to enterprise Java
    • Semicolons are not optional – you don’t want the interpreter writing code for you
    • and these monstrosities…
  • Curly braces on the next line
    *this style will actually break in some environments (semicolon insertion)
  • Unnecessary Indentation
  • JavaScript in Titanium Mobile
  • JavaScript Engines
    • iOS – JavaScriptCore – C-based, pretty darn fast
    • Android – Rhino – Java-based, meant for the server-side, just okay in terms of performance
    • Coming soon – Android/V8 – C-based, super duper fast, minimum Android version 2.2 (don’t freak out, check the version distribution stats)
    • Android: Very important not to load all scripts up front in large applications (slow)
  • Titanium Features
    • Built-in JSON serialization
    • CommonJS Module Spec
    • 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
    • You can’t add functions or properties that start with “get” or “set” – these are magic in Titanium proxies:
  • Further Reading
  • Books and Reference
    • Mozilla Developer Network JavaScript Reference
    • JavaScript: The Good Parts
    • Eloquent JavaScript (free!)
    • High Performance JavaScript
    • JavaScript Patterns
  • Not Exhaustive “Must Follow” List
    • @kevinwhinnery 
    • @BrendanEich
    • @functionsource
    • @dalmaer
    • @thomasfuchs
    • @zacharyjohnson
    • @wycats
    • @DavidKaneda
    • @rem
    • @dawsontoth (Titanium goodness)
  • Potpourri
    • http://javascriptweekly.com- seriously, stop what you’re doing and go there right now
    • http://badassjs.com- then, after that, go here
    • http://jsbin.com - handy test harness
    • https://github.com/cjohansen/juicer - Great compression and obfuscation utility (Ruby)
    • http://crockford.com - Pay your respects
  • Questions?
  • Thank You!