{"componentChunkName":"component---gatsby-theme-mdx-deck-src-templates-deck-js","path":"/","matchPath":"/*","result":{"data":{"deck":{"id":"a6bed1b7-fc07-505d-b778-e4ac6eefe86f","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar theme = vsDark;\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  theme: theme,\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Rethinking Async JS in BG\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"await\"), \" is evil - don't @ me\"), mdx(Notes, {\n    mdxType: \"Notes\"\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"This is a presentation about a book I read and how I think we should write async JS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Await is not actually evil\"))), mdx(\"hr\", null), mdx(\"img\", {\n    src: howjavascriptworks,\n    style: {\n      maxHeight: \"100%\"\n    }\n  }), mdx(Notes, {\n    mdxType: \"Notes\"\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Written by Douglas Crockford\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Let's talk about DC for some context\"))), mdx(\"hr\", null), mdx(\"img\", {\n    style: {\n      width: \"50%\"\n    },\n    src: crockford\n  }), mdx(\"h2\", null, \"Douglas Crockford\"), mdx(\"ul\", null, mdx(\"li\", null, \"\\\"Discovered\\\" JSON - 2001\"), mdx(Notes, {\n    mdxType: \"Notes\"\n  }, \"JSON\", mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"In 2001, he didn't like XML so he decided to use JS Object literals as a transport format\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Client didn't accept that because it wasn't a standard\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Registered JSON.org and published the \\\"standard\\\"\")), mdx(\"p\", null, \"Good parts\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Wrote a \\\"small\\\" book about how to write JS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"2008, 3 years after \\\"AJAX\\\" term was coined\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sentiment at the time was JS was awful, but only option\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Thesis of JSGP was JS is good, avoid bad parts. very opinionated\")), mdx(\"p\", null, \"JSHint\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"precursor to ESLint and JSHint\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\\"Will hurt your feelings\\\"\"))), mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"li\", null, \"Wrote\", \" \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"JavaScript The Good Parts\"), \" \", \"- 2008\"), mdx(\"li\", null, \"Wrote JSLint - around same time\"))), mdx(\"hr\", null), mdx(\"img\", {\n    src: howjavascriptworks,\n    style: {\n      maxHeight: \"50%\"\n    }\n  }), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Good Parts out of date\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"10 years later (2018)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Not really \\\"sequel\\\" or update to Good Parts\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Crockford giving you all his JS opinions.\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Crockford-isms\"), mdx(\"p\", null, \"\\\"JavaScript has two sets of equality operators \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"===\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"!==\"), \" and their evil twins \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"==\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"!=\"), \"... My advice is to never use the evil twins.\\\" - \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"JavaScript The Good Parts\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Crockford-isms\"), mdx(\"p\", null, \"\\\"In most languages, it is generally best to declare variables at the site of first use. That turns out to be a bad practice in JavaScript because it does not have block scope. It is better to declare all variables at the top of each function.\\\" - \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"JavaScript The Good Parts\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Crockford-isms\"), mdx(\"p\", null, \"\\\"JSLint will hurt your feelings. Side effects may include headache, irritability, dizziness, snarkiness, stomach pain, defensiveness, dry mouth, cleaner code, and a reduced error rate.\\\" - jslint.com\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Crockford-isms\"), mdx(\"p\", null, \"\\\"There are always lots of silly features that are being considered for inclusion into JavaScript. A lot of them get in.\\\" - \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"How JavaScript Works\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Crockford-isms\"), mdx(\"p\", null, \"\\\"JavaScript has two bottom values: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"undefined\"), \"... The abundance of bottom values should be regarded as a design error... We should eliminate \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"null\"), \" and use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"undefined\"), \" exclusively.\\\" - \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"How JavaScript Works\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Crockford-isms\"), mdx(\"p\", null, \"\\\"JavaScript also has more conventional looking class syntax that was designed specifically for developers who \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"do not know\"), \" nor ever will know how JavaScript works. It allows transfer of skills from \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"lesser languages\"), \" with no new learning.\\\" - \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"How JavaScript Works\")), mdx(\"hr\", null), mdx(\"h2\", null, \"\\\"Three popular mistakes\\\"\"), mdx(\"p\", null, \"According to Crockford:\"), mdx(\"ol\", null, mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"li\", null, \"Callbacks (callback hell)\"), mdx(\"li\", null, \"Promises\"), mdx(\"li\", null, mdx(\"code\", null, \"Async\"), \" \", mdx(\"code\", null, \"Await\")))), mdx(\"hr\", null), mdx(\"h2\", null, \"Callbacks\"), mdx(\"p\", null, \"\\\"Each callback function contains the code to request the next unit of work. That request provides a callback that also requests another unit of work, and so on. Programs written this way are \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"difficult to read, difficult to maintain, and brittle.\"), \"\\\" - \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"How JavaScript Works\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Promises\"), mdx(\"p\", null, \"\\\"In their original form, promises were brilliant... All that is left is an awkward control flow mechanism. \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Promises were not designed to manage local control flow\"), \", which is why they do not do it very well. They are definitely an improvement over callback hell, but they are not satisfactual.\\\" - \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"How JavaScript Works\")), mdx(\"hr\", null), mdx(\"h2\", null, mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"Async\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"Await\")), mdx(\"p\", null, \"\\\"It is a pair of keywords that are used to decorate ordinary sequential code and magically transform it into eventual code... To its credit, it masks much of the disappointment of promises. The thing that is most liked about \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"async\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"await\"), \" is that you can \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"continue to write in the style of the old paradigm.\"), \" That is also the biggest problem with it.\\\" - \", mdx(\"span\", {\n    style: {\n      textDecoration: \"underline\"\n    }\n  }, \"How JavaScript Works\")), mdx(\"hr\", null), mdx(\"h2\", null, \"My Thoughts\"), mdx(\"ul\", null, mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"li\", null, \"He's not wrong.\"), mdx(\"li\", null, \"Callback hell is real.\"), mdx(\"li\", null, \"Promises are powerful, but don't really solve control flow problems.\"), mdx(\"li\", null, mdx(\"code\", null, \"Async\"), \" \", mdx(\"code\", null, \"Await\"), \" is nice, but making async code look/work like sync code is probably not best.\"), mdx(\"li\", null, \"Asynchronous nature of JS is powerful and should be embraced, not hidden.\"))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Parseq\\\" subtitle=\\\"Crockford's solution\\\"\",\n    \"title\": \"\\\"Parseq\\\"\",\n    \"subtitle\": \"\\\"Crockford's\",\n    \"solution\\\"\": true\n  }), \"parseq.fallback(requestor_array, time_limit);\\n\\nparseq.parallel(\\n  required_array,\\n  optional_array,\\n  time_limit,\\n  time_option,\\n  throttle\\n);\\n\\nparseq.parallel_object(\\n  required_object,\\n  optional_object,\\n  time_limit,\\n  time_option,\\n  throttle\\n);\\n\\nparseq.race(requestor_array, time_limit, throttle);\\n\\nparseq.sequence(requestor_array, time_limit);\\n\"))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Requestor\\\" subtitle=\\\"A requestor function is any function that takes a callback and an optional value.\\\"\",\n    \"title\": \"\\\"Requestor\\\"\",\n    \"subtitle\": \"\\\"A\",\n    \"requestor\": true,\n    \"function\": true,\n    \"is\": true,\n    \"any\": true,\n    \"that\": true,\n    \"takes\": true,\n    \"a\": true,\n    \"callback\": true,\n    \"and\": true,\n    \"an\": true,\n    \"optional\": true,\n    \"value.\\\"\": true\n  }), \"function requestorize(unary) {\\n  return function requestor(callback, value) {\\n    try {\\n      return callback(unary(value));\\n    } catch (exception) {\\n      return callback(undefined, exception);\\n    }\\n  };\\n}\\n\"))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Requestor\\\" subtitle='\\\"Requestor\\\" for setTimeout()'\",\n    \"title\": \"\\\"Requestor\\\"\",\n    \"subtitle\": \"'\\\"Requestor\\\"\",\n    \"for\": true,\n    \"setTimeout()'\": true\n  }), \"function wait(time) {\\n  return function timeoutRequestor(callback) {\\n    setTimeout(callback, time);\\n  }\\n})\\n\\nparseq.sequence([\\n  wait(400),\\n  wait(200)\\n]);\\n\\n\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"Better?\"), mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"ul\", null, mdx(\"li\", null, \"Full disclosure, haven't actually tried requestor pattern.\"), mdx(\"li\", null, \"May actually like it after trying.\"), mdx(\"li\", null, \"Does not seem appealing to create \\\"Requestor\\\" functions every time I want to do async.\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"What's left?\"), mdx(\"ul\", null, mdx(\"li\", {\n    style: {\n      textDecoration: \"line-through\"\n    }\n  }, \"Callbacks\"), mdx(\"li\", {\n    style: {\n      textDecoration: \"line-through\"\n    }\n  }, \"Promise\"), mdx(\"li\", {\n    style: {\n      textDecoration: \"line-through\"\n    }\n  }, \"Async Await\"), mdx(\"li\", {\n    style: {\n      textDecoration: \"line-through\"\n    }\n  }, \"Parseq\")), mdx(\"hr\", null), mdx(\"h1\", null, \"End of Book Report\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Rethinking Async JS\"), mdx(\"p\", null, \"What do I currently do? What do I like? (Ideally)\"), mdx(\"ul\", null, mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"li\", null, \"Promises\"), mdx(\"li\", null, \"Functions\"), mdx(\"li\", null, mdx(\"span\", {\n    style: {\n      textDecoration: \"line-through\"\n    }\n  }, mdx(\"code\", null, \"Async\"), \" \", mdx(\"code\", null, \"Await\"))))), mdx(\"hr\", null), mdx(\"h2\", null, \"Rethinking Async JS\"), mdx(\"p\", null, \"What do I currently do? What do I like? (Ideally)\"), mdx(\"ul\", null, mdx(\"li\", null, \"Promises\"), mdx(\"li\", null, \"Functions\"), mdx(\"li\", null, mdx(\"code\", null, \"Async\"), \" \", mdx(\"span\", {\n    style: {\n      textDecoration: \"line-through\"\n    }\n  }, mdx(\"code\", null, \"Await\")))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Async Function\\\"\",\n    \"title\": \"\\\"Async\",\n    \"Function\\\"\": true\n  }), \"async function meaningOfLife() {\\n  const response = await ask();\\n\\n  return 42;\\n}\\n\\nconsole.log(meaningOfLife());\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Async Function\\\"\",\n    \"title\": \"\\\"Async\",\n    \"Function\\\"\": true\n  }), \"async function meaningOfLife() {\\n  const response = await ask();\\n\\n  return 42;\\n}\\n\\nconsole.log(meaningOfLife());\\n// Promise\\xA0<pending>\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Async Function\\\"\",\n    \"title\": \"\\\"Async\",\n    \"Function\\\"\": true\n  }), \"async function meaningOfLife() {\\n  return 42;\\n}\\n\\nconsole.log(meaningOfLife());\\n// Promise\\xA0<pending>\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Async Function\\\" 1:3\",\n    \"title\": \"\\\"Async\",\n    \"Function\\\"\": true,\n    \"1:3\": true\n  }), \"function meaningOfLife() {\\n  return Promise.resolve(42);\\n}\\n\\nconsole.log(meaningOfLife());\\n// Promise\\xA0<pending>\\n\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"Definition: Async Function\"), mdx(\"p\", null, \"Any function that returns a promise and takes an optional value.\"), mdx(\"hr\", null), mdx(\"h4\", null, \"Requestor < Async Function\"), mdx(\"p\", null, \"Basic unit of work\"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Parseq\\\"\",\n    \"title\": \"\\\"Parseq\\\"\"\n  }), \"parseq.sequence(requestorArray);\\n\\nparseq.race(requestorArray);\\n\\nparseq.parallel(requestorArray);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Async Fns\\\"\",\n    \"title\": \"\\\"Async\",\n    \"Fns\\\"\": true\n  }), \"asyncFns.sequence(asyncFnsArray);\\n\\nasyncFns.race(asyncFnsArray);\\n\\nPromise.all(promiseArray);\\n\")))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Requestor\\\" subtitle=\\\"xhr example\\\"\",\n    \"title\": \"\\\"Requestor\\\"\",\n    \"subtitle\": \"\\\"xhr\",\n    \"example\\\"\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\nfunction apiGetData(path) {\\n  return function apiGetDataRequestor(callback, id) {\\n    let url = `${host}${path}`;\\n    if (id) url += `/${id}`;\\n\\n    const xhr = new XMLHttpRequest();\\n    xhr.open(\\\"GET\\\", url, true);\\n\\n    xhr.onload = () => {\\n      const data = JSON.parse(this.response);\\n      callback(data.id);\\n    };\\n    xhr.send();\\n  };\\n}\\n\\nparseq.sequence([\\n  apiGetData(\\\"/currentUser\\\"),\\n  apiGetData(\\\"/user\\\"),\\n]);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Async Function\\\" 3,7:9\",\n    \"title\": \"\\\"Async\",\n    \"Function\\\"\": true,\n    \"3,7:9\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\nfunction apiGetData(path) {\\n  return function apiGetDataJson(id) {\\n    let url = `${host}${path}`;\\n    if (id) url += `/${id}`;\\n\\n    return fetch(url)\\n      .then(response => response.json())\\n      .then(data => data.id);\\n  };\\n}\\n\\nasyncFns.sequence([\\n  apiGetData(\\\"/currentUser\\\"),\\n  apiGetData(\\\"/user\\\"),\\n]);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Async Function\\\" 2:4,7:9\",\n    \"title\": \"\\\"Async\",\n    \"Function\\\"\": true,\n    \"2:4,7:9\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\nfunction apiGetDataJson(path) {\\n  return fetch(url).then(response => response.json());\\n}\\n\\nasyncFns.sequence([\\n  () => apiGetDataJson(`${host}/currentUser`),\\n  data => apiGetDataJson(`${host}/user/${data.id}`),\\n  userInfo => console.log(userInfo),\\n]);\\n\"))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Fetch\\\" subtitle=\\\"no more then!\\\"\",\n    \"title\": \"\\\"Fetch\\\"\",\n    \"subtitle\": \"\\\"no\",\n    \"more\": true,\n    \"then!\\\"\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\n\\nfunction fetchJson(url) {\\n  return asyncFns.sequence([\\n    () => fetch(url),\\n    response => response.json(),\\n  ]);\\n}\\n\\nasyncFns.sequence([\\n  () => fetchJson(`${host}/user/1`),\\n  data => console.log(data),\\n]);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"5\": true,\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Fetch\\\" subtitle=\\\"no more then!\\\" 5\",\n    \"title\": \"\\\"Fetch\\\"\",\n    \"subtitle\": \"\\\"no\",\n    \"more\": true,\n    \"then!\\\"\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\n\\nfunction fetchJson(url) {\\n  return asyncFns.sequence([\\n    () => fetch(url),\\n    response => response.json(),\\n  ]);\\n}\\n\\nasyncFns.sequence([\\n  () => fetchJson(`${host}/user/1`),\\n  data => console.log(data),\\n]);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"6\": true,\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Fetch\\\" subtitle=\\\"no more then!\\\" 6\",\n    \"title\": \"\\\"Fetch\\\"\",\n    \"subtitle\": \"\\\"no\",\n    \"more\": true,\n    \"then!\\\"\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\n\\nfunction fetchJson(url) {\\n  return asyncFns.sequence([\\n    () => fetch(url),\\n    response => response.json(),\\n  ]);\\n}\\n\\nasyncFns.sequence([\\n  () => fetchJson(`${host}/user/1`),\\n  data => console.log(data),\\n]);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Fetch\\\" subtitle=\\\"initial async fn\\\" 5,11\",\n    \"title\": \"\\\"Fetch\\\"\",\n    \"subtitle\": \"\\\"initial\",\n    \"async\": true,\n    \"fn\\\"\": true,\n    \"5,11\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\n\\nfunction fetchJson(url) {\\n  return asyncFns.sequence([\\n    () => fetch(url),\\n    response => response.json(),\\n  ]);\\n}\\n\\nasyncFns.sequence([\\n  () => fetchJson(`${host}/user/1`),\\n  data => console.log(data),\\n]);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Fetch\\\" subtitle=\\\"function or Promise\\\"\",\n    \"title\": \"\\\"Fetch\\\"\",\n    \"subtitle\": \"\\\"function\",\n    \"or\": true,\n    \"Promise\\\"\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\n\\nfunction fetchJson(url) {\\n  return asyncFns.sequence([\\n    fetch(url),\\n    response => response.json(),\\n  ]);\\n}\\n\\nasyncFns.sequence([\\n  fetchJson(`${host}/user/1`),\\n  data => console.log(data),\\n]);\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Fetch\\\" subtitle=\\\"What's this?\\\" 4[10:17],10[1:8]\",\n    \"title\": \"\\\"Fetch\\\"\",\n    \"subtitle\": \"\\\"What's\",\n    \"this?\\\"\": true,\n    \"4[10:17],10[1:8]\": true\n  }), \"const host = \\\"https://api.example.com\\\";\\n\\nfunction fetchJson(url) {\\n  return asyncFns.sequence([\\n    fetch(url),\\n    response => response.json(),\\n  ]);\\n}\\n\\nasyncFns.sequence([\\n  fetchJson(`${host}/user/1`),\\n  data => console.log(data),\\n]);\\n\"))), mdx(\"hr\", null), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/keller/async-fns\"\n  }), \"https://github.com/keller/async-fns\")), mdx(\"img\", {\n    style: {\n      width: \"50%\"\n    },\n    src: githubPng\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"Async-Fns Functions\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"sequence\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"span\", {\n    style: {\n      textDecoration: \"line-through\"\n    }\n  }, mdx(\"code\", null, \"parallel\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"race\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"abortSignal\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aborter\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"emitter\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"run\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"channel\"))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, github],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"async await\\\"\",\n    \"title\": \"\\\"async\",\n    \"await\\\"\": true\n  }), \"const data = await graphql(query, {\\n  publication,\\n  permalink,\\n});\\n\\nconst pubData = data.publication;\\nconst [entry] = pubData.entriesConnection.entries;\\n\\nconst publicationInfo = {\\n  footnote: pubData.footnote,\\n  title: pubData.title,\\n};\\n\\ndispatch({\\n  type: \\\"LOAD_ENTRY\\\",\\n  payload: { publicationInfo, entry, publication, key },\\n});\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"sequence\\\"\",\n    \"title\": \"\\\"sequence\\\"\"\n  }), \"sequence([\\n  graphql(query, { publication, permalink }),\\n  data => {\\n    const pubData = data.publication;\\n    const [entry] = pubData.entriesConnection.entries;\\n\\n    const publicationInfo = {\\n      footnote: pubData.footnote,\\n      title: pubData.title,\\n    };\\n\\n    dispatch({\\n      type: \\\"LOAD_ENTRY\\\",\\n      payload: { publicationInfo, entry, publication, key },\\n    });\\n  },\\n]);\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"async await\\\" 1:4\",\n    \"title\": \"\\\"async\",\n    \"await\\\"\": true,\n    \"1:4\": true\n  }), \"const data = await graphql(query, {\\n  publication,\\n  permalink,\\n});\\n\\nconst pubData = data.publication;\\nconst [entry] = pubData.entriesConnection.entries;\\n\\nconst publicationInfo = {\\n  footnote: pubData.footnote,\\n  title: pubData.title,\\n};\\n\\ndispatch({\\n  type: \\\"LOAD_ENTRY\\\",\\n  payload: { publicationInfo, entry, publication, key },\\n});\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"sequence\\\" 2:3\",\n    \"title\": \"\\\"sequence\\\"\",\n    \"2:3\": true\n  }), \"sequence([\\n  graphql(query, { publication, permalink }),\\n  data => {\\n    const pubData = data.publication;\\n    const [entry] = pubData.entriesConnection.entries;\\n\\n    const publicationInfo = {\\n      footnote: pubData.footnote,\\n      title: pubData.title,\\n    };\\n\\n    dispatch({\\n      type: \\\"LOAD_ENTRY\\\",\\n      payload: { publicationInfo, entry, publication, key },\\n    });\\n  },\\n]);\\n\")))), mdx(\"hr\", null), mdx(\"h2\", null, \"Thoughts\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Liked it more than I thought.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Conversion was pretty easy.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Which so far proves it's a similar approach, but doesn't hide async.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Using \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \".then()\"), \" is fine for small things, not everything has to be \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"sequence()\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Other improvements...\")), mdx(\"hr\", null), mdx(\"h3\", null, \"Compile Time\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"img\", {\n    src: await_time\n  }), mdx(\"img\", {\n    src: no_await_time\n  })), mdx(\"hr\", null), mdx(\"h3\", null, \"Code Size\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"img\", {\n    src: await_size\n  }), mdx(\"img\", {\n    src: no_await_size\n  })), mdx(\"hr\", null), mdx(\"h2\", null, \"Questions? / Thoughts!\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"matchPath":"/*","isCreatedByStatefulCreatePages":false,"id":"a6bed1b7-fc07-505d-b778-e4ac6eefe86f","slug":"","title":"Rethinking Async JS in BG"}}}