Communicating Sequential Processes (CSP) in JavaScript

Communicating
SequentialProcesses
(CSP)inJavaScript
MaxKlymyshyn
CTOatCartFresh

CartFresh
‣ Grocery Delivery startup
‣ WorkinginUkraineas ZAKAZ.UA (Kiev,
Dnepropetrovsk,Kharkiv) andas
CartFresh(Boston,US)
‣ React.js onfront-end
‣ Python onback-end

‣ 12+yearsof experience: 7withPython,6 withJS
‣ Waspartof oDesk(Upwork),Helios,42cc
‣ Co-organizerof PyConUkraine,KyivJS
‣ CTOat CartFresh

AsynchronousI/O
asynchronous I/OleadstocallbackAPI’s,
which leadtonestedlambdas,
whichleadto…thepyramidof doom:

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

Communicating Sequential Processes (CSP) in JavaScript

‣ IBM1989: 50%of the effort inaccomplishing atask forthe
programmer istowards understanding the system
‣ BellLabs1992:60%-80%of their time understanding
code,20% as the developersgainexperience with current
codebase
‣ NationalResearchCouncil1997(Canada): over25% of
theirtimeeithersearchingfororlooking atcode
‣ Microsoft2006: 50%
‣ Peter Hallam2006:70%during personal experiment
‣ Microsoft2007:65%(survey)

CSP
Communicatingsequentialprocesses

CSP
‣ initiallyisaformallanguage for
describing patterns of interactionin
concurrentsystems
‣ firstdescribedina1978paperby Tony
Hoare
‣ influentialin thedesignof the occam,
Go,Limbo
‣ core.async inclojure
‣ js-cspforJS

Keypoints
‣ CSPcreatedforcommunicating between
differentcomponents andsubsystems
‣ CSPsolveproblemof coordinating anything
asynchronous
‣ CSPalongsideotherssolveproblemof easy-
to-understandcode

CHANNEL
put
take
CoreAPI
take timeout

‣ blockingsemantic
‣ duplex
‣ indirect processcommunication
‣ easy-to-implementremotechannels
ChannelProperties

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(2000));
yield put(ch, 2);
ch.close();
});

merge
Read frommultiple channels
CHANNEL1
CHANNEL2
put put

Read frommultiple channels
var chan1 = chan(),
chan2 = chan(),
merged = operations.merge([chan1, chan2]);
go(function*(){
var value = yield merged;
while (value !== CLOSED) {
console.log("Got ", value);
value = yield merged;
};
});

put
CHANNEL1
CHANNEL2take take
Supplyvalueintomultiplechannels

Supplyvalueintomultiplechannels
var src = chan(),
mult = operations.mult(src),
chan1 = chan(),
chan2 = chan(0);
operations.mult.tap(mult, chan1);
operations.mult.tap(mult, chan2);
go(function * () {
yield put(src, 1);
});
go(function * () {
var value = yield chan1;
while (value !== CLOSED) {
console.log("Got ", value, " in `chan1`");
value = yield chan1;
}
});

put
Reducechannel values
CHANNEL1
CHANNEL2
REDUCE take
take

Reducechannel values
var ch = chan(),
append = (a, b) => a + " " + b;
var reduceCh = operations.reduce(append, "Hello", ch);
go(function * () {
yield put(ch, "CSP");
yield put(ch, "World");
console.log(yield reduceCh);
});
ch.close();

put
Buffering
CHANNEL 1
BUFFER
take

Features
‣ Channel buffering:fixedsize,sliding,
dropping
‣ poll/ offer values:taking/putting
immediately
‣ alts:getvalueorexecutesecondoperation
Commonprocesses communication features

‣ Mixing channels withmute/unmute
‣ Pub/Sub mode
‣ Filteringwithpredicatesand/ortransducers

CHANNEL
PROCESS 2
PROCESS 1
put(1)
take
Communicationexample
FLOW
take
put(2)

import {go, chan, take, timeout, put} from "js-csp";
var ch = chan();
go(function*() {
log(1, "line 1");
log(1, " line 2");
log(1, " <- take");
log(1, " took: process 2: ", yield take(ch));
log(1, " line 5");
log(1, " <- take");
log(1, " line 8");
});
go(function*() {
log(2, "line 1");
log(2, " -> put");
yield put(ch, 1);
log(2, " line 4");
log(2, " -> put");
yield put(ch, 2);
log(2, " line 7");
});
sync point

p( 1 ): line 1
p( 1 ): line 2
p( 1 ): <- take
p( 2 ): line 1
p( 2 ): -> put
p( 2 ): line 4
p( 2 ): -> put
p( 1 ): took: process 2: val: 1
p( 1 ): line 5
p( 1 ): <- take
p( 2 ): line 7
p( 1 ): line 8

p( 1 ): line 1
p( 1 ): line 2
p( 1 ): <- take
p( 2 ): line 1
p( 2 ): -> put
p( 2 ): line 4
p( 2 ): -> put
p( 1 ): line 5
p( 1 ): <- take
p( 2 ): line 7
p( 1 ): line 8
what the fuck?

p( 1 ): line 1
p( 1 ): line 2
p( 1 ): <- take
p( 2 ): line 1
p( 2 ): -> offer
p( 1 ): line 5
p( 1 ): <- take
p( 2 ): line 4
p( 2 ): -> offer
p( 2 ): line 7
p( 1 ): line 8

import {go, chan, put, buffers, offer} from "js-csp";
var ch = chan();
go(function*() {
log(1, "line 1");
log(1, " line 2");
log(1, " <- take");
log(1, " line 5");
log(1, " <- take");
log(1, " line 8");
});
go(function*() {
log(2, "line 1");
log(2, " -> offer");
yield offer(ch, 1);
yield timeout(0);
log(2, " line 4");
log(2, " -> offer");
yield offer(ch, 2);
log(2, " line 7");
});
sync point

CHANNEL
PROCESS 2
PROCESS 1
put
take
wait
put
take
wait
take
put
Channel
FLOW

CHANNEL
PROCESS 2
PROCESS 1
put
put
FLOW
PROCESS 3
take
take
take
put
take
put

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>);
}}

Toolstowritein syncstyle?
‣ Promises,Promises withgenerators
‣ Generators
‣ Async/await
‣ Using actors,RxJS,js-csp

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

import {buffers, go, chan, putAsync, operations} from "js-csp";
export function listen(el, type, options={}) {
/**
* Translate events into CSP channel until 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;
}

isoroutes
Pure,isomorphic andframework-agnostic
js-csp—based router

Purerouter
‣ Shouldbepure
‣ Statebasedonlyon input
‣ Framework-agnostic
‣ No promises,sync-stylecode

Example
import {render, router, navigate} from "isoroutes";
exports var routes = router([
["/", render.react(Home)],
["/about/", render.react(About)],
["/contacts/", render.react(Contact)],
["/articles/:id.html", render.react(Article)],
["/dashboard/", render.react(Dashboard)],
["/dashboard/signin/", render.react(Auth)],
["/dashboard/add/", render.react(ArticleForm)],
["/dashboard/:menu/", render.react(Dashboard)],
]);

Gatherstate
export class Home extends React.Component {
// state will be executed within CSP `go` routine
static state(state, channel, n=0) {
// we could use CSP channels here
return go(function * () {
yield put(channel, [
"talks",
yield take(json({url: "/api/upcoming_talks.json"}))
]);
channel.close()
})
}
render() {
// ...
}
}

Communicating Sequential Processes (CSP) in JavaScript

Recommended

More Related Content

What's hot (7)

Viewers also liked (15)

Similar to Communicating Sequential Processes (CSP) in JavaScript (20)

More from Max Klymyshyn (20)

Recently uploaded (20)

Communicating Sequential Processes (CSP) in JavaScript