Pragmatic JavaScript

Pragmatic JavaScript
John Hann / @unscriptable
JavaScript Barbarian at Pivotal / cujoJS Co-lead

© 2013 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Friday, September 13, 13

Why are you here today?

1.dealing with things sensibly and realistically in a way that is
based on practical rather than theoretical considerations


Why are you here today?

To learn more about JavaScript?


did you get burned by JavaScript?

image: gifbin.com


image: gifbin.com

can't quite grok it?

Let's get one thing straight

JavaScript != Java


JavaScript is very different

JavaScript != C
JavaScript != Java
JavaScript != Ruby

image: http://www.legacyperformancehorses.net

First I was like

image: http://www.ﬂickr.com/photos/erniebm/

...then I was like

image: slapix.com

(this could be you)

JavaScript is functional

image: http://www.tyronestoddart.com

Functions

1. an expression involving one or more variables… srsly, you
had to read this?
function statement: a traditional function declaration
function expression: an "inline" function with or without a name

12

First-class functions
function transform (x) { return x * 2; }
// a function may be assigned to a variable
var func = transform;
// a function may have properties or be a property
func.inverse = function (x) { return x / 2; };
// a function may be used as a parameter
[1, 2, 3].map(func.inverse);

13

First-class functions
// a function may be a return value
function configure (options) {
// choose a function based on ref data
return options.flag
? addFoo
: identity;
}
function addFoo (x) { x.foo = 27; return x; }
function identity (x) { return x; }

14

Function scope
// JavaScript implements lexical (static) scoping
var a = 7;
function top () {
var b = 20;
return inner();
function inner () {
// both `a` and `b` are available here
return a + b;
}

}
top(); // returns 27

15

Function scope
// JavaScript only has function scope, not block scope
function silly () {
var i = 20;
for (var i = 0; i < 10; i++) {
doSomething(i);
}
return i;
}
silly(); // returns 10, not 20!

16

EcmaScript 6 has block scope!
// `let` is like `var`, but has block scope
function silly () {
var i = 20;
for (let i = 0; i < 10; i++) {
doSomething(i);
}
return i;
}
silly(); // returns 10, as you'd expect!

17

Side note: function and var hoisting
// this is valid JavaScript
function foo () {
a = 7;
b = add(a, 13);
// inner functions are auto-hoisted to outer scope
function add (x, y) { return x + y; }

}

// so are vars, but plz don't do this!
// the statements above look like implicit globals
var a, b;

18

Functions as properties
var obj = { val: 7 };
obj.method = function (x) {
return x > 0 ? this.val : 0;
};
// what happens when we do this?
var m = obj.method;
[1, 2, 3].map(m);

19

Function context
function useful () {
// what is `this` here?
return this.foo;
}
var myObj = { foo: 13, doSomething: useful };
// what about now?
myObj.doSomething();
// function context is dynamic
// and is applied by the dot operator!

20

Function context
function legacy () {
// `this` == `window` here
return this.document;
}
function strict () {
"use strict";
// `this` is undefined here
return this.document; // exception!
}

21

Side note: "use strict";
// strict mode helps prevent many common mistakes,
// including inadvertent / implicit globals
function lorem () {
// put "use strict" at the very top of a function
'use strict';
a = 7; // throws a ReferenceError
}
// never put "use strict" outside of a function!
// more about strict mode: bit.ly/strictMode

22

Function context
// call a function with context and arguments
myFunc.call(context /*, arg1, arg2, ... */);
// another way
myFunc.apply(context, arrayOfArgs);
// ES5*: create a function that is hard-bound to a context
myFunc.bind(context /*, arg1, arg2, ... */);

// *ES5 in legacy browsers? try cujoJS/poly @ cujojs.com

23

Function context binding: a good use case
// pass an object's method as a callback to a node function
var fs = require('fs');
var myHandler = new StatHandler();
fs.stat('foo.txt', myHandler.handle.bind(myHandler));
// two other ways without `bind()`
fs.stat('foo.txt', function () {
return myHandler.handle.apply(myHandler, arguments);
});
fs.stat('foo.txt', function (err, stats) {
return myHandler.handle(err, stats);
});

24

Immediately-Invoked Function Expression
// IIFE ("iffy"):
(function () { /* ... */ }());
// these also work, but plz don't:
!function () { /* ... */ }();
+function () { /* ... */ }();
// equivalent to this, but without a global
var globalName = function () { /* ... */ };
globalName();

25

Example: IIFE to boot an app
// look ma, no globals!
(function (doc, global) {
var el;
el = doc.createElement('script');
el.src = 'app/boot.js';
el.async = true;
/* ... add error handling here ... */
doc.body.appendChild(el);
}(document, this));

26

Example: debounce
function debounce (func, msec) {
var handle;
return function () {
var context = this, args = arguments;
clearTimeout(handle);
handle = setTimeout(function () {
func.apply(context, args);
}, msec);
};
}

27

Example: Crockford-Cornford beget
// add "true prototypal" inheritance to JavaScript
var create = Object.create /* ES5* */
|| (function (Base) {
return function (parent) {
Base.prototype = parent;
var child = new Base();
Base.prototype = null;
return child;
};
}(function () {}));

28

s!
ure
los
c

JavaScript loves boxes

image: http://toferet.wordpress.com

Closures

1. a function that refers to variables in its lexical scope keeps a
reference to the scope. This pair -- the function invocation
and its entire scope -- is called a closure.
This MDN Article has great examples, even if it doesn't quite
define closures correctly: bit.ly/MDN-closures

30

Closures
// every function creates a closure
var a = 42;
// `top` closes over à`
function top () {
var b = 27;
// ìnner` closes over à` and `b`
return function inner () {
return a + b;
}
}
// (yawn)

31

Closures: the interesting part
var a = 42;
function top () {
var b = 27;
return function inner () {
return a + b;
}
}
// closures only become interesting when we force them to
// exist beyond function invocation. `a` and `b` continue
// to exist until `func` goes out of scope.
var func = top();
setTimeout(func, 500);

32

Closures: the bad part
// loop + non-local vars + closures --> FAIL!
function createCombo (createOne, notify, data) {
var notifiers = [];
for (var i = 0; i < data.length; i++) {
var thing = createOne(data[i]);
notifiers.push(function () { notify(thing); });
}
return notifiers;
}
// hint: what is the scope of `thing`?
// later, what value does `thing` have?

33

Closures: the bad part
// one easy solution: make closures and loop data 1:1
function createCombo (createOne, notify, data) {
// create a closure for each `thing` via ES5's map()*
return data.map(function (item) {
var thing = createOne(item);
return function () {
notify(thing);
};
});
}

34

Learn more about functional JavaScript
• "Must read" book:
–Effective JavaScript by David Herman

35

JavaScript is prototypal

image: http://www.ﬂickr.com/photos/doug88888

Prototypal inheritance

1. denoting the original of which something else is a copy or
derivative.
prototypal inheritance: a descendent is a derivative of an
ancestor and, therefore, inherits the traits of the ancestor.

37

• In "true" prototypal inheritance, objects inherit directly from
other objects:
–prototype chain: parent <-- child <-- grandchild

38

# "true" prototypal inheritance (not javascript):
child <- beget(parent);
# child specialization
child.baz <- function () { /* ... */ }

39

Prototypal inheritance in JavaScript
// ES5's `Object.create()`* for true prototypal inheritance:
var parent = {
foo: 42, bar: 7,
baz: function () {}
};
var child = Object.create(parent); // prototype chain
child.baz = function () {
parent.baz.apply(this, arguments);
};

40

Not-quite-prototypal inheritance
• In JavaScript, a "type" or a "class" is the pairing of a
prototype object with a constructor.
• Instances of "types" are created by using the `new` operator
on a constructor-prototype pair.
• The instance object has its own properties, but also "inherits"
properties from its constructor's prototype.
–prototype chain: prototype <-- instance

41

// constructor-prototype pair
function Thing () {}
Thing.prototype = { /* ... */ };
// JavaScript uses the `new` operator.
var thing = new Thing();
// #truefact: the `new` operator was meant to make
// JavaScript feel more like Java. did it work?

42

• Inheritance of "types" occurs through this same mechanism.
• To create child "type", pair the child's constructor with an
instance of the parent:
–parent.prototype <-- parent instance/child prototype <-- child

43

// create a parent constructor-prototype pair
function Parent () {} // constructor
Parent.prototype = { foo: 42, bar: 7 };
// create a child constructor-prototype pair
// that chains the parent's prototype via `new`
function Child () {}
Child.prototype = new Parent(); // prototype chaining
// specialize child prototype
Child.prototype.baz = function () {};

44

Prototype chain: `new Child();`
Object.prototype
^ - has several built-in methods
|
Parent.prototype
^ - has `foo`, `bar`
|
Child.prototype = new Parent() // instance of Parent
^
|
child
- has `baz` which overrides Parent.prototype `baz`

45

Constructors: benefits
• Accept initialization parameters
• Execute initialization code
• Allow us to hide implementation details

46

Constructors
• Public properties: anything on the prototype
–Protected-by-convention: denoted by a leading or trailing "_"

• Privileged: instance methods created in the constructor
–Have access to local vars

• Private: local variables and functions in the constructor
–Variables, actually, not properties

47

Private and privileged
// constructors can add properties, too.
// added bonus! we have "private" vars!
function Parent (val) {
// "private" things
var secret = 7 + val;
// "privileged" things (instance properties)
this.get = function () { return secret; };
}
// "public" things
Parent.prototype = { foo: 42, bar: 7 };
Parent.prototype.baz = function () {};

48

Super
// how do we inherit private and privileged properties?
// you don't directly, but here's how we call "super":
function Child (val) {
// calling the "super" constructor in our context:
Parent.apply(this, arguments);
}
Child.prototype = new Parent();
Child.prototype.baz = function () {
// calling a "super" method
return Parent.prototype.baz.apply(this, arguments);
};

49

Prototype chain: `new Child(val);`
Object.prototype
|
Parent.prototype
^ - has `foo`, `bar`, `baz`
|
^ - has `get`, `baz` that overrides Parent.prototype
|
child
- has `get` which overrides Child.prototype `get`
on the prototype

50

Constructors: pitfall
// parent constructor takes an argument
function Parent (val) {
var secret = 7 + val;
this.get = function () { return secret; };
}
/* Parent.prototype = ... */
// prototype chaining doesn't provide an argument!
function Child (val) { /* ... */ }
Child.prototype = new Parent(); // <-- **ouch!**

51

Object.prototype
|
Parent.prototype
|
^ - has `get`, `baz` that overrides Parent.prototype
|
child
- has `get` which overrides Child.prototype `get`
on the prototype because we call Parent.apply!

52

ur inheritance horks hairballs

image: the internetz

why not surprised?

True prototypal inheritance
// `Object.create()` also fixes prototype chaining issues:
function Child (val) {
Parent.apply(this, arguments);
}
// no `new Parent()`! yay!
Child.prototype = Object.create(Parent.prototype);
/* Child.prototype.baz = ... */

54

Object.prototype
|
Parent.prototype
|
Child.prototype = Object.create(Parent.prototype)
^ - no longer calls `new Parent()`
| - has `baz` that overrides Parent.prototype
child
- has `get`

55

Example: configuration options
// inherit from a user-supplied "options" object so we
// don't pollute it when we fill-in default values.
function createBindableView (node, options) {
var viewOptions, view;
viewOptions = Object.create(options);
if (!('render' in viewOptions) {
viewOptions.render = defaultRender;
}
view = createView(node, viewOptions);
return bindableView(options, view);
}

56

Learn more about prototypal JavaScript
• "Must read" book:
–Effective JavaScript by David Herman
–(no, I don't receive a commission :) )

57

image: http://www.puccimanuli.com

JavaScript is async

No concurrency
• Things happen in parallel:
–XHR, iframes
–Loading of scripts, stylesheets
–"DOM ready"
–CSS animations

• But code executes in a single thread!
• Also: no formal language constructs (yet)

59

No concurrency: how can this work?
• De facto Javascript environment:
–A global event queue
–Event handlers for each event run to completion before next
event is handled

• Continuation passing via first-class functions

60

Continuation passing
• The simplest "functional" solution is to pass callback functions
• Typical: one callback per type of continuation:
–success, fail, progress, etc.

• Sensible implementations never call callback functions
immediately

61

Example: xhr
function xhr (type, url, callback, errback) {
// go do something long-running
// eventually, when some event occurs,
// call either `callback` or `errback`
}
xhrGet('GET', '/result', success, failure);
console.log('getting');
function success () { console.log('got it'); }
function failure () { console.log('i has a sad'); }

62

Continuation passing: cons
• Results are no longer returned from functions
• All functions involved in async operations must pass
callbacks
• Messy, messy, messy

63

Example: xhr
function xhrGet (url, callback, errback) {
try { xhr('GET', url, callback, errback); }
catch (ex) { errback(ex); }
}
xhrGet('/result', success, failure);

64

Example: xhr with fallback
function getTheResult (callback, errback) {
xhrGet('/result', callback, function (ex) {
if (test404(ex)) {
xhrGet('/result2', callback, errback);
}
else {
errback(ex);
}
});
}
function xhrGet (url, callback, errback) {
try { xhr('GET', url, callback, errback); } catch (ex) { errback(ex); }
}
function test404 (ex) {
return /not found/i.test(ex.message));
}
getTheResult(success, failure);

65

Example: coordinate 2 xhr POSTs
function postBoth (success, failure) {
var count = 2, results = [], failed;
xhrPost('/one', yay.bind(null, 0), nay);
xhrPost('/two', yay.bind(null, 1), nay);
function yay (i, result) {
results[i] = result;
if (--count == 0 && !failed) success(results);
}
function nay (ex) {
if (!failed) { failed = true; failure(ex); }
}
}

66

Example: coordinate 2 xhr POSTs w/ rollback

[code redacted]

67

lookd at ur async java scripts


now i has puke in my mouth

Is JavaScript doomed?
Nah, we have a solution.
The solution was invented in the 70's like everything else.


JavaScript + Promises

image: http://www.ﬂickr.com/photos/aimlessbrooke/

Promises
• Eliminate continuation passing
• Allow us to reason about async code similarly to sequential,
procedural code
–List async tasks in sequence
–Mimic try-catch-finally semantics

• Restore composability to async code
–Functions can return values or promises (functional composition)
–Promises are composable

71

Promises de facto standards
• 2009: Evolved from dojo (Kris Zyp)
–Defined "thenables" with a very simple API:
• obj.then(callback, errback [, progress]) -> thenable

–Simple, but underspecified: compatibility languished
–Broken implementations (e.g. $.Defer)

• 2012: Brain Cavalier and Domenic Denicola revived efforts!
–Promises/A+
• Step 1: tighten up `then` (done!)
• Next: standardize advanced concepts

72

Promises/A+
• Spec: http://promisesaplus.com/
• Wide adoption
–cujoJS/when http://cujojs.com
–Q: https://github.com/kriskowal/q
–Complete list: http://bit.ly/promises-aplus-impls

• Likely to be incorporated into ES6 and HTML5!

73

Example: distract user while loading UI
// load the specified UI package
function loadAppFeature(package) {
// a promise "pipeline":
return showBusyIndicator()
.then(curl([package])) // fetch
.then(showMainView) // display
.then(hideBusyIndicator);
}
// Notice how the value `main` is propagated
function showMainView (main) {
return wire(main); // returns a promise!
}

74

Example: try-catch-finally semantics
// sync semantics we'd like
// to mimic:
function foo (url) {
var r = xhr(url);
try {
r.send(); // sync!
} catch (ex) {
logError(ex);
} finally {
cleanup();
}
}

75

// how it would look using
// cujoJS/when:
function foo (url) {
var r = xhr(url);

}

return lift(r.send)
.otherwise(logError)
.ensure(cleanup);

Example: xhr with fallback using promises
// async operation with fallback using promises
function getTheResult () {
return xhr('/result')
.then(null, function (ex) {
if (!test404(ex)) throw ex;
return xhr('/result2')
});
}
function xhr (url) {
return lift(xhrGet.bind(null, url));
}
function test404 (ex) { return /not found/i.test(ex.message); }
getTheResult.then(doSomething, console.error.bind(console));

76

Learn more about Promises
• Awesome tutorials on async and promises:
–http://know.cujojs.com/tutorials

• Spec: http://promisesaplus.com

77

JavaScript can be modular

image: http://wallpapersus.com

Modules: benefits
• Code organization
–Small files, focused tests

• End reliance on globals
–Reduces namespace conflicts
–Reduces dependency hell

• Dependency management
–IDE support
–Build support

79

Example: a "Module pattern" module
// create an IIFE and pass our "namespace" to it
(function (ns) {
// declare module
var myModule = { foo: 7, bar: 42 };
myModule.doSomething = function (val) {
return ns.util.dom.foo(val);
};
// "export" our module;
ns.myModule = myModule;
}(window.namespace = window.namespace || {}));

80

Module pattern: dependency hell
• Too easy to reach into arbitrarily deep namespaces
****from anywhere in code****
• Can't remap or alias namespaces
–Multiple versions of code bases
–"Primitive" DI support

81

Module pattern: "dependency management"
<script src="client/util/dom.js"><script>

<script src="client/app/widgets.js"><script>
<script src="client/app/myModule.js"><script>

<script src="client/app/cust.js"><script>
<script src="client/app/myChildModule.js"><script>
<script src="client/start.js"><script>

82

tried ur modyule patturrrn


it was awwful

Formal modules for JavaScript
• Asynchronous Module Definition
• CommonJS Modules/1.1
• ES6 Modules

84

AMD
• Started by James Burke ~2009
• Improvement / replacement to dojo's module system
• Later, would coordinate with CommonJS efforts
• Supports all major browsers
• And node.js
–cujoJS/curl, r.js

85

AMD
• Implementations
–RequireJS: http://requirejs.org/
–cujoJS/curl: http://cujojs.com/
–dojo
–LinkedIn's Inject.js
–dozens of others

86

AMD modules
define(['util/dom', 'util/cust'],
function (dom, cust) {
var myModule = {
foo: 7,
bar: 42,
baz: function(){ return cust.flag?this.foo:this.bar; }
};
myModule.doSomething = function (val) {
return dom.foo(val);
};
return myModule;
});

87

AMD modules: benefits
• Dependencies are easy to discover since they are
****specified at the interface of the module****
• Many options and syntax variations
• Build tools are readily available
–cujoJS/cram http://cujojs.com
–r.js https://github.com/jrburke/r.js/
–dojo, etc.

• IDE support
–Scripted, IntelliJ, etc.
88

AMD modules: cons
• Many find the boilerplate to be verbose and ugly
• Adds some overhead to file size and load time
• Many options and syntax variations
-- confusing to newbs and parsers!
• Doesn't handle dependency cycles
–A syntax variant does, however.

89

CommonJS modules
• Spearheaded by Kris Kowal ~2009
• Ignored the needs of browsers in favor of a "clean slate"
• Influenced by other dynamic languages
• Current version 1.1.1

90

CommonJS modules
• Implementations
–Server
• node.js, vert.x, RingoJS

• And browser environments
–Browsers (build step required)
• browserify, RequireJS

–Browsers (build step optional during dev)
• cujoJS/curl

91

CommonJS modules
var dom = require('util/dom');
var cust = require('util/cust');
exports.foo = 7;
exports.bar = 42;
exports.baz = function () {
return cust.flag ? this.foo : this.bar;
};
exports.doSomething = function (val) {
};

92

CommonJS modules: node.js variant
var dom = require('util/dom');
var cust = require('util/cust');
module.exports = {
foo: 7,
bar: 42,
baz: function () { return cust.flag?this.foo:this.bar; },
doSomething: function (val) {
}
};

93

CommonJS modules: pitfalls
// BAD: dynamic module lookup
var isBrowser = typeof window != 'undefined';
var dom = require(isBrowser ? 'util/dom' : 'util/node-dom');
module.exports = {
foo: 7,
bar: 42,
baz: function () {
// BAD: deep dependency
return require('cust').flag ? this.foo : this.bar;
}
};

94

CommonJS modules: benefits
• Cleaner syntax than AMD
• Wide support on server side, some browser support
• Supports dependency cycles (but just don't, plz!)
• IDE support
–Scripted, IntelliJ, etc.

95

CommonJS modules: cons
• No direct browser support
–Requires a build step or on-the-fly conversion to AMD

• Discourages, but does not eliminate, deep dependencies
• Reliance on sync require(id) limits portability
• Soon to be replaced by an official standard?....

96

ES6 modules
• Finally!!!! An official standard for JavaScript modules!
• Part of EcmaScript 6
• Enforces static dependency analysis
• Provides hooks for consuming AMD and CommonJS

97

ES6 modules: cons
• Don't expect to use ES6 modules in production until…

2016
98

Learn more about: modules
• Simple tutorials: http://know.cujojs.com/tutorials
–"Best JavaScript modules tutorials on the web"
-- Brian Arnold, SitePen trainer

• Great overview: http://addyosmani.com/writing-modular-js/
• AMD wiki: https://github.com/amdjs/amdjs-api/wiki

99

image: slapix.com

Ready to go for it?

Code docs in JavaScript?
• Yep! It's called JSDoc
• jsdoc-toolkit: https://code.google.com/p/jsdoc-toolkit/
• @use JSDoc: http://usejsdoc.org/

101

AOP in JavaScript?
• YES!
• Possible because function context is dynamic!
• See Brian Cavalier's talk this afternoon

102

IOC in JavaScript?
• You bet!
• cujoJS/wire http://cujojs.com

103

RESTful patterns?
• You know it!
• Backbone: http://backbonejs.org/
• cujoJS/rest: http://cujojs.com

104

Enterprise Messaging?
• Yes, even that.
• cujoJS/msgs: http://cujojs.com

105

Data modeling and data binding?
• Uh huh.
• Check out the next JavaScript session with Scott Andrews,
Tim Branyen, and Matias Niemela

106

image: http://www.ﬂickr.com/photos/rooreynolds/

Questions?

Links
•
•
•
•
•
•

Tutorials: http://know.cujojs.com/tutorials
cujoJS: cujojs.com
strict mode: bit.ly/strictMode
MDN Closures: bit.ly/MDN-closures
Effective JavaScript: amzn.to/19HrldV
Promises/A+: promisesaplus.com/
– Implementations: bit.ly/promises-aplus-impls
• Modules: github.com/amdjs/amdjs-api/wiki
• AMD wiki: github.com/amdjs/amdjs-api/wiki
• jsdoc-toolkit: code.google.com/p/jsdoc-toolkit/

108

Pragmatic JavaScript

More Related Content

Similar to Pragmatic JavaScript (20)

Recently uploaded (20)

Pragmatic JavaScript