Fighting async JavaScript (CSP)

Max Klymyshyn
CartFresh
Fighting async JavaScript

CartFresh
GVMachinesInc.
‣ GroceryDeliverystartup
‣ WorkinginUkraineas ZAKAZ.UA(Kiev,
Dnepropetrovsk,Kharkiv)andas CartFresh(Boston,
US)
‣ React.jsonfront-end
‣ Python onback-end

AsynchronousI/O
asynchronousI/OleadstocallbackAPI’s,
which leadtonestedlambdas,
which leadto…thepyramidof doom:

range.on("preheat", function() {
pot.on("boil", function() {
rice.on("cooked", function() {
dinner.serve(rice);
});
});
});
Pyramidof doom

‣ IBM1989: 50%of theeffortinaccomplishinga taskfortheprogrammeris
towardsunderstandingthesystem
‣ BellLabs1992:60%-80%of theirtime understandingcode,20% asthe
developersgainexperiencewith currentcodebase
‣ NationalResearchCouncil1997(Canada):over25% of theirtimeeither
searchingfor orlookingatcode
‣ Microsoft2006:50%
‣ PeterHallam2006:70%duringpersonal experiment
‣ Microsoft2007:65%(survey)
[1]

Fighting async JavaScript (CSP)

Promises
var greetingPromise = sayHello();
greetingPromise
.then(addExclamation)
.then(function (greeting) {
console.log(greeting); // hello world!!!!
}, function(error) {
// 'uh oh: something bad happened
console.error('uh oh: ', error);
});

Await
async function loadStory() {
try {
let story = await getJSON('story.json');
addHtmlToPage(story.heading);
for (let chapter of story.chapterURLs.map(getJSON)) {
addHtmlToPage((await chapter).html);
}
addTextToPage("All done");
} catch (err) {
addTextToPage("Argh, broken: " + err.message);
}
document.querySelector('.spinner').style.display = 'none';
}
(async function() {
await loadStory();
console.log("Yey, story successfully loaded!");
}());
[5] [6] [7]

FRP/RxJS
const $input = $('#input');
const $results = $('#results');
/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent($input, 'keyup')
.pluck('target', 'value')
.filter(text => text.length > 2 );
/* Now debounce the input for 500ms */
var debounced = keyups.debounce(500 /* ms */);
/* Now get only distinct values, so we eliminate the
arrows and other control characters */
var distinct = debounced.distinctUntilChanged();
[4]

Actormodel
(function () {
var spawn = WebActors.spawn;
var receive = WebActors.receive;
var send = WebActors.send, ANY = WebActors.ANY;
function aCallback() {
receive(ANY, function (message) {
alert(message);
});
}
actor = spawn(aCallback); // create an actor
send(actor, "a message"); // send it a message
})();
[2] [3]

CSP
Communicatingsequentialprocesses

CSP
‣ initially isaformallanguagefordescribingpatterns
of interactionin concurrentsystems
‣ firstdescribedina1978paperby TonyHoare
‣ influentialinthe designof the occam,Go,Limbo
‣ core.asyncin clojure
‣ js-cspforJS

Key points
‣ CSPcreatedforcommunicatingbetweendifferent
componentsandsubsystems
‣ CSPsolveproblemof coordinatinganythingasynchronous
‣ CSPalongsideotherssolveproblemof easy-to-
understandcode

import {chan, take, CLOSED, timeout, put} from "js-csp";
var ch = chan();
go(function*() {
var val;
while((val = yield take(ch)) !== CLOSED) {
console.log(val);
}
});
go(function*() {
yield put(ch, 1);
yield take(timeout(1000));
yield put(ch, 2);
ch.close();
});
[8]

export class Suggest extends React.Component {
constructor(props) {
super(props);
this.state = {active: -1, suggests: props.suggests}}
componentWillReceiveProps(nextProps) {
switch(nextProps.code) {
case 38:
this.setState({active: Math.max(-1, this.state.active - 1)});
break;
case 40:
this.setState({
active: Math.min(this.props.suggests.length - 1, this.state.active + 1)});
break;
case 13:
search(this.props.suggests[this.state.active]);
this.setState({suggests: []});
break;
default:
this.setState({suggests: nextProps.suggests});
}
}
render() {
return (<ul className="dropdown dropdown-menu">
{this.state.suggests.map((e, n) =>
<li key={e} className={...}><a href="#">{e}</a></li>)}
</ul>);
}}

Toolstowrite in syncstyle?
‣ Promises,Promiseswith generators
‣ Generators
‣ Async/wait
‣ Usingjs-csp(withgenerators)

Tools
‣ Events
‣ XMLHttpRequest/HTTP
‣ WebSockets
‣ Timers
‣ Webworkers
Runtimeforlow-levelasync operations:getURL

import {buffers, go, chan, putAsync, operations} from "js-csp";
export function listen(el, type, options={}) {
/**
* Translate events into CSP channel untile channel is not closed.
*/
var {channel, prevent} = options;
var ch = channel || chan();
var listener = (e) => {
if (ch.closed === true) el.removeEventListener(type, listener);
else putAsync(ch, e);
if (prevent === true) e.preventDefault();
}
el.addEventListener(type, listener);
return ch;
}

import {go, take, timeout, CLOSED, close, chan, buffers} from "js-csp";
import {listen} from "./runtime.js";
var mousemove = listen(document, "mousemove", true, {channel: chan(buffers.
dropping(1))});
var target = document.getElementById("coords");
go(function * () {
var coords;
while((coords = yield take(mousemove)) !== CLOSED) {
target.innerHTML = `X=${coords.clientX} Y=${coords.clientY}`;
}
});
go(function * () {
yield timeout(3000);
yield mousemove.close();
target.innerHTML = 'interrupted.';
});

import {buffers, go, chan, putAsync, take,} from "js-csp";
export function json(options) {
var ch = chan();
go(function * () {
var value = yield take(request(options));
if(!(value instanceof Error)) {
value = JSON.parse(value);
} else {
console.error("Can't get " + options.url, value);
}
putAsync(ch, value);
});
return ch;
}

Features
‣ Channelbuffering:fixedsize,sliding,dropping
‣ pollvalues:takingimmediately
‣ alts:waitforvalueor executesecondoperation
Commonprocesses communication features

Extra features
‣ Reducechannelvalues
‣ splitvaluesof channels
‣ merge channels
‣ mult– supply valuesintotwochannels
‣ Pub/Submode
‣ Filteringwithpredicates and/ortransducers

References
1.No,YouarenotDumb!Programmersdospendalotof timeUnderstandingCode…
http://blog.architexa.com/2010/05/no-you-are-not-dumb-programmers-do-spend-a-lot-of-time-understanding-code/
2.AnActormodelexamplewithAkka.NET
http://blog.geist.no/an-actor-model-example-with-akka-net/
3.WebActors
https://github.com/mental/webactors
4.TheReactiveExtensions forJavaScript (RxJS)
https://github.com/Reactive-Extensions/RxJS
5.ES7asyncfunctions-astepin the wrongdirection
https://spion.github.io/posts/es7-async-await-step-in-the-wrong-direction.html
6.Why coroutineswon’tworkon theweb
http://calculist.org/blog/2011/12/14/why-coroutines-wont-work-on-the-web/
7.ImplementationStrategiesfor First-ClassContinuations*
http://citeseerx.ist.psu.edu/viewdoc/download;jsessionid=3668F1FC41AF1C1880B3062100057381?doi=10.1.1.70.9076&rep=rep1&type=pdf
8.Taming theAsynchronous Beast withCSPChannelsinJavaScript
http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript

Fighting async JavaScript (CSP)

More Related Content

What's hot (20)

Similar to Fighting async JavaScript (CSP) (20)

More from Max Klymyshyn (20)

Recently uploaded (20)

Fighting async JavaScript (CSP)