31:[] 2f:{"title":"\n the power of js\n \n generators\n","cells":[{"id":0,"value":"slide.md`# ${nobuilder('the power of js')} ${builder('generators', builderFontSize*1.5)}\n\n#### [@AnjanaVakil](https://twitter.com/AnjanaVakil)
\n[observablehq.com/@anjana/the-power-of-js-generators](https://observablehq.com/@anjana/the-power-of-js-generators)
\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"slide.md`\n## generators are\n${builder(\"old news\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"slide.md`\n## generators are\n${builder('underappreciated')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"slide.md`\n## generators are\n${builder('actually useful')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"slide.md`\n## generators are\n${builder('great teachers')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"slide.md`\n## generators are\n${builder('mind-blowing')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"slide.md`## but first: ${builder('the basics')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"slide.md` ## a generator is a type of _iterator_\n\nhas a [\\`.next()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol) method returning \\`{ value, done }\\`\n\\`\\`\\`js\nsomeIterator.next() \n// { value: 'something', done: false }\nsomeIterator.next()\n// { value: 'anotherThing', done: false }\nsomeIterator.next()\n// { value: undefined, done: true }\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"slide.md`### _generator functions_ return _generator objects_\n\n[\\`function*\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) defines a generator function\n\n\\`\\`\\`js\nfunction* genFunction() {\n yield \"hello world!\";\n}\n\nlet genObject = genFunction();\n// Generator { }\ngenObject.next();\n// { value: \"hello world!\", done: false }\ngenObject.next();\n// { value: undefined, done: true }\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"slide.md`### \\`.next()\\` advances; \\`yield\\` pauses; \\`return\\` stops\n\n\\`\\`\\`js\nfunction* loggerator() {\n console.log('running...');\n yield 'paused';\n console.log('running again...');\n return 'stopped';\n}\n\nlet logger = loggerator();\nlogger.next(); // running...\n// { value: 'paused', done: false }\nlogger.next(); // running again...\n// { value: 'stopped', done: true }\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"slide.md`### generators are also _iterable_\n\n\\`\\`\\`js\nfunction* abcs() {\n yield 'a';\n yield 'b';\n yield 'c';\n}\n\nfor (let letter of abcs()) {\n console.log(letter.toUpperCase());\n}\n// A\n// B\n// C\n\n[...abcs()] // [ \"a\", \"b\", \"c\" ]\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"slide.md`\n\n## what can generators\n${builder('do?')} \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"slide.md(\n \"small\"\n)`## custom iterables with [@@iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)\n`\n// \\`\\`\\`js\n// const cardDeck = {\n// suits: ['♣️', '♦️', '♥️', '♠️'],\n// court: ['J', 'Q', 'K', 'A'],\n// [Symbol.iterator]: function* () {\n// for (let suit of this.suits) {\n// for (let i=2; i <= 10; i++) yield suit + i;\n// for (let c of this.court) yield suit + c;\n// }\n// }\n// };\n\n// [...cardDeck] // Array(52) [\"♣️2\", \"♣️3\", \"♣️4\", ...]\n// \\`\\`\\`\n\n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"cardDeck = ({\n suits: [\"♣️\", \"♦️\", \"♥️\", \"♠️\"],\n court: [\"J\", \"Q\", \"K\", \"A\"],\n [Symbol.iterator]: function* () {\n for (let suit of this.suits) {\n for (let i = 2; i <= 10; i++) yield suit + i;\n for (let c of this.court) yield suit + c;\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1833,"value":"[...cardDeck]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2087,"value":"space()","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"slide.md('small')`## lazy evaluation & infinite sequences\n\n`\n// \\`\\`\\`js\n// function* infinityAndBeyond() {\n// let i = 0;\n// while (true) {\n// yield i++;\n// }\n// }\n\n// function* loopForever() {\n// let i = 0;\n// while (true) {\n// yield i;\n// if (++i === 100) { i = 0; } \n// }\n// }\n// \\`\\`\\`\n\n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"function* infinityAndBeyond() {\n let i = 1;\n while (true) {\n yield i++;\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1264,"value":"function* take(n, iterable) {\n for (let item of iterable) {\n if (n <= 0) return;\n n--;\n yield item;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1266,"value":"taken = [...take(5, infinityAndBeyond())]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1270,"value":"function* map(iterable, mapFn) {\n for (let item of iterable) {\n yield mapFn(item);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1272,"value":"squares = [\n ...take(\n 9,\n map(infinityAndBeyond(), (x) => x * x)\n )\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2093,"value":"space()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"slide.md('small')`## this notebook is`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"md`\n\n\\`now\\` is a builtin generator from Observable's [stdlib](https://github.com/observablehq/stdlib/blob/master/src/now.js):\n\n\\`\\`\\`js\nfunction*() {\n while (true) {\n yield Date.now();\n }\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2003,"value":"now","pinned":true,"hidden":false,"mode":"ojs"},{"id":2061,"value":"\nmd`Observable pulls from any [generator](https://observablehq.com/@observablehq/introduction-to-generators) once per animation frame, updating the notebook reactively.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"t = Math.sin(now / 1000) * 0.5 + 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":2099,"value":"space()","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"slide.md(\n \"small\"\n)`## recursive iteration with [yield*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*)\n`\n// _see my [JSHeroes 2018 talk](https://youtu.be/FmiQr4nfoPQ?t=691) for details!_\n\n// \\`\\`\\`js\n// function binaryTreeNode(value) {\n// let node = { value };\n// node[Symbol.iterator]= function* depthFirst() {\n// yield node.value;\n// if (node.leftChild) yield* node.leftChild;\n// if (node.rightChild) yield* node.rightChild;\n// };\n// return node;\n// }\n\n// let tree = makeTree(binaryTreeNode);\n// for (let node of tree) { process(node); }\n// \\`\\`\\`\n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1855,"value":"function binaryTreeNode(value) {\n let node = { value };\n node[Symbol.iterator] = function* depthFirst() {\n yield node.value;\n if (node.leftChild) yield* node.leftChild;\n if (node.rightChild) yield* node.rightChild;\n };\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1857,"value":"tree = {\n const root = binaryTreeNode(\"root\");\n root.leftChild = binaryTreeNode(\"branch left\");\n root.rightChild = binaryTreeNode(\"branch right\");\n root.leftChild.leftChild = binaryTreeNode(\"leaf L1\");\n root.leftChild.rightChild = binaryTreeNode(\"leaf L2\");\n root.rightChild.leftChild = binaryTreeNode(\"leaf R1\");\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1859,"value":"[...tree]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2096,"value":"space()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"slide.md(\n \"small\"\n)`## async iteration with [@@asyncIterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"getSwapiPagerator = (endpoint) =>\n async function* () {\n let nextUrl = `https://swapi.dev/api/${endpoint}`;\n while (nextUrl) {\n const response = await fetch(nextUrl);\n const data = await response.json();\n nextUrl = data.next;\n yield* data.results;\n }\n }\n// Example adapted from Luciano Mammino's https://www.nodejsdesignpatterns.com/blog/javascript-async-iterators/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1905,"value":"starWars = ({\n characters: {\n [Symbol.asyncIterator]: getSwapiPagerator(\"people\")\n },\n planets: {\n [Symbol.asyncIterator]: getSwapiPagerator(\"planets\")\n },\n ships: {\n [Symbol.asyncIterator]: getSwapiPagerator(\"starships\")\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1880,"value":"{\n const results = [];\n for await (const page of starWars.ships) {\n console.log(page.name);\n results.push(page.name);\n yield results;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2102,"value":"space()","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"slide.md`\n\n## so generators are a great way to\n\n${builder('produce data', 100)} \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"slide.md`\n\n## but generators can also\n\n${builder('consume data')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1300,"value":"slide.md`### \\`yield\\` is a two-way street\n\npass in a value with \\`.next(input)\\`\n\n\\`\\`\\`js\nfunction* listener() {\n console.log(\"listening...\");\n while (true) {\n let msg = yield;\n console.log('heard:', msg);\n }\n}\n\nlet l = listener();\nl.next('are you there?'); // listening...\nl.next('how about now?'); // heard: how about now?\nl.next('blah blah'); // heard: blah blah\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1311,"value":"slide.md`### generators remember state, oh hey there ${builder(\n \"state machines\",\n 50\n)}\n\n\\`\\`\\`js\nfunction* bankAccount() {\n let balance = 0;\n while (balance >= 0) {\n balance += yield balance;\n }\n return 'bankrupt!';\n}\n\nlet acct = bankAccount();\nacct.next(); // { value: 0, done: false }\nacct.next(50); // { value: 50, done: false }\nacct.next(-10); // { value: 40, done: false }\nacct.next(-60); // { value: \"bankrupt!\", done: true }\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1627,"value":"slide.md`## generators can ${builder('yield control', 100)} and get it back later`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"slide.md`## generators can function as ${builder(\n \"coroutines\",\n 100\n)} passing control back and forth to ${builder(\"cooperate\", 100)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"slide.md(\"small\")`### Actor-ish message passing!\n\n\\`\\`\\`js\nlet players = {};\nlet queue = [];\n\nfunction send(name, msg) {\n console.log(msg);\n queue.push([name, msg]);\n}\n\nfunction run() {\n while (queue.length) {\n let [name, msg] = queue.shift();\n players[name].next(msg);\n }\n}\n\nfunction* knocker() {\n send('asker', 'knock knock');\n let question = yield;\n if (question !== \"who's there?\") return;\n send('asker', 'gene');\n question = yield;\n if (question !== \"gene who?\") return;\n send('asker', 'generator!');\n}\n\nfunction* asker() {\n let knock = yield;\n if (knock !== 'knock knock') return;\n send('knocker', \"who's there?\");\n let answer = yield;\n send('knocker', \\`\\${answer} who?\\`);\n}\n\nplayers.knocker = knocker();\nplayers.asker = asker();\nsend('asker', 'asker get ready...'); // call first .next()\nsend('knocker', 'knocker go!'); // start the conversation\nrun();\n\n// asker get ready... \n// knocker go!\n// knock knock\n// who's there? \n// gene\n// gene who?\n// generator!\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2077,"value":"slide.md`## generators can ${builder(\"outsmart javascript\", 100)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2109,"value":"slide.md(\"small\")`\n\n#### Mutual recursion blows the call stack\n\n\\`\\`\\`js\nfunction ping(n) {\n console.log('ping', n);\n return pong(n+1);\n}\n\nfunction pong(n) {\n console.log('pong', n);\n return ping(n+1);\n}\n\nping(0)\n// ping 0\n// pong 1\n// ...\n// ping 27210\n// pong 27211\n// InternalError: too much recursion\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"slide.md(\"small\")`\n#### Generator co-op escapes the limit!\n\n_Warning: Try at your own risk!_\n\n\\`\\`\\`js\nfunction* ping() {\n let n;\n while (true) {\n n = yield;\n console.log('ping', n);\n send('pong', ++n);\n }\n}\n\nfunction* pong() {\n let n;\n while (true) {\n n = yield;\n console.log('pong', n);\n send('ping', ++n);\n }\n}\n\nplayers.ping = ping();\nsend('ping', 'get ready');\nplayers.pong = pong();\nsend('pong', 'get ready');\nsend('ping', 0);\nrun();\n// ping 0\n// pong 1\n// ping 2\n// ...\n// pong 999999\n// ping 1000000\n// ...no stack overflow error!\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1645,"value":"slide.md`## to sum up...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"slide.md`## generators have ${builder(\"practical uses\", 80)}\n\n- custom iterables \n- lazy/infinite sequences\n- state machines\n- data processing\n- data streams\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"slide.md`## generators can help you ${builder('learn CS', 80)}\n\n- control flow & async\n- coroutines & multitasking\n- actor models\n- systems programming\n- functional programming (even m*nads!)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2122,"value":"space()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"slide.md`### ${builder('resources', 60)}\n\n\n[The Miracle of Generators](https://vimeo.com/232221648) by Bodil Stokke\n\n[Curious Course on Coroutines and Concurrency](http://www.dabeaz.com/coroutines/) ([video](https://youtu.be/Z_OAlIhXziw)) and [Generators: The Final Frontier](http://www.dabeaz.com/finalgenerator/) ([video](https://youtu.be/5-qadlG7tWo)) by David Beazley\n\n[Introduction to Generators in Observable](https://observablehq.com/@observablehq/introduction-to-generators) by Mike Bostock\n\n[Exploring ES6: Generators](https://exploringjs.com/es6/ch_generators.html#ch_generators_ref_3) by Axel Rauschmayer\n\n[You Don't Know JS: Generators](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md) by Kyle Simpson\n\n[Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) on MDN\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1690,"value":"slide.md`## ${builder(\"thank you!\")}\n\n[observablehq.com/@anjana/the-power-of-js-generators](https://observablehq.com/@anjana/the-power-of-js-generators)
\n[@AnjanaVakil](https://twitter.com/anjanavakil)\n\n

\n[Slides utility](https://observablehq.com/@visnup/slides) by [Visnu Pitiyanuvath](https://observablehq.com/@visnup)
\nText animation by [Mike Bostock](https://observablehq.com/@mbostock)\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`----\n\n## Appendix\n\nUtilities to make the notebook & presentation work :)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import { slide, notes, style, keyBindings } from '@visnup/slides'","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"keyBindings // the Notes button does nothing, but needed to make key bindings work","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"// some extra styling to make it my own\nhtml``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2082,"value":"space = () => html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"builderFontSize = 100;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"accentColor = '#3182bd'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"mainColor = \"black\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1537,"value":"scale = 1.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"builder = (\n content,\n fontSize = builderFontSize,\n w = width\n) => html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"nobuilder = (content, fontSize=builderFontSize, w=width) => html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"stroke = d3.piecewise(d3.interpolate, [\"black\", \"transparent\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"fill = d3.piecewise(d3.interpolate, [ 'transparent', accentColor, \"black\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}