深入浅出Jscex

• / / Jeffrey Zhao /

•
• http://blog.zhaojie.me/

• @

• F#, JavaScript, Scala, C#, Python, .NET, Mono...
• Java

Jscex

• JavaScript Computation EXpression
• JavaScript
• F# JavaScript
• “ ”
• JavaScript JavaScript

Jscex

•
• Jscex JavaScript

•
• Jscex /

• JavaScript /
• ECMAScript 3

var compareAsync = eval(Jscex.compile("async", function (x, y) {
$await(Jscex.Async.sleep(10)); // each "compare" takes 10 ms.
return x - y;
}));

var swapAsync = eval(Jscex.compile("async", function (a, i, j) {
var t = a[i]; a[i] = a[j]; a[j] = t; // swap
repaint(a); // repaint after each swap
$await(Jscex.Async.sleep(20)); // each "swap" takes 20 ms.
}));

if (r > 0) $await(swapAsync(array, y, y + 1));
}
}
}));

•
•
•
•
•
•

Jscex

//
var somethingAsync = eval(Jscex.compile("async",
function (...) {
//
}
));

function () {
var res = $await(<async work>);
}

function () {
var res = $await(<async work>);
}

HTTP
UI

Web Service

var f = eval(Jscex.compile("async", function () {
var img = $await(readAsync("http://..."));
console.log("loaded!");
$await(writeAsync("./files/..."));
console.log("saved!");
}));

…
var f = eval('(function () {
var _b_ = Jscex.builders["async"];
return _b_.Start(this,
_b_.Delay(function () {
_b_.Bind(readAsync(...), function (img) {
return _b_.Bind(writeAsync(...), function () {
return _b_.Normal();
});
});
})
);
})');

…
var f = (function () {
_b_.Bind(readAsync(...), function (img) {
return _b_.Bind(writeAsync(...), function () {
});
});
})
);
});

Express
var app = express.createServer();

app.get('/', function (req, res) {
/**
*
*
* 1.
* 2.
*
* 3. res
*
* “ ”
**/
});

app.listen(3000);

Jscex
app.getAsync('/', eval(Jscex.compile("async", function (req, res) {

var keys = $await(db.getKeysAsync(...));

var results = [];
for (var i = 0; i < keys.length; i++) {
var r = $await(cache.getAsync(keys[i]));
if (!r) {
r = $await(db.getItemAsync(keys[i]));
}

results.push(r);
}

res.send(generateList(results));
})));

I/O

• I/O
• Web
•
•
• I/O
•

•
•
• $await(Jscex.Async.parallel(taskA, taskB))

• $await(taskA.continueWith(taskB))

• $await
•
•
•
• taskA.start(); $await(taskB); $await(taskA);

//
var i = 1;
conn.onAsync("data", eval(Jscex.compile("async", function () {
var id = i++;

$await(step1); console.log("step 1 - request " + id);

/**
*
* step 1 - request 1
**/
})));

... the principle we go by is, don't expect to see
a particular concurrency model put into C#
because there're many different concurrency
model ... it's more about ﬁnding things are
common to all kinds of concurrency ...

- Anders Hejlsberg

Erlang
var i = 0;
var agent = Agent.start(eval(Jscex.compile("async", function (mailbox) {
while (true) {
var id = i++;

var msg = $await(mailbox.receive());
}
})));

conn.on("data", function (data) {
// mailbox
agent.send(data);
});

Jscex

• JavaScript
•
•
•
• “ ”

• JavaScript
• while / for / for...in / do
• if / switch
• try...catch...ﬁnally
• return / break / continue / throw

•
• with
• break continue
• switch break

•

//
var somethingAsync = eval(Jscex.compile("async",
function (...) {
//
}
));

eval
Sample = {
//
compile: function (func) {
return "(" + func.toString() + ")";
},

// eval
compileEx: function (func) {
return eval("(" + func.toString() + ")");
}
}

eval
(function () {
var a = 1;

// f1
var f1 = eval(Sample.compile(function () {
alert(a);
}));
f1(); // “1”

// f2 Sample.compileEx
var f2 = Sample.compileEx(function () {
alert(a);
});
f2(); // “a ”
})();

• JavaScript

• “bind” $await
•
• “ ”
• “ ”

• JavaScript

•
•
• JIT
• JavaScript

“ ”
MyClass.prototype = {
get: function (n) {
...
},

calculateAsync: eval(Jscex.compile("async", function (n) {
var numbers = [];
for (var i = 0; i < n; i++)
numbers.push(i);

this.result = $await(make(numbers));
}))
}

“ ”
MyClass.prototype = {
get: function (n) {
...
}, Jscex
calculateAsync: eval(Jscex.compile("async", function (n) {
var numbers = [];
for (var i = 0; i < n; i++)
numbers.push(i);

this.result = $await(make(numbers));
}))
} Jscex

Jscex vs.
•
•
• Virtual Panel: How to Survive Asynchronous
Programming in JavaScript

•
• StratiﬁedJS
• Narrative JavaScript
• Streamline Jscex

Jscex vs.
•
•
•
•
• Jscex
• JavaScript
•
•

Jscex vs.
•
•
•
•
• Jscex
• JavaScript
• JavaScript
• JavaScript

Streamline

• Jscex
• JavaScript
• JIT
•
• Jscex
•
• Yield – Resume vs. Asynchronous Callbacks – An
Equivalence

Streamline (input)

var bubbleSortAsync = function (array, _) {
if (compareAsync(array[y], array[y + 1], _) > 0)
swapAsync(array, y, y + 1, _);
}
}
}

Streamline (compiled)
var bubbleSortAsync = function __1(array, _) {
if (!_) {
return __future(__1, arguments, 1);
} if ((y < (array.length - x))) {
; return compareAsync(array[y], array[(y + 1)], __cb(_, function(__0, r) {
var __then = _; if ((r > 0)) {
var x = 0; return swapAsync(array, y, (y + 1), __cb(_, __then));
var __4 = false; }
return function(__break) { ;
var __loop = __nt(_, function() { return __then();
var __then = __loop; }));
if (__4) { }
x++; else {
} return __break();
else { }
__4 = true; ;
} });
; return __loop();
if ((x < array.length)) { }(__then);
var y = 0; }
var __3 = false; else {
return function(__break) { return __break();
var __loop = __nt(_, function() { }
var __then = __loop; ;
if (__3) { });
y++; return __loop();
} }(__then);
else { };
__3 = true;
}
;

http://sage.github.com/streamlinejs/examples/streamlineMe.html

Jecex (input)

if (r > 0)
$await(swapAsync(array, y, y + 1));
}
}
}));

Jecex (compiled)
var bubbleSortAsync = (function (array) {
var x = 0;
return _b_.Loop(
function () { return x < array.length; },
function () { x++; },
var y = 0;
return _b_.Loop(
function () { return y < (array.length - x); },
function () { y++; }
return _b_.Bind(compareAsync(array[y], array[y + 1]), function (r) {
if (r > 0) {
return _b_.Bind(swapAsync(array, y, y + 1), function () {
});
} else {
}
});
}),
false
);
}),
false
);
})
);
})

Jecex (compiled)
var bubbleSortAsync = (function (array) {
outer loop
var x = 0;
return _b_.Loop(
function () { return x < array.length; },
function () { x++; },
var y = 0;
return _b_.Loop(

inner loop function () { return y < (array.length - x); },
function () { y++; }
return _b_.Bind(compareAsync(array[y], array[y + 1]), function (r) {
if (r > 0) {
return _b_.Bind(swapAsync(array, y, y + 1), function () {

$await(compareAsync(...)) return _b_.Normal();
});
} else { $await(swapAsync(...))
}
});
}),
false
);
}),
false
);
})
);
})

Jscex
•
•
• “debugger”

• JavaScript
• Start, Delay, Combine
• Loop, Try
• Normal, Return, Break, Continue, Throw
• Bind

•
• JIT
• AOT

•
•
• Python C#
JavaScript 1.7
• …

AOT
// AOT
Agent.start(eval(Jscex.compile("async", function (mailbox) {
...
})));

// AOT
//
// gzip 3kb
Agent.start((function (mailbox) {
...
);
}));

Jscex

•
• “ ”

•

//
var fib = eval(Jscex.compile("seq", function () {
var i = 0, j = 1;
while (true) {
$yield(i); // the bind operation

var t = i;
i = j;
j += t;
}
}));

var iter = fib().skip(10).take(10);
while (iter.moveNext()) {
console.log(iter.current);
}

… Maybe Monad
var maybeFunc = function () {
var maybeA = getA();
if (maybeA == Maybe.None) return Maybe.None;

var maybeB = getB();
if (maybeB == Maybe.None) return Maybe.None;

return maybeA.value + maybeB.value;
}

//
var maybeFunc = eval(Jscex.compile("maybe", function () {
var a = $try(getA());
var b = $try(getB());
return a + b;
}));

• “ ” “ ”
•
•
•
• Jscex /

for Loop
function (urls) {
for (var i = 0; i < urls.length; i++) {
$await(requestAsync(urls[i]));
}
}

for Loop
function (urls) {
$await(requestAsync(urls[i]));
}
} function (urls) {
var i = 0;
return _b_.Loop(
function () { return i < urls.length; },
function () { i++; },
return _b_.Bind(requestAsync(urls[i]), function () {
});
}),
false
);
})
);
}

for
function (urls) {
var requests = [];

requests.push(requestAsync(urls[i]));
}

$await(Jscex.Async.parallel(requests));
}

for
function (urls) {
var requests = [];

}
function (urls) {
$await(Jscex.Async.parallel(requests));
} return _b_.Start(this,

var requests = [];
}

return _b_.Bind(Jscex.Async.parallel(requests), function () {
});
})
);
}

• BSD

•
• https://github.com/JeffreyZhao/jscex
• http://www.sndacode.com/projects/jscex

深入浅出Jscex

Related slideshows

More Related Content

深入浅出Jscex