One of the main reasons Titanium Mobile has been so successful is that the technology has significantly lowered the barrier to entry for native mobile development. A major force behind this is JavaScript, Titanium's primary programming language. The JavaScript programming language is small enough where the basics can be learned in a matter of hours, which has enabled developers from many different backgrounds to become productive using Titanium. But there's much more to JavaScript than just control structures and a handful of primitive data types - JavaScript is a beautiful functional programming language with great features you might not be using. Most developers working on the web today have had some exposure to JavaScript, but there's a difference between using jQuery for DOM manipulation on a web page and writing an entire application in JavaScript. This talk, intended for beginner or intermediate JavaScript developers, will focus on the essential language features you will need to write professional JavaScript applications, including but not limited to: Object Oriented Programming in JavaScript The Good Parts and Bad Parts of JavaScript Useful JavaScript Patterns, Tricks, and Style Guidelines The JavaScript runtime in Titanium Mobile Further Reading and ways to stay up to date on JavaScript

1. Write Better JavaScript
Kevin Whinnery

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
• Object-Oriented Programming
in JavaScript
• Useful JavaScript Patterns,
Tricks, and Style Guidelines
• JavaScript in Titanium Mobile
• Further Reading

4. JavaScript is a
tragically
misunderstood
language.

5. “JavaScript is the
incredibly hot girl at the
party that brings her loser
boyfriend DOM”
Tom Robinson
Founder, 280 North

6. 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

7. 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

8. Some Bad Parts

9. Global Variables
app.js
some/library.js

10. Truthy and Falsy
• Falsy Values:
• false
• 0
• ‘’
• null
• undefined
• NaN
• Truthy Values:
• Everything else
• Almost always, you
want === and !==

11. Floating Point Arithmetic
Avoid this by converting to whole numbers, and
converting back to decimal.

12. typeof is a liar

13. there’s more (http://wtfjs.com ),
but let’s skip to…

14. The Good Parts

15. Expressive Object Literals

16. Easy Object Serialization

17. First Class Functions

18. Flexible Objects

19. Duck Typing

20. …plus it’s EVERYWHERE.
one could develop all kinds of software
applications with nothing else.

21. OOP!
(There it is!)

22. 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…

23. Object Constructors
* The capital first letter is by convention, not requirement.

24. Object Prototype

25. we could have also wrote…

26. …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…

27. Inheritance (One Approach)

28. 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

29. 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)

30. Parasitic Inheritance

31. Useful Tricks

32. 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

33. 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

34. 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

35. 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

36. Apply Example

37. Call Example

38. A More Useful “this”

39. Style Guidelines

40. 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

41. 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…

42. Curly braces on the next line
*this style will actually break in some environments (semicolon insertion)

43. Unnecessary Indentation

44. JavaScript in
Titanium Mobile

45. JavaScript Engines
• iOS – JavaScriptCore – C-based, pretty darn fast
• Android – Rhino – Java-based, meant for the server-side
or desktop, 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)

46. 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:

47. 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:

48. Further Reading

49. Books and Reference
• Mozilla Developer Network JavaScript Reference
• JavaScript: The Good Parts
• Eloquent JavaScript (free!)
• High Performance JavaScript
• JavaScript Patterns

50. Not Exhaustive “Must Follow” List
• @kevinwhinnery J
• @BrendanEich
• @functionsource
• @dalmaer
• @thomasfuchs
• @zacharyjohnson
• @wycats
• @DavidKaneda
• @rem
• @dawsontoth (Titanium goodness)

51. 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

52. Questions?

53. Thank You!