0
function*
ES6, generators, and all that
JS Romandie February 2014
Andy Wingo
youth
uni
“erasmus”
2002
2005
2012
wingo@igalia.com
Hacking compiler tech at Igalia since 2011
Recently: ES6 generators in V8, SpiderMonkey
(sponsored by Blo...
So let’s talk about functions
♥ ♥ ♥
JS: the good part
Elegant, clear local reasoning
Program modularity via procedural
dec...
Function activations
function fac(n) { return n ? n * fac(n-1) : 1 }
fac(3)
Activation extents
Extent: the period of time that a function call is
active
Extents in JS
Calling a JS function creates a new activation
begins with a call❧
ends with a return❧
extends through time❧...
Time constraints
Node
servicing 100 clients/s: 10 ms/client❧
Browser
60 frames/s: 16 ms/frame❧
One disk seek is 10 ms
Professional deformation
Constraints on time
Constraints on activation extents
Constraints on functions
Deformation of pro...
Long-extent activations
desirable
Asynchronous tasks (XHR, Node)
function^ task(x) {
await baz(await bar(x));
return 42;
}
Long-extent activations
desirable
Iteration, lazy streams
function foreach(f, iterable) {
for (var elt of iterable)
f(elt)...
Generators
Functions whose activations can suspend
function* g() {}
function* g() {
for (let x = 0; ; x++)
yield x
}
(yiel...
Generator basics
function* g() { yield 42; return 10 }
var o = g();
o.next() → { value: 42, done: false }
o.next() → { val...
Functions and objects
Terminology confusing
Generator function: function* g() {}
Generator object: var o = g()
Generator o...
Yield expressions
Not just a statement!
function* g() { return yield 42 }
var o = g();
o.next() → { value: 42, done: false...
Throwing into generators
Generator objects also have throw methods
function* g() {
try { yield 10 }
catch (e) { return e }...
Applications
Asynchronous tasks
Iteration
(Lazy streams)
Asynchronous tasks
With promises
function process(url, f) {
function request(url) { foo }
function update(url, updated) { ...
Asynchronous tasks
With generators
Q.async(function* process(url, f) {
try {
var data = yield foo;
var updated = f(data)
y...
Reclaiming “JS: the good part”
State in local variables
Native JS control flow
The right number of names
Iteration is a form of
concurrency
Iteration
Iterables: @@iterator in o
@@iterator is a “well-known symbol”; not a
string
Getting iterator from iterable: o[@...
for-of
for (elt of iterable) body
for (elt of [1, 2, 3]) print(elt);
function* upto(n) {
for (var x = 0; x < n; x++)
yield...
yield*: generator composition
function* uptoupto(n) {
for (let x = 0; x < n; x++)
yield* upto(x);
}
[for (x of uptoupto(3)...
[for (x of uptoupto(3)) x]
Iteration over custom data
structures
Trie.prototype[@@iterator] = iterateTrie;
for (var elt of trie) { ... }
http://wingo...
Availability
Firefox (stable)
Chrome (with experimental flag)
Node.js (with experimental flag)
@@iterator story is complex...
Asynchrony and promises
Many libraries; I used Q
Talk by Forbes Lindesay: http://
www.youtube.com/watch?v=qbKWsbJ76-s
ES6 things left to implement
Generator comprehensions (Firefox has them
with the old syntax, not on by default)
Generator ...
How functions are
implemented
Take advantage of linear extent
State that does not escape the extent of an
activation can be implemented more efficiently...
Generators have nonlinear
extent
Flag all locals as “escaped” so they are allocated
on scope chain
To suspend, package up ...
v8:src/objects.h
kFunctionOffset = JSObject::kHeaderSize;
kContextOffset = kFunctionOffset + kPointerSize;
kReceiverOffset...
Q & A
Questions?
wingo@igalia.com
http://wingolog.org/
Upcoming SlideShare
Loading in...5
×

function* - ES6, generators, and all that (JSRomandie meetup, February 2014)

218

Published on

By Andy Wingo.

Andy will talk about forthcoming iterator and generator in JS:

1. Generator and interator seen from a JS developer perspective. What it is, why should I care?

2. Generator and iteragtor seen by a JS engine developer perspective. What does it imply in term for C++, performance consideration, how different is it from what exists already...

3. What does it means to implement new features in V8 (question driven)

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

  • Be the first to like this

No Downloads
Views
Total Views
218
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "function* - ES6, generators, and all that (JSRomandie meetup, February 2014)"

  1. 1. function* ES6, generators, and all that JS Romandie February 2014 Andy Wingo
  2. 2. youth
  3. 3. uni
  4. 4. “erasmus”
  5. 5. 2002
  6. 6. 2005
  7. 7. 2012
  8. 8. wingo@igalia.com Hacking compiler tech at Igalia since 2011 Recently: ES6 generators in V8, SpiderMonkey (sponsored by Bloomberg) Scheme migrant worker
  9. 9. So let’s talk about functions ♥ ♥ ♥ JS: the good part Elegant, clear local reasoning Program modularity via procedural decomposition ♥ ♥ ♥
  10. 10. Function activations function fac(n) { return n ? n * fac(n-1) : 1 } fac(3)
  11. 11. Activation extents Extent: the period of time that a function call is active
  12. 12. Extents in JS Calling a JS function creates a new activation begins with a call❧ ends with a return❧ extends through time❧ JS function activations have linear extent (Contrast to Scheme, Prolog)
  13. 13. Time constraints Node servicing 100 clients/s: 10 ms/client❧ Browser 60 frames/s: 16 ms/frame❧ One disk seek is 10 ms
  14. 14. Professional deformation Constraints on time Constraints on activation extents Constraints on functions Deformation of programs Fraction-of-an-action callback/errback hell
  15. 15. Long-extent activations desirable Asynchronous tasks (XHR, Node) function^ task(x) { await baz(await bar(x)); return 42; }
  16. 16. Long-extent activations desirable Iteration, lazy streams function foreach(f, iterable) { for (var elt of iterable) f(elt); }
  17. 17. Generators Functions whose activations can suspend function* g() {} function* g() { for (let x = 0; ; x++) yield x } (yield valid only in function*)
  18. 18. Generator basics function* g() { yield 42; return 10 } var o = g(); o.next() → { value: 42, done: false } o.next() → { value: 10, done: true }
  19. 19. Functions and objects Terminology confusing Generator function: function* g() {} Generator object: var o = g() Generator objects are iterators: 'next' in o Objects, instances of functions: o instanceof g
  20. 20. Yield expressions Not just a statement! function* g() { return yield 42 } var o = g(); o.next() → { value: 42, done: false } o.next('hai') → { value: 'hai', done: true } Argument to next becomes value of corresponding yield
  21. 21. Throwing into generators Generator objects also have throw methods function* g() { try { yield 10 } catch (e) { return e } } var o = g() o.next() → { value: 10, done: false } o.throw(42) → { value: 42, done: true }
  22. 22. Applications Asynchronous tasks Iteration (Lazy streams)
  23. 23. Asynchronous tasks With promises function process(url, f) { function request(url) { foo } function update(url, updated) { bar } function handleError(e) { baz } return request(url) .then(data => update(url, f(data))) .then(_ => true, handleError); }
  24. 24. Asynchronous tasks With generators Q.async(function* process(url, f) { try { var data = yield foo; var updated = f(data) yield bar; return true; } catch (e) { baz; } })
  25. 25. Reclaiming “JS: the good part” State in local variables Native JS control flow The right number of names
  26. 26. Iteration is a form of concurrency
  27. 27. Iteration Iterables: @@iterator in o @@iterator is a “well-known symbol”; not a string Getting iterator from iterable: o[@@iterator]() Iterables: Array, Map, Set, generators All iterators are also iterables
  28. 28. for-of for (elt of iterable) body for (elt of [1, 2, 3]) print(elt); function* upto(n) { for (var x = 0; x < n; x++) yield x } for (elt of upto(5)) print(elt); [for (x of upto(5)) x] // → [ 0, 1, 2, 3, 4 ]
  29. 29. yield*: generator composition function* uptoupto(n) { for (let x = 0; x < n; x++) yield* upto(x); } [for (x of uptoupto(3)) x] // → [ 0, 0, 1, 0, 1, 2 ]
  30. 30. [for (x of uptoupto(3)) x]
  31. 31. Iteration over custom data structures Trie.prototype[@@iterator] = iterateTrie; for (var elt of trie) { ... } http://wingolog.org/archives/2013/10/07/ es6-generators-and-iteration-in- spidermonkey
  32. 32. Availability Firefox (stable) Chrome (with experimental flag) Node.js (with experimental flag) @@iterator story is complex, see my blog Regenerator: http://facebook.github.io/ regenerator/ Traceur: http://es6fiddle.net/
  33. 33. Asynchrony and promises Many libraries; I used Q Talk by Forbes Lindesay: http:// www.youtube.com/watch?v=qbKWsbJ76-s
  34. 34. ES6 things left to implement Generator comprehensions (Firefox has them with the old syntax, not on by default) Generator methods
  35. 35. How functions are implemented
  36. 36. Take advantage of linear extent State that does not escape the extent of an activation can be implemented more efficiently Example: If a local doesn’t escape, it doesn’t need to be on the heap Example: If no locals escape, no scope chain node need be created Nested closures, with, direct eval, some arguments access can cause escape
  37. 37. Generators have nonlinear extent Flag all locals as “escaped” so they are allocated on scope chain To suspend, package up additional state (pc, callee, scope chain, operand stack) in heap object To restore, splat it back on the stack Generator objects are shallow delimited continuations
  38. 38. v8:src/objects.h kFunctionOffset = JSObject::kHeaderSize; kContextOffset = kFunctionOffset + kPointerSize; kReceiverOffset = kContextOffset + kPointerSize; kContinuationOffset = kReceiverOffset + kPointerSize; kOperandStackOffset = kContinuationOffset + kPointerSize; kStackHandlerIndexOffset = kOperandStackOffset + kPointerSize; kSize = kStackHandlerIndexOffset + kPointerSize; StackHandlerIndex is a V8 wart
  39. 39. Q & A Questions? wingo@igalia.com http://wingolog.org/
  1. A particular slide catching your eye?

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

×