cmacrander/promises_workshop.html

## promises_workshop.html
<!Doctype html>
<html>
    <head>
        <title>JavaScript Promises</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/q.js/0.9.2/q.min.js"></script>
    </head>
    <body>

        <button id="the-button">Click Me</button>

        <script type="text/javascript">

// # Let's write some javascript promises


// ## Discuss order of execution

// ### Trivial case

console.log("trivial case 1");
console.log("trivial case 2");

// ### Functions

function trivialFunction() {
    console.log("trivial function 1");
}

// ### Event loop

function initButton() {
    var button = document.getElementById('the-button');
    var x = 'before';

    // Where did 'event' come from?
    button.onclick = function (event) {
        var x = 'after';
        console.log("button click!", x, event);
    };

    // What is x?
    console.log(x);
}

function initTimeout() {
    var x = 'before';

    setTimeout(function () {
        var x = 'after';
        console.log(x);
    }, 500);

    // What is x?
    console.log(x);
}

// ## Async Functions

function asyncPlain(x) {
    setTimeout(function () {
        x += 1;
        console.log("asyncPlain() finished", x);
    }, 500);
}

function useAsyncPlain() {
    var x = 1;
    asyncPlain(x);
    console.log("Well, shit.", x);
}

// ### Async solution: callbacks

function asyncCallback(x, callback) {
    setTimeout(function () {
        x += 1;
        console.log("asyncCallback() finished");
        callback(x);
    }, 500);
}

function useAsyncCallback() {
    var x = 1;
    var callback = function (result) {
        x = result;
        console.log(x);
    };
    asyncCallback(x, callback);

    return x;
}

function pyramidOfDoom() {
    // Can we get x to be 4?
    var x = 1;
    asyncCallback(x, function (result) {
        asyncCallback(result, function (result) {
            asyncCallback(result, function (result) {
                console.log(result);
            });
        });
    });
}

// ### Async solution: promises

function asyncPromise(x) {
    // Note the return! So important!
    return Q.promise(function (resolve, reject) {
        setTimeout(function () {
            x += 1;
            resolve(x);
        }, 500);
    });
}

function useAsyncPromise() {
    // Can we get x to be 4?
    var x = 1;
    var p = asyncPromise(x)
    .then(asyncPromise)
    .then(asyncPromise)
    .then(function (result) {
        console.log(result);

        return 'custom data';  // whoa!
    });

    // What is p?
    console.log(p);

    p.then(function (result) {
        console.log(result);
    });
}

function batchPromises() {
    var p1 = asyncPromise(1);
    var p2 = asyncPromise(2);
    var p3 = asyncPromise(3);

    Q.all([p1, p2, p3]).then(function (result) {
        console.log(result);
    });
}

function promisesAsData() {
    var async = false;
    var p;

    if (async) {
        p = asyncPromise(1);
    } else {
        p = 5;
    }

    // Is p a promise or a value? Doesn't matter!!
    Q.when(p).then(function (result) {
        console.log(result);
    });
}

        </script>

    </body>
</html>
	<!Doctype html>
	<html>
	<head>
	<title>JavaScript Promises</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/q.js/0.9.2/q.min.js"></script>
	</head>
	<body>

	<button id="the-button">Click Me</button>

	<script type="text/javascript">

	// # Let's write some javascript promises


	// ## Discuss order of execution

	// ### Trivial case

	console.log("trivial case 1");
	console.log("trivial case 2");

	// ### Functions

	function trivialFunction() {
	console.log("trivial function 1");
	}

	// ### Event loop

	function initButton() {
	var button = document.getElementById('the-button');
	var x = 'before';

	// Where did 'event' come from?
	button.onclick = function (event) {
	var x = 'after';
	console.log("button click!", x, event);
	};

	// What is x?
	console.log(x);
	}

	function initTimeout() {
	var x = 'before';

	setTimeout(function () {
	var x = 'after';
	console.log(x);
	}, 500);

	// What is x?
	console.log(x);
	}

	// ## Async Functions

	function asyncPlain(x) {
	setTimeout(function () {
	x += 1;
	console.log("asyncPlain() finished", x);
	}, 500);
	}

	function useAsyncPlain() {
	var x = 1;
	asyncPlain(x);
	console.log("Well, shit.", x);
	}

	// ### Async solution: callbacks

	function asyncCallback(x, callback) {
	setTimeout(function () {
	x += 1;
	console.log("asyncCallback() finished");
	callback(x);
	}, 500);
	}

	function useAsyncCallback() {
	var x = 1;
	var callback = function (result) {
	x = result;
	console.log(x);
	};
	asyncCallback(x, callback);

	return x;
	}

	function pyramidOfDoom() {
	// Can we get x to be 4?
	var x = 1;
	asyncCallback(x, function (result) {
	asyncCallback(result, function (result) {
	asyncCallback(result, function (result) {
	console.log(result);
	});
	});
	});
	}

	// ### Async solution: promises

	function asyncPromise(x) {
	// Note the return! So important!
	return Q.promise(function (resolve, reject) {
	setTimeout(function () {
	x += 1;
	resolve(x);
	}, 500);
	});
	}

	function useAsyncPromise() {
	// Can we get x to be 4?
	var x = 1;
	var p = asyncPromise(x)
	.then(asyncPromise)
	.then(asyncPromise)
	.then(function (result) {
	console.log(result);

	return 'custom data'; // whoa!
	});

	// What is p?
	console.log(p);

	p.then(function (result) {
	console.log(result);
	});
	}

	function batchPromises() {
	var p1 = asyncPromise(1);
	var p2 = asyncPromise(2);
	var p3 = asyncPromise(3);

	Q.all([p1, p2, p3]).then(function (result) {
	console.log(result);
	});
	}

	function promisesAsData() {
	var async = false;
	var p;

	if (async) {
	p = asyncPromise(1);
	} else {
	p = 5;
	}

	// Is p a promise or a value? Doesn't matter!!
	Q.when(p).then(function (result) {
	console.log(result);
	});
	}

	</script>

	</body>
	</html>