douglas crockford presentation goodparts

58
JavaScript: The Good Parts Douglas Crockford Yahoo! Inc. http://www.crockford.com/ codecamp/

Upload: ajax-experience-2009

Post on 11-May-2015

1.923 views

Category:

Travel


1 download

TRANSCRIPT

Page 1: Douglas Crockford Presentation Goodparts

JavaScript: The Good Parts

Douglas Crockford

Yahoo! Inc.

http://www.crockford.com/codecamp/

Page 2: Douglas Crockford Presentation Goodparts

The World's Most Misunderstood Programming

Language

Page 3: Douglas Crockford Presentation Goodparts

A language of many contrasts.

Page 4: Douglas Crockford Presentation Goodparts

The broadest range of programmer skills of any programming language.

From computer scientists to cut-n-pasters

and everyone in between.

Page 5: Douglas Crockford Presentation Goodparts

Complaints

• "JavaScript is not a language I know."

• "The browser programming experience is awful."

• "It's not fast enough."

• "The language is just a pile of mistakes."

Page 6: Douglas Crockford Presentation Goodparts

Hidden under a huge steaming pile of good

intentions and blunders is an elegant, expressive

programming language.

JavaScript has good parts.

Page 7: Douglas Crockford Presentation Goodparts

JavaScript is succeeding very well in an environment where

Java was a total failure.

Page 8: Douglas Crockford Presentation Goodparts

Influences

• Self

prototypal inheritance

dynamic objects

• Scheme

lambda

loose typing

• Java

syntax

conventions

• Perl

regular expressions

Page 9: Douglas Crockford Presentation Goodparts

Bad Parts

• Global Variables

• + adds and concatenates

• Semicolon insertion

• typeof

• with and eval

• phony arrays

• == and !=

• false, null, undefined, NaN

Page 10: Douglas Crockford Presentation Goodparts

Transitivity? What's That?• '' == '0' // false

• 0 == '' // true

• 0 == '0' // true

• false == 'false' // false

• false == '0' // true

• false == undefined // false

• false == null // false

• null == undefined // true

• " \t\r\n " == 0 // true

Page 11: Douglas Crockford Presentation Goodparts

value = myObject[name];

if (value == null) {

alert(name + ' not found.');

}

Two errors that cancel each other out.

Page 12: Douglas Crockford Presentation Goodparts

value = myObject[name];

if (value === undefined) {

alert(name + ' not found.');

}

Page 13: Douglas Crockford Presentation Goodparts

Good features that interact badly

• Objects can inherit from other objects.

• Functions can be members of objects.

• for..in statement mixes inherited functions with the desired data members.

Page 14: Douglas Crockford Presentation Goodparts

for in is troublesome

• Design question: Should for..in do a shallow skim or a deep dredge?

• Decision: Deep dredge. The programmer must explicitly filter out the deep members.

• Except: They didn't tell anybody!

• Consequence: Lots of confusion about how to use for..in.

Page 15: Douglas Crockford Presentation Goodparts

for in is troublesome

• Better Decision: Don't release the language broadly until we have enough experience to have confidence that we made the right choice.

• Historical Context: Getting it right at Netscape wasn't an option.

Page 16: Douglas Crockford Presentation Goodparts

Bad Heritage

• Blockless statements if (foo)

bar();

• Expression statements foo;

• Floating point arithmetic 0.1 + 0.2 !== 0.3

• ++ and --

• switch

Page 17: Douglas Crockford Presentation Goodparts

Good Parts

• Lambda

• Dynamic Objects

• Loose Typing

• Object Literals

Page 18: Douglas Crockford Presentation Goodparts

Inheritance

• Inheritance is object-oriented code reuse.

• Two Schools:

• Classical

• Prototypal

Page 19: Douglas Crockford Presentation Goodparts

Prototypal Inheritance

• Class-free.

• Objects inherit from objects.

• An object contains a link to another object: Delegation. Differential Inheritance.

var newObject =

Object.create(oldObject);newObject

__proto__

oldObject

Page 20: Douglas Crockford Presentation Goodparts

Prototypal Inheritance

if (typeof Object.create !== 'function') {

Object.create = function (o) {

function F() {}

F.prototype = o;

return new F();

};

}

Page 21: Douglas Crockford Presentation Goodparts

new

• The new operator is required when calling a Constructor function.

• If new is omitted, the global object is clobbered by the constructor.

• There is no compile-time or run-time warning.

Page 22: Douglas Crockford Presentation Goodparts

Global

var names = ['zero', 'one', 'two',

'three', 'four', 'five', 'six',

'seven', 'eight', 'nine'];

var digit_name = function (n) {

return names[n];

};

alert(digit_name(3)); // 'three'

Page 23: Douglas Crockford Presentation Goodparts

Slow

var digit_name = function (n) {

var names = ['zero', 'one', 'two',

'three', 'four', 'five', 'six',

'seven', 'eight', 'nine'];

return names[n];

};

alert(digit_name(3)); // 'three'

Page 24: Douglas Crockford Presentation Goodparts

Closure

var digit_name = (function () {

var names = ['zero', 'one', 'two',

'three', 'four', 'five', 'six',

'seven', 'eight', 'nine'];

return function (n) {

return names[n];

};

}());

alert(digit_name(3)); // 'three'

Page 25: Douglas Crockford Presentation Goodparts

A Module Patternvar singleton = (function () {

var privateVariable;

function privateFunction(x) {

...privateVariable...

}

return {

firstMethod: function (a, b) {

...privateVariable...

},

secondMethod: function (c) {

...privateFunction()...

}

};

}());

Page 26: Douglas Crockford Presentation Goodparts

Module pattern is easily transformed into a powerful

constructor pattern.

Page 27: Douglas Crockford Presentation Goodparts

Power Constructors

1. Make an object.

• Object literal

• new

• Object.create

• call another power constructor

Page 28: Douglas Crockford Presentation Goodparts

Power Constructors

1. Make an object.

• Object literal, new, Object.create, call another power constructor

2. Define some variables and functions.

• These become private members.

Page 29: Douglas Crockford Presentation Goodparts

Power Constructors

1. Make an object.

• Object literal, new, Object.create, call another power constructor

2. Define some variables and functions.

• These become private members.

3. Augment the object with privileged methods.

Page 30: Douglas Crockford Presentation Goodparts

Power Constructors

1. Make an object.

• Object literal, new, Object.create, call another power constructor

2. Define some variables and functions.

• These become private members.

3. Augment the object with privileged methods.

4. Return the object.

Page 31: Douglas Crockford Presentation Goodparts

Step One

function myPowerConstructor(x) { var that = otherMaker(x);}

Page 32: Douglas Crockford Presentation Goodparts

Step Two

function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x);}

Page 33: Douglas Crockford Presentation Goodparts

Step Three

function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x); that.priv = function () { ... secret x that ... };}

Page 34: Douglas Crockford Presentation Goodparts

Step Four

function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x); that.priv = function () { ... secret x that ... }; return that;}

Page 35: Douglas Crockford Presentation Goodparts

Closure

• A function object contains

A function (name, parameters, body)

A reference to the environment in which it was created (context).

• This is a very good thing.

Page 36: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

block

{

....

}

• Might work well in other languages

block {

....

}

• Works well in JavaScript

Page 37: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return

{

ok: false

};

• SILENT ERROR!

return {

ok: true

};

• Works well in JavaScript

Page 38: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return

{

ok: false

};

Page 39: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return; // semicolon insertion

{

ok: false

};

Page 40: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return;

{ // block

ok: false

};

Page 41: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return;

{

ok: false // label

};

Page 42: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return;

{ // useless

ok: false // expression

}; // statement

Page 43: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return;

{

ok: false; // semicolon

}; // insertion

Page 44: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return;

{

ok: false;

}; // empty statement

Page 45: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return;

{ // unreachable statement

ok: false;

}

Page 46: Douglas Crockford Presentation Goodparts

Style Isn't Subjective

return

{

ok: false

};

• Bad style

return;

{

ok: false;

}

• Bad results

Page 47: Douglas Crockford Presentation Goodparts

Working with the Grain

Page 48: Douglas Crockford Presentation Goodparts

A Personal Journey

Beautiful Code

Page 49: Douglas Crockford Presentation Goodparts

JSLint

• JSLint defines a professional subset of JavaScript.

• It imposes a programming discipline that makes me much more confident in a dynamic, loosely-typed environment.

• http://www.JSLint.com/

Page 50: Douglas Crockford Presentation Goodparts

WARNING!JSLint will hurt your

feelings.

Page 51: Douglas Crockford Presentation Goodparts

Unlearning Is Really Hard

Perfectly Fine == Faulty

Page 52: Douglas Crockford Presentation Goodparts

It's not ignorance does so much damage; it's knowin' so

derned much that ain't so.

Josh Billings

Page 53: Douglas Crockford Presentation Goodparts

The Very Best Part:

StabilityNo new design errors

since 1999!

Page 54: Douglas Crockford Presentation Goodparts

Coming Soon

• [ES3.1] ECMAScript Fifth Edition

• Corrections

• Reality

• Support for object hardening

• Strict mode for reliability

"use strict";

• Waiting on implementations

Page 55: Douglas Crockford Presentation Goodparts

Not Coming Soon

• [ES4] This project has been cancelled.

• Instead, [ES-Harmony].

• So far, this project has no defined goals or rules.

Page 56: Douglas Crockford Presentation Goodparts

Safe Subsets

• The most effective way to make this language better is to make it smaller.

• FBJS

• Caja & Cajita

• Web Sandbox

• ADsafe

• The next edition of ECMAScript might include a secure formal subset.

Page 57: Douglas Crockford Presentation Goodparts

The Good Parts

• Your JavaScript application can reach a potential audience of billions.

• If you avoid the bad parts, JavaScript works really well. There is some brilliance in it.

• It is possible to write good programs with JavaScript.

Page 58: Douglas Crockford Presentation Goodparts