JavaScript“      ”       - 2011.7
•       /       / Jeffrey Zhao /••         http://blog.zhaojie.me/•         @• F#, JavaScript, Scala, C#, Python, .NET, Mo...
// C#List<string> keywords = ...;var result = keywords    .GroupBy(k => k[0].ToUpper())    .ToDictionary(        g => g.Ke...
# Rubykeywords = ...result = keywords     .group_by { |k| k[0,1].upcase }     .each { |key, value| value.sort! }// JavaScr...
JavaList<String> keywords = ...;Map<Character, List<String>> result = new HashMap<...>();for (String k: keywords) {    cha...
*Map<Character, List<String>> result = keyword  .groupBy(    new F<String, Character> {       public Character f(String s)...
•••
Java••••
••   Lambda••
JavaScript••• prototype• this• apply call   arguments constructor  callee
JavaScript Ninja
1
var fib = function () {    var state = 0, last0, last1;    return {        moveNext: function () {             if (state =...
JavaScript 1.7*function fibonacci() {    yield 0;    yield 1;    var a = 0, current = 1;    while (true) {                ...
2
var compare = function (x, y) {    return x - y;}var swap = function (a, i, j) {    var t = a[i]; a[i] = a[j]; a[j] = t;}v...
var compare = function (x, y, callback) {         var innerLoop = function (array, x, y, callback) {    setTimeout(10, fun...
var compare = function (x, y, callback) {         var innerLoop = function (array, x, y, callback) {    setTimeout(10, fun...
*•   JavaScript          DSL•                toString•     eval                              *   JavaScript ECMAScript 3
toString
var f = function () {          ...      }var f = eval(compile(function () {     ...}));
var compile = function (f) {    //    var code = f.toString();    //    var ast = parse(code);    //    return generateCod...
•                JS   • eval           “                            ”•                     ••                         Java...
eval• eval• eval   compile• •       eval   compile • •         ECMAScript 5    Strict Mode
Jscex
Jscex• JavaScript Computation EXpression• JavaScript• F#                      JavaScript •     “            ” •     JavaSc...
Jscex•    •   Jscex              JavaScript•    •   Jscex                           /• JavaScript           /    •        ...
•    •    ••    •    •
var compareAsync = eval(Jscex.compile("async", function (x, y) {     $await(Jscex.Async.sleep(10)); // each "compare" take...
var compareAsync = eval(Jscex.compile("async", function (x, y) {     $await(Jscex.Async.sleep(10)); // each "compare" take...
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!"...
…var f = eval((function () {    var _b_ = Jscex.builders["async"];    return _b_.Start(this,        _b_.Delay(function () ...
…var f = (function () {    var _b_ = Jscex.builders["async"];    return _b_.Start(this,        _b_.Delay(function () {    ...
Expressvar app = express.createServer();app.get(/, function (req, res) {    /**     *     *     * 1.     * 2.     *     * ...
Jscexapp.getAsync(/, eval(Jscex.compile("async", function (req, res) {    var keys = $await(db.getKeysAsync(...));    var ...
Jscex vs.••    •   Virtual Panel: How to Survive Asynchronous        Programming in JavaScript•    •   StratifiedJS    •   ...
Jscex vs.•    •    •    •• Jscex    •     JavaScript    •    •
Jscex vs.•    •    •    •• Jscex    •       JavaScript    •       JavaScript    •       JavaScript
Streamline•                Jscex    •       JavaScript    •                    JIT    ••       Jscex    •    •   Yield – R...
Streamline (input)var bubbleSortAsync = function (array, _) {    for (var x = 0; x < array.length; x++) {        for (var ...
Streamline (compiled)var bubbleSortAsync = function __1(array, _) {  if (!_) {    return __future(__1, arguments, 1);  }  ...
Jecex (input)var bubbleSortAsync = eval(Jscex.compile("async", function (array) {     for (var x = 0; x < array.length; x+...
Jecex (compiled)var bubbleSortAsync = (function (array) {    var _b_ = Jscex.builders["async"];    return _b_.Start(this, ...
Jecex (compiled)            var bubbleSortAsync = (function (array) {                var _b_ = Jscex.builders["async"];   ...
Jscex•    •    •                   “debugger”•       JavaScript    •   Start, Delay, Combine    •   Loop, Try    •   Norma...
Node.js
... the principle we go by is, dont expect to seea particular concurrency model put into C#because therere many different ...
•    •   JIT    •   AOT•    •                      F#   Scala Python        Twisted C# vNext    •                         ...
Jscex••               “   ”•     “     ”•
//var fib = eval(Jscex.compile("seq", function () {    $yield(0);    $yield(1);       var a = 0, current = 1;       while ...
fib()    .filter(function (n) { return n % 2 == 0; })    .skip(2)    .take(5)    .zip(infinite(1))    .map(function (a) { ...
var filter = eval(Jscex.compile("seq", function (iter, predicate) {     while (iter.moveNext()) {         if (predicate(it...
Maybe Monadvar maybeFunc = function () {    var maybeA = getA();    if (maybeA != Maybe.None) {        var maybeB = getB()...
•       JavaScirpt DSL    •                 +    •   JavaScript                “   ”•                         Jscex    •  ...
Q &A
Javascript Uncommon Programming
Javascript Uncommon Programming
Javascript Uncommon Programming
Javascript Uncommon Programming
Javascript Uncommon Programming
Javascript Uncommon Programming
Javascript Uncommon Programming
Upcoming SlideShare
Loading in...5
×

Javascript Uncommon Programming

3,156

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,156
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Javascript Uncommon Programming

  1. 1. JavaScript“ ” - 2011.7
  2. 2. • / / Jeffrey Zhao /•• http://blog.zhaojie.me/• @• F#, JavaScript, Scala, C#, Python, .NET, Mono...• Java
  3. 3. // C#List<string> keywords = ...;var result = keywords .GroupBy(k => k[0].ToUpper()) .ToDictionary( g => g.Key, g => g.OrderBy(k => k).ToList());// F#let keywords = ...let result = keywords |> Seq.groupBy (fun k -> k.[0].ToUpper()) |> Seq.map (fun (k, v) -> (k, v |> Seq.sort)) |> Map.ofSeq
  4. 4. # Rubykeywords = ...result = keywords .group_by { |k| k[0,1].upcase } .each { |key, value| value.sort! }// JavaScriptvar keywords = ...;var result = keywords .groupBy(function (k) { return k[0].toUpperCase(); }) .each(function (key, value) { value.sort(); });
  5. 5. JavaList<String> keywords = ...;Map<Character, List<String>> result = new HashMap<...>();for (String k: keywords) { char firstChar = k.charAt(0); if (!result.containsKey(firstChar)) { result.put(firstChar, new ArrayList<String>()); } result.get(firstChar).add(k);}for (List<String> list: result.values()) { Collections.sort(list);}
  6. 6. *Map<Character, List<String>> result = keyword .groupBy( new F<String, Character> { public Character f(String s) { return s.charAt(0); } }) .toMap( new F<Grouping<Character, String, Character> { public Charactor f(Grouping<Char, String> g) { return g.getKey(); } }, new F<Grouping<Character, String>, List<String>> { public List<String> f(Grouping<Character, String> g) { return g .orderBy( new F<String, String> { public String f(String s) { return s; } }) .toList(); } }); * C# API
  7. 7. •••
  8. 8. Java••••
  9. 9. •• Lambda••
  10. 10. JavaScript••• prototype• this• apply call arguments constructor callee
  11. 11. JavaScript Ninja
  12. 12. 1
  13. 13. var fib = function () { var state = 0, last0, last1; return { moveNext: function () { if (state == 0) { // this.current = 0; state = 1; } else if (state == 1) { // this.current = 1; var iter = fib(); last1 = 0; while (iter.moveNext()) { state = 2; print(iter.current); } else { } last0 = last1; last1 = this.current; this.current = last0 + last1; } return true; } }}
  14. 14. JavaScript 1.7*function fibonacci() { yield 0; yield 1; var a = 0, current = 1; while (true) { for (var i in fibonacci()) { var b = a; print(i); a = current; } current = a + b; yield current; }} * Firefox 2.0+ only: https://developer.mozilla.org/en/JavaScript/Guide/Iterators_and_Generators
  15. 15. 2
  16. 16. var compare = function (x, y) { return x - y;}var swap = function (a, i, j) { var t = a[i]; a[i] = a[j]; a[j] = t;}var bubbleSort = function (array) { for (var x = 0; x < array.length; x++) { for (var y = 0; y < array.length - x; y++) { if (compare(array[y], array[y + 1]) > 0) { swap(array, y, y + 1); } } }}
  17. 17. var compare = function (x, y, callback) { var innerLoop = function (array, x, y, callback) { setTimeout(10, function () { if (y < array.length - x) { callback(x - y); compare(array[y], array[y + 1], function (r) { }); if (r > 0) {} swap(array, y, y + 1, function () { innerLoop(array, x, y + 1, callback);var swap = function (a, i, j, callback) { }); var t = a[i]; a[i] = a[j]; a[j] = t; } else { repaint(a); innerLoop(array, x, y + 1, callback); } setTimeout(20, callback); });} } else { callback();var outerLoop = function (array, x, callback) { } if (x < array) { } innerLoop(array, x, 0, function () { outerLoop(array, x + 1, callback); outerLoop(array, 0, function () { }); console.log("done!"); } else { }); callback(); }}
  18. 18. var compare = function (x, y, callback) { var innerLoop = function (array, x, y, callback) { setTimeout(10, function () { if (y < array.length - x) { callback(x - y); compare(array[y], array[y + 1], function (r) { }); if (r > 0) {} swap(array, y, y + 1, function () { innerLoop(array, x, y + 1, callback);var swap = function (a, i, j, callback) { }); var t = a[i]; a[i] = a[j]; a[j] = t; } else { D repaint(a); innerLoop(array, x, y + 1, callback); } M setTimeout(20, callback); });} } else { T callback();var outerLoop = function (array, x, callback) { } if (x < array) { } innerLoop(array, x, 0, function () { outerLoop(array, x + 1, callback); outerLoop(array, 0, function () { }); console.log("done!"); } else { }); callback(); }}
  19. 19. *• JavaScript DSL• toString• eval * JavaScript ECMAScript 3
  20. 20. toString
  21. 21. var f = function () { ... }var f = eval(compile(function () { ...}));
  22. 22. var compile = function (f) { // var code = f.toString(); // var ast = parse(code); // return generateCode(ast);}
  23. 23. • JS • eval “ ”• •• JavaScript JavaScript
  24. 24. eval• eval• eval compile• • eval compile • • ECMAScript 5 Strict Mode
  25. 25. Jscex
  26. 26. Jscex• JavaScript Computation EXpression• JavaScript• F# JavaScript • “ ” • JavaScript JavaScript
  27. 27. Jscex• • Jscex JavaScript• • Jscex /• JavaScript / • ECMAScript 3
  28. 28. • • •• • •
  29. 29. 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.}));var bubbleSortAsync = eval(Jscex.compile("async", function (array) { for (var x = 0; x < array.length; x++) { for (var y = 0; y < array.length - x; y++) { var r = $await(compareAsync(array[y], array[y + 1])); if (r > 0) $await(swapAsync(array, y, y + 1)); } }})); http://files.zhaojie.me/jscex/samples/async/sorting-animations.html?bubble
  30. 30. 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.}));var bubbleSortAsync = eval(Jscex.compile("async", function (array) { for (var x = 0; x < array.length; x++) { for (var y = 0; y < array.length - x; y++) { var r = $await(compareAsync(array[y], array[y + 1])); if (r > 0) $await(swapAsync(array, y, y + 1)); } }})); http://files.zhaojie.me/jscex/samples/async/sorting-animations.html?bubble
  31. 31. Jscex//var somethingAsync = eval(Jscex.compile("async", function (...) { // }));
  32. 32. function () { var res = $await(<async work>);}
  33. 33. function () { var res = $await(<async work>);} HTTP UI Web Service
  34. 34. var f = eval(Jscex.compile("async", function () { var img = $await(readAsync("http://...")); console.log("loaded!"); $await(writeAsync("./files/...")); console.log("saved!");}));
  35. 35. …var f = eval((function () { var _b_ = Jscex.builders["async"]; return _b_.Start(this, _b_.Delay(function () { _b_.Bind(readAsync(...), function (img) { console.log("loaded!"); return _b_.Bind(writeAsync(...), function () { console.log("saved!"); return _b_.Normal(); }); }); }) );}));
  36. 36. …var f = (function () { var _b_ = Jscex.builders["async"]; return _b_.Start(this, _b_.Delay(function () { _b_.Bind(readAsync(...), function (img) { console.log("loaded!"); return _b_.Bind(writeAsync(...), function () { console.log("saved!"); return _b_.Normal(); }); }); }) );});
  37. 37. Expressvar app = express.createServer();app.get(/, function (req, res) { /** * * * 1. * 2. * * 3. res * * “ ” **/});app.listen(3000);
  38. 38. Jscexapp.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));})));
  39. 39. Jscex vs.•• • Virtual Panel: How to Survive Asynchronous Programming in JavaScript• • StratifiedJS • Narrative JavaScript • Streamline Jscex
  40. 40. Jscex vs.• • • •• Jscex • JavaScript • •
  41. 41. Jscex vs.• • • •• Jscex • JavaScript • JavaScript • JavaScript
  42. 42. Streamline• Jscex • JavaScript • JIT •• Jscex • • Yield – Resume vs. Asynchronous Callbacks – An Equivalence
  43. 43. Streamline (input)var bubbleSortAsync = function (array, _) { for (var x = 0; x < array.length; x++) { for (var y = 0; y < array.length - x; y++) { if (compareAsync(array[y], array[y + 1], _) > 0) swapAsync(array, y, y + 1, _); } }}
  44. 44. 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
  45. 45. Jecex (input)var bubbleSortAsync = eval(Jscex.compile("async", function (array) { for (var x = 0; x < array.length; x++) { for (var y = 0; y < array.length - x; y++) { var r = $await(compareAsync(array[y], array[y + 1])); if (r > 0) $await(swapAsync(array, y, y + 1)); } }}));
  46. 46. Jecex (compiled)var bubbleSortAsync = (function (array) { var _b_ = Jscex.builders["async"]; return _b_.Start(this, _b_.Delay(function () { var x = 0; return _b_.Loop( function () { return x < array.length; }, function () { x++; }, _b_.Delay(function () { var y = 0; return _b_.Loop( function () { return y < (array.length - x); }, function () { y++; } _b_.Delay(function () { return _b_.Bind(compareAsync(array[y], array[y + 1]), function (r) { if (r > 0) { return _b_.Bind(swapAsync(array, y, y + 1), function () { return _b_.Normal(); }); } else { return _b_.Normal(); } }); }), false ); }), false ); }) );})
  47. 47. Jecex (compiled) var bubbleSortAsync = (function (array) { var _b_ = Jscex.builders["async"]; return _b_.Start(this, _b_.Delay(function () { outer loop var x = 0; return _b_.Loop( function () { return x < array.length; }, function () { x++; }, _b_.Delay(function () { var y = 0; return _b_.Loop( inner loop function () { return y < (array.length - x); }, function () { y++; } _b_.Delay(function () { 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(...)) return _b_.Normal(); } }); }), false ); }), false ); }) ); })
  48. 48. Jscex• • • “debugger”• JavaScript • Start, Delay, Combine • Loop, Try • Normal, Return, Break, Continue, Throw • Bind
  49. 49. Node.js
  50. 50. ... the principle we go by is, dont expect to seea particular concurrency model put into C#because therere many different concurrencymodel ... its more about finding things arecommon to all kinds of concurrency ... - Anders Hejlsberg
  51. 51. • • JIT • AOT• • F# Scala Python Twisted C# vNext • Python C# JavaScript 1.7 • …
  52. 52. Jscex•• “ ”• “ ”•
  53. 53. //var fib = eval(Jscex.compile("seq", function () { $yield(0); $yield(1); var a = 0, current = 1; while (true) { var b = a; a = current; current = a + b; $yield(current); }})); https://github.com/JeffreyZhao/jscex/blob/master/samples/seq/fib.html
  54. 54. fib() .filter(function (n) { return n % 2 == 0; }) .skip(2) .take(5) .zip(infinite(1)) .map(function (a) { return a[1] + ": " + a[0]; }) .each(print); https://github.com/JeffreyZhao/jscex/blob/master/samples/seq/fib.html
  55. 55. var filter = eval(Jscex.compile("seq", function (iter, predicate) { while (iter.moveNext()) { if (predicate(iter.current)) { $yield(iter.current); } }}));var map = eval(Jscex.compile("seq", function (iter, mapper) { while (iter.moveNext()) { $yield(mapper(iter.current)); }}));var zip = eval(Jscex.compile("seq", function (iter1, iter2) { while (iter1.moveNext() && iter2.moveNext()) { $yield([iter1.current, iter2.current]); }})); https://github.com/JeffreyZhao/jscex/blob/master/src/jscex.seq.powerpack.js
  56. 56. Maybe Monadvar maybeFunc = function () { var maybeA = getA(); if (maybeA != Maybe.None) { var maybeB = getB(); if (maybeB != Maybe.None) { return maybeA.value + maybeB.value; } else { return Maybe.None; } } else { return Maybe.None; }}//var maybeFunc = eval(Jscex.compile("maybe", function () { var a = $try(getA()); var b = $try(getB()); return a + b;}));
  57. 57. • JavaScirpt DSL • + • JavaScript “ ”• Jscex • BSD • https://github.com/JeffreyZhao/jscex • http://www.sndacode.com/projects/jscex
  58. 58. Q &A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×