Download - Write Better JavaScript
![Page 1: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/1.jpg)
Kevin WhinneryEngineer and Platform Evangelist
Appcelerator, Inc.
@kevinwhinnery
Write Better JavaScript
![Page 2: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/2.jpg)
Kevin WhinneryEngineer and Platform EvangelistAppcelerator since 2008
Husband and father of three:
Web developer and JavaScript slinger turned mobile and desktop hacker.
http://kevinwhinnery.comhttp://twitter.com/kevinwhinneryhttp://github.com/kwhinnery
![Page 3: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/3.jpg)
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
![Page 4: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/4.jpg)
JavaScript is a tragically
misunderstood language.
![Page 5: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/5.jpg)
“JavaScript is the incredibly hot girl at the party that brings her loser boyfriend
DOM”
Tom RobinsonFounder, 280 North
![Page 6: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/6.jpg)
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
![Page 7: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/7.jpg)
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
![Page 8: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/8.jpg)
Some Bad Parts
![Page 9: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/9.jpg)
Global Variables
app.js
some/library.js
![Page 10: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/10.jpg)
Truthy and Falsy
• Falsy Values:• false• 0• ‘’• null• undefined• NaN
• Truthy Values:• Everything else
• Almost always, you want === and !==
![Page 11: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/11.jpg)
Floating Point Arithmetic
Avoid this by converting to whole numbers, and converting back to decimal.
![Page 12: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/12.jpg)
typeof is a liar
![Page 14: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/14.jpg)
The Good Parts
![Page 15: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/15.jpg)
Expressive Object Literals
![Page 16: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/16.jpg)
Easy Object Serialization
![Page 17: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/17.jpg)
First Class Functions
![Page 18: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/18.jpg)
Closures
![Page 19: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/19.jpg)
Flexible Objects
![Page 20: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/20.jpg)
Duck Typing
![Page 21: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/21.jpg)
…plus it’s EVERYWHERE.one could develop all kinds of
software applications with nothing else.
![Page 22: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/22.jpg)
OOP!(There it is!)
![Page 23: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/23.jpg)
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…
![Page 24: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/24.jpg)
Object Constructors
* The capital first letter is by convention, not requirement.
![Page 25: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/25.jpg)
Object Prototype
![Page 26: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/26.jpg)
we could have also wrote…
![Page 27: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/27.jpg)
…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…
![Page 28: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/28.jpg)
Inheritance (One Approach)
![Page 29: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/29.jpg)
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
![Page 30: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/30.jpg)
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)
![Page 31: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/31.jpg)
Parasitic Inheritance
![Page 32: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/32.jpg)
Useful Tricks
![Page 33: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/33.jpg)
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
![Page 34: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/34.jpg)
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
![Page 35: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/35.jpg)
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
![Page 36: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/36.jpg)
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
![Page 37: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/37.jpg)
Apply Example
![Page 38: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/38.jpg)
Call Example
![Page 39: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/39.jpg)
A More Useful “this”
![Page 40: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/40.jpg)
Style Guidelines
![Page 41: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/41.jpg)
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
![Page 42: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/42.jpg)
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…
![Page 43: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/43.jpg)
Curly braces on the next line
*this style will actually break in some environments (semicolon insertion)
![Page 44: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/44.jpg)
Unnecessary Indentation
![Page 45: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/45.jpg)
JavaScript in Titanium Mobile
![Page 46: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/46.jpg)
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)
![Page 47: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/47.jpg)
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:
![Page 48: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/48.jpg)
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:
![Page 49: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/49.jpg)
Further Reading
![Page 50: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/50.jpg)
Books and Reference
• Mozilla Developer Network JavaScript Reference
• JavaScript: The Good Parts
• Eloquent JavaScript (free!)
• High Performance JavaScript
• JavaScript Patterns
![Page 51: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/51.jpg)
Not Exhaustive “Must Follow” List• @kevinwhinnery • @BrendanEich• @functionsource• @dalmaer• @thomasfuchs• @zacharyjohnson• @wycats• @DavidKaneda• @rem• @dawsontoth (Titanium
goodness)
![Page 52: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/52.jpg)
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
![Page 53: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/53.jpg)
Questions?
![Page 54: Write Better JavaScript](https://reader034.vdocument.in/reader034/viewer/2022052410/5555d30cd8b42aaf158b4dfb/html5/thumbnails/54.jpg)
Thank You!