- Suppose a program consisting of 3 distinct tasks
- Tasks are performed one at a time
- Always in a defined order
- Simplest style of programming
// Event loop pseudo code for(;;) { if (endOfProgram) quit(); if(eventToHandle) { // task waiting, task finished ... handleEvent(eventToHandle); // Callback } }
task1(function task2(task1Result) { // do something with task 1 result }) var task1 = function(callback) { result = longRunningTask(); // Blocking call callback(result); // Calling a passed callback }
$('#button').click(function () { askForTwitterHandle(function(twitterHandle) { twitterHandle.getTweets(function (tweets) { processTweets(function (processedTweets) { ui.show(processedTweets); }); }); }); });
$('#button').click(function () { askForTwitterHandle(function(twitterHandle) { twitterHandle.getTweets(function (tweets) { ... }); }, function onFailure(error) { handleError(error); }); });
try { handle = askForTwitterHandle(); tweets = handle.getTweets(); ... } catch (errorMessage) { console.log('I messed up'); }
ajax('template.html', function(err, template) { if (err) handleError(); render(template); }) // Becomes var promiseForTemplate = $http.get('template.html'); promiseForTemplate.then(render, handleError)
promiseForTemplate.then(onFulfilled, onFailed);
// var transformedPromise = promiseForTemplate.then(onFulfilled, onFailed);
var user = getUser(); // blocking, ie, prompt for password var username = user.name;
var userNamePromise = getUser().then(function (user){ return user.name; })
var user = getUser(); // blocking, ie, prompt for password if (user === null) throw new Error('null user');
var userPromise = getUser().then(function (user){ if (user === null) throw new Error('null user'); return user; })
try { updateUser(data); } catch (exp) { console.log('There was an error', exp); }
var updateUserPromise = updateUser(data).then(undefined, function(exp) { console.log('There was an error', exp); })
try { updateUser(data); } catch (exp) { throw new Error('UpdateUserError: ' + exp.message) }
var updateUserPromise = updateUser(data).then(undefined, function(exp) { throw new Error('UpdateUserError: ' + exp.message) })
getUser('spike', function(err, user){ if(err) { ui.error(err); } else { getBestFriend(user, function(err, friend){ if (err) { ui.error(err); } else { ui.showBestFriend(friend, function(err, friend){ if (err) { ui.error(err); } }) } }) } })
getUser() .then(getBestFriend) .then(ui.showBestFriend) .then(undefined, ui.error)
Q library
.controller('testCtrl', function($scope, $q) { // inject the service var promiseOfTask = function () { var deferredTask = $q.defer(); // create a deferred object var result = blockingTask(); // long running task deferredTask.resolve(result) // resolve the future promise with the result return deferredTask.promise // return the promise } //using the promise promiseOfTask().then(function(result){ $scope.updateSomeModel(result); }) })
A list where items build:
Another list, but items fade as they build:
target="_self"
to the link.Press 'h' to highlight important sections of code (wrapped in <b>
).
<script type='text/javascript'> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script>
// Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } }
<style> p { color: pink } b { color: blue } </style>
<!DOCTYPE html> <html> <head> <title>My Awesome Page</title> </head> <body> <p>Hello world</p> <body> </html>
Press 'p' to toggle speaker notes.
Add ?presentme=true
to the URL to enabled presenter mode.
This setting is sticky, meaning refreshing the page will persist presenter
mode.
Hit ?presentme=false
to disable presenter mode.
Column 1 | Column 2 | Column 3 | Column 4 | |
---|---|---|---|---|
Row 1 | placeholder | placeholder | placeholder | placeholder |
Row 2 | placeholder | placeholder | placeholder | placeholder |
Row 3 | placeholder | placeholder | placeholder | placeholder |
Row 4 | placeholder | placeholder | placeholder | placeholder |
Row 5 | placeholder | placeholder | placeholder | placeholder |
Column 1 | Column 2 | Column 3 | Column 4 | |
---|---|---|---|---|
Row 1 | placeholder | placeholder | placeholder | placeholder |
Row 2 | placeholder | placeholder | placeholder | placeholder |
Row 3 | placeholder | placeholder | placeholder | placeholder |
Row 4 | placeholder | placeholder | placeholder | placeholder |
Row 5 | placeholder | placeholder | placeholder | placeholder |
Header 1 | placeholder | placeholder | placeholder |
---|---|---|---|
Header 2 | placeholder | placeholder | placeholder |
Header 3 | placeholder | placeholder | placeholder |
Header 4 | placeholder | placeholder | placeholder |
Header 5 | placeholder | placeholder | placeholder |
This is an example of quote text.
Important contact information goes here.