53
Write Better JavaScript Kevin Whinnery

Kevin Whinnery: Write Better JavaScript

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Kevin Whinnery: Write Better JavaScript

Write Better JavaScript

Kevin Whinnery

Page 2: Kevin Whinnery: Write Better JavaScript

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

Page 3: Kevin Whinnery: Write Better JavaScript

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: Kevin Whinnery: Write Better JavaScript

JavaScript is a tragically

misunderstood language.

Page 5: Kevin Whinnery: Write Better JavaScript

“JavaScript is the incredibly hot girl at the

party that brings her loser boyfriend DOM”

Tom Robinson Founder, 280 North

Page 6: Kevin Whinnery: Write Better JavaScript

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: Kevin Whinnery: Write Better JavaScript

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: Kevin Whinnery: Write Better JavaScript

Some Bad Parts

Page 9: Kevin Whinnery: Write Better JavaScript

Global Variables app.js

some/library.js

Page 10: Kevin Whinnery: Write Better JavaScript

Truthy and Falsy

•  Falsy Values: •  false •  0 •  ‘’ •  null •  undefined •  NaN

•  Truthy Values: •  Everything else

•  Almost always, you want === and !==

Page 11: Kevin Whinnery: Write Better JavaScript

Floating Point Arithmetic

Avoid this by converting to whole numbers, and converting back to decimal.

Page 12: Kevin Whinnery: Write Better JavaScript

typeof is a liar

Page 13: Kevin Whinnery: Write Better JavaScript

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

Page 14: Kevin Whinnery: Write Better JavaScript

The Good Parts

Page 15: Kevin Whinnery: Write Better JavaScript

Expressive Object Literals

Page 16: Kevin Whinnery: Write Better JavaScript

Easy Object Serialization

Page 17: Kevin Whinnery: Write Better JavaScript

First Class Functions

Page 18: Kevin Whinnery: Write Better JavaScript

Flexible Objects

Page 19: Kevin Whinnery: Write Better JavaScript

Duck Typing

Page 20: Kevin Whinnery: Write Better JavaScript

…plus it’s EVERYWHERE. one could develop all kinds of software

applications with nothing else.

Page 21: Kevin Whinnery: Write Better JavaScript

OOP! (There it is!)

Page 22: Kevin Whinnery: Write Better JavaScript

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 23: Kevin Whinnery: Write Better JavaScript

Object Constructors

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

Page 24: Kevin Whinnery: Write Better JavaScript

Object Prototype

Page 25: Kevin Whinnery: Write Better JavaScript

we could have also wrote…

Page 26: Kevin Whinnery: Write Better JavaScript

…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 27: Kevin Whinnery: Write Better JavaScript

Inheritance (One Approach)

Page 28: Kevin Whinnery: Write Better JavaScript

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 29: Kevin Whinnery: Write Better JavaScript

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 30: Kevin Whinnery: Write Better JavaScript

Parasitic Inheritance

Page 31: Kevin Whinnery: Write Better JavaScript

Useful Tricks

Page 32: Kevin Whinnery: Write Better JavaScript

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 33: Kevin Whinnery: Write Better JavaScript

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 34: Kevin Whinnery: Write Better JavaScript

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 35: Kevin Whinnery: Write Better JavaScript

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 36: Kevin Whinnery: Write Better JavaScript

Apply Example

Page 37: Kevin Whinnery: Write Better JavaScript

Call Example

Page 38: Kevin Whinnery: Write Better JavaScript

A More Useful “this”

Page 39: Kevin Whinnery: Write Better JavaScript

Style Guidelines

Page 40: Kevin Whinnery: Write Better JavaScript

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 41: Kevin Whinnery: Write Better JavaScript

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 42: Kevin Whinnery: Write Better JavaScript

Curly braces on the next line

*this style will actually break in some environments (semicolon insertion)

Page 43: Kevin Whinnery: Write Better JavaScript

Unnecessary Indentation

Page 44: Kevin Whinnery: Write Better JavaScript

JavaScript in Titanium Mobile

Page 45: Kevin Whinnery: Write Better JavaScript

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)

Page 46: Kevin Whinnery: Write Better JavaScript

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 47: Kevin Whinnery: Write Better JavaScript

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 48: Kevin Whinnery: Write Better JavaScript

Further Reading

Page 49: Kevin Whinnery: Write Better JavaScript

Books and Reference

•  Mozilla Developer Network JavaScript Reference

•  JavaScript: The Good Parts

•  Eloquent JavaScript (free!)

•  High Performance JavaScript

•  JavaScript Patterns

Page 50: Kevin Whinnery: Write Better JavaScript

Not Exhaustive “Must Follow” List

•  @kevinwhinnery J •  @BrendanEich •  @functionsource •  @dalmaer •  @thomasfuchs •  @zacharyjohnson •  @wycats •  @DavidKaneda •  @rem •  @dawsontoth (Titanium goodness)

Page 51: Kevin Whinnery: Write Better JavaScript

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 52: Kevin Whinnery: Write Better JavaScript

Questions?

Page 53: Kevin Whinnery: Write Better JavaScript

Thank You!