davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
50 Révisions
1 Branche
Aborescence: 4985cb471c
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '4985cb471c'
${ noResults }
larlet-fr-david-cache/cache/dc98d4cae65338a1be618bab8fa.../index.html

index.html 30KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Why I’m Not Waiting On ‘await’ (part 2) (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://blog.getify.com/not-awaiting-2">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Why I’m Not Waiting On ‘await’ (part 2) (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://blog.getify.com/not-awaiting-2">Source originale du contenu</a></h3>

  463.     <div>

  464. <p>Two-part series on the highs and lows of the coming <code>async..await</code> in JS:</p>

  465. <ul>

  466. <li><a href="https://blog.getify.com/not-awaiting-1">Part 1</a>: what <code>async..await</code> is and why it’s awesome</li>

  467. <li><a href="https://blog.getify.com/not-awaiting-2">Part 2</a>: why <code>async..await</code> falls short compared to generators+promises</li>

  468. </ul>

  469. </div>

  470. 

  471. <p><hr/>

  472. <hr/>

  473. <p>In <a href="https://blog.getify.com/not-awaiting-1/">part one</a>, I covered why <code>async..await</code> has built up such momentum on the hype train. The promise of sync-looking async is powerfully attractive.</p>

  474. <p>Now I’ll cover why I think we should slow that train down. A bunch.</p>

  475. <p>I’m going to make a case for sticking with generators+promises by exploring some shortcomings of <code>async..await</code>. As I’ve already shown, the syntax of generators+promises isn’t that much worse. But they’re more powerful.</p>

  476. <h3 id="missing-direct-delegation">Missing Direct Delegation</h3>

  477. <p><a href="https://blog.getify.com/not-awaiting-1/#a-rose-by-any-other-name">Remember in part one</a> where I asserted that <code>yield</code> is more about control transfer than value semantics? That’s more obvious once we look at <code>yield *</code>.</p>

  478. <p>In a generator, a <code>yield</code> transfers control back to the calling code. But what if we want to delegate to another piece of code, while still preserving the pause/resume async semantics.</p>

  479. <p>We can instead do a <code>yield *</code> delegation to another generator, like this:</p>

  480. <pre class="code">

  481. function *foo() {

  482.   var x = yield getX();

  483.   var y = yield * bar( x );

  484.   console.log( x, y );

  485. }</p>

  486. <p>function *bar(x) {

  487.   var y = yield getY( x );

  488.   var z = yield getZ( y );

  489.   return y + z;

  490. }</p>

  491. <p>run( foo() );

  492. </pre>

  493. <p>You'll notice that the <code>yield * bar(..)</code> lets the <code>bar()</code> generator run. But <strong>how</strong> does it run? We didn't use the <code>run(..)</code> utility on that call.</p>

  494. <p>We don't have to, because <code>yield *</code> actually <em>delegates control</em>, so the original <code>run(..)</code> from the last line of the snippet is now transparently controlling (pausing/resuming) the <code>bar()</code> generator as it proceeds, without even knowing it. Once <code>bar()</code> completes, its return value (if any) finally resumes the <code>yield *</code> with that value, returning execution to the <code>foo()</code> generator.</p>

  495. <p>The <code>yield *</code> can even be used to create a sort of generator recursion, where a generator instance delegates to another instance of itself.</p>

  496. <p>Because <code>async function</code>s are not about control transfer, there's no equivalent to <code>yield *</code> like <code>await *</code>. There <em>was</em> talk about appropriating the <code>await *</code> syntax to mean something like <code>await Promise.all(..)</code>, but that was eventually rejected.</p>

  497. <p>The <code>async function</code> equivalent would be:</p>

  498. <pre class="code">

  499. async function foo() {

  500.   var x = await getX();

  501.   var y = await bar( x );

  502.   console.log( x, y );

  503. }</p>

  504. <p>async function bar(x) {

  505.   var y = await getY( x );

  506.   var z = await getZ( y );

  507.   return y + z;

  508. }</p>

  509. <p>foo();

  510. </pre>

  511. <p>We don't need a <code>yield *</code>-type construct here because <code>bar()</code> creates a promise we can <code>await</code>.</p>

  512. <p>That may seem that it's basically just, again, nicer syntax sugar removing the need for the <code>*</code>. But it's subtly different. With the <code>yield *</code>, we're not creating a wrapper promise but rather just passing control directly through.</p>

  513. <p>What if <code>bar()</code> has some case where it can provide its result right away, such as pulling from a cache/memoization?</p>

  514. <pre class="code">

  515. function *bar(x) {

  516.   if (x in cache) {

  517.     return cache[x];

  518.   }</p>

  519. <p>var y = yield getY( x );

  520.   var z = yield getZ( y );

  521.   return y + z;

  522. }

  523. </pre>

  524. <p>versus:</p>

  525. <pre class="code">

  526. async function bar(x) {

  527.   if (x in cache) {

  528.     return cache[x];

  529.   }</p>

  530. <p>var y = await getY( x );

  531.   var z = await getZ( y );

  532.   return y + z;

  533. }

  534. </pre>

  535. <p>In both cases, we immediately <code>return cache[x]</code>.</p>

  536. <p>In the <code>yield *</code> case, <code>return</code> immediately terminates the generator instance, so we'd get that result back in <code>foo()</code> right away. But with promises (which is what <code>async function</code>s return), unwrapping is an async step, so we have to wait a tick before we can get that value.</p>

  537. <p>Depending on your situation, <strong>that may slow your program down a little bit</strong>, especially if you're using that pattern a lot.</p>

  538. <h3 id="cant-be-stopped">Can't Be Stopped</h3>

  539. <p>In part one, <a href="https://blog.getify.com/not-awaiting-1/#a-rose-by-any-other-name">I asserted</a> that <code>await</code> is declarative while <code>yield</code> is imperative. Pushing that to a higher level, <code>async function</code>s are declarative and generators are imperative.</p>

  540. <p>An <code>async function</code> is represented by (ie, returns) a promise. This promise represents one of two states: the whole thing finished, or something went wrong and it stopped. In that sense, the <code>async function</code> is an all-or-nothing proposition. But moreover, because it's a promise that's returned, all you can do is observe the outcome, not control it.</p>

  541. <p>By contrast, a generator is represented by (ie, returns) an iterator. The iterator is an external control for each of the steps in the generator. We don't just observe a generator's outcome, we participate in it and control it.</p>

  542. <p>The <code>run(..)</code> function that drives the generator+promise async flow control logic is actually negotiating via the iterator.</p>

  543. <p>The <code>next(..)</code> command on the iterator is how values are sent into the generator, and how values are received from it as it progresses. The iterator also has another method on it called <code>throw(..)</code>, which injects an exception into the generator at its paused position; <code>next(..)</code> and <code>throw(..)</code> pair together to signal (from the outside) success or failure of any given step in the generator.</p>

  544. <p>Of course, there's no requirement that the code controlling a generator's iterator choose to keep it going with <code>next(..)</code> or <code>throw(..)</code>. Merely opting to stop calling either has the effect of indefinitely pausing the generator. The iterator instance could be left in this paused state until the program ends or it's garbage collected.</p>

  545. <p>Even better, a generator's iterator has a third method on it that can be useful: <code>return(..)</code>. This method terminates the generator at its current paused point; you can send an affirmative signal into the generator from the outside telling it to stop right where it sits.</p>

  546. <p>You can even detect and respond to this <code>return(..)</code> signal inside the generator with the <code>finally</code> clause of a <code>try</code> statement; a <code>finally</code> will always be executed, even if the statement inside its associated <code>try</code> was terminated from the outside with an iterator's <code>return(..)</code> method.</p>

  547. <p>A <code>run(..)</code> that was slightly smarter could offer the advantage of allowing a generator to be stopped from the outside.</p>

  548. <p>Imagine a scenario where midway through a generator's steps, you can tell by the values emitted that it's appropriate to stop the progression of the generator -- to cancel any further actions. Maybe the generator makes a series of Ajax calls one after the other, but one of the results signals that none of the others should be made.</p>

  549. <p>Consider a more capable <code>run(..)</code> used like this:</p>

  550. <pre class="code">

  551. run( main(), function shouldTerminate(val){

  552.   if (val == 42) return true;

  553.   return false;

  554. } );

  555. </pre>

  556. <p>Each time a value is ready to be sent in to resume the <code>main()</code> generator, this <code>shouldTerminate(..)</code> function is first called with the value. If <em>it</em> returns <code>true</code>, then the iterator is <code>return(..)</code>d, otherwise the value is sent via <code>next(..)</code>.</p>

  557. <p>A generator provides the power of external cancelation capability whereas an <code>async function</code> can only cancel itself. Of course, the necessary cancelation logic can be baked into the <code>async function</code>, but that's not always appropriate.</p>

  558. <p>It's often much more appropriate to separate the async steps themselves from any logic that will consume or control (or cancel) them as a result. With generators that is possible, but with <code>async function</code>s it's not.</p>

  559. <h3 id="scheduling-is-hidden">Scheduling Is Hidden</h3>

  560. <p>It's tempting to assume that a program should always complete its async steps ASAP. It may be hard to conceive of a situation where you wouldn't want some part of the program to proceed <em>right away</em>.</p>

  561. <p>Let's consider a scenario where we have more than one set of asynchronous logic operating at the same time. For example, we might be making some HTTP requests and we might also be making some database calls. For the sake of this discussion, let's assume that each set of behavior is implemented in its own <code>async function</code>.</p>

  562. <p>Because <code>async function</code>s essentially come with their own <code>run(..)</code> utility built-in, the progression of steps is entirely opaque and advances strictly in ASAP fashion.</p>

  563. <p>But what if you needed to control the scheduling of the resumptions of each task's steps? What if, for the purposes of throttling resource usage, you needed to make sure that no more than one HTTP request/response was handled for each database request?</p>

  564. <p>Another problem could be that one set of async steps might have each step proceed so quickly (essentially immediately) that this task could "starve" the rest of the system by not letting any other tasks have a chance. To understand this possibility, you should read more about <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&amp;%20performance/ch1.md#jobs">microtasks (aka Jobs)</a>. Basically, if each step in a promise chain resolves immediately, each subsequent step is scheduled "right away", such that no other waiting asynchronous operations get to run.</p>

  565. <p>Or what if you had ten sets of HTTP request/response cycles, but you need to make sure that no more than 3 of them were being processed at any given moment? Or perhaps you needed to not proceed ASAP but rather in a strictly round-robin order through the set of running tasks.</p>

  566. <p>There's probably half a dozen other scenarios where naive scheduling of the progression of async operations is not sufficient. In all those cases, we'd like to have more control.</p>

  567. <p>An <code>async function</code> affords no such control because the promise-resumption step is baked into the engine. But a smarter <code>run(..)</code> utility driving your generators could absolutely selectively decide which ones to resume in which order.</p>

  568. <p>By the way, while I'm being general about such scenarios for brevity sake, this is not purely theoretical. An open area of my research in async programming is <a href="..">CSP</a>, Communicating Sequential Processes, the model for concurrency used in the <em>go</em> language and also in ClojureScript's <code>core.async</code>.</p>

  569. <p>Normally CSP processes are modeled in JS using generators, because you will in general have many of them running at the same time, and usually need fine grained control over which ones resume after others pause. Attempts have been made to model CSP using <code>async function</code>s, but I believe these systems are inherently flawed in that the library is susceptible to all the above limitations because it has no control over the scheduling.</p>

  570. <p>CSP is one very concrete example of why it's important to have scheduling control over async operations. <code>async function</code>s just don't offer what we need, but generators do.</p>

  571. <h3 id="async-functions-vs-generators"><code>async function</code>s vs Generators</h3>

  572. <p>OK, so let's take stock of where we're at.</p>

  573. <p>First we examined how <code>async function</code>s work and what makes them so nice from a syntactic sugar perspective. But now we've seen several places where the tradeoff is that we lose control of potentially very important aspects of our asynchrony.</p>

  574. <p>You may consider these limitations unimportant because you haven't needed to do any of the fine-grained control described here. And that's fine. The <code>async function</code> will serve you just fine.</p>

  575. <p>But... what pain are you <em>really</em> enduring if you stuck with generators? Again, a side-by-side comparison:</p>

  576. <pre class="code">

  577. function *foo(x) {

  578.   try {

  579.     var y = yield getY( x );

  580.     return x + y;

  581.   }

  582.   catch (err) {

  583.     return x;

  584.   }

  585. }</p>

  586. <p>run( foo( 3 ) )

  587. .then( function(result){

  588.   console.log( result );

  589. } );

  590. </pre>

  591. <p>versus:</p>

  592. <pre class="code">

  593. async function foo(x) {

  594.   try {

  595.     var y = await getY( x );

  596.     return x + y;

  597.   }

  598.   catch (err) {

  599.     return x;

  600.   }

  601. }</p>

  602. <p>foo( 3 )

  603. .then( function(result){

  604.   console.log( result );

  605. } );

  606. </pre>

  607. <p>They're almost identical.</p>

  608. <p>In both versions you get localized synchronous semantics (including pause/resume and error handling), and you get a promise that represents the completion of the <code>foo(..)</code> task.</p>

  609. <p>For generators, you <em>do</em> need the simple <code>run(..)</code> library utility, whereas with <code>async function</code>s, you don't. But as we discussed, such a utility is only about a dozen lines of code in its simplest form. So is it actually that burdensome?</p>

  610. <p>For the extra control we get, I think <code>run(..)</code> is an easy price to justify.</p>

  611. <h3 id="finally"><code>finally { .. }</code></h3>

  612. <p>For the majority of my async code, I believe generators+promises is a better, more flexible, more powerful option, at only a minimal expense.</p>

  613. <p>I'd rather not start with <code>async function</code>s and then later realize that there are places where I need more control, and have to refactor back to generators. That's especially true considering the <a href="https://blog.getify.com/not-awaiting-1/#just-use-both">complications of mixing the two forms</a> that I addressed in part one.</p>

  614. <p><code>async..await</code> seems like a great feature. But it's too simplistic, IMO. The small syntactic benefits are not worth the loss of control.</p></p>

  615.   </article>

  616. </section>

  617. 

  618. 

  619. <nav id="jumpto">

  620.   <p>

  621.     <a href="/david/blog/">Accueil du blog</a> |

  622.     <a href="https://blog.getify.com/not-awaiting-2">Source originale</a> |

  623.     <a href="/david/stream/2019/">Accueil du flux</a>

  624.   </p>

  625. </nav>

  626. 

  627. <footer>

  628.   <div>

  629.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  630.     <p>

  631.       Bonjour/Hi!

  632.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  633.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  634.     </p>

  635.     <p>

  636.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  637.     </p>

  638.     

  639.     <p>

  640.       Voici quelques articles choisis :

  641.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  642.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  643.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  644.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  645.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  646.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  647.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  648.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  649.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  650.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  651.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  652.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  653.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  654.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  655.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  656.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  657.     </p>

  658.     <p>

  659.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  660.     </p>

  661.     <p>

  662.       Je ne traque pas ta navigation mais mon

  663.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  664.       conserve des logs d’accès.

  665.     </p>

  666.   </div>

  667. </footer>

  668. <script type="text/javascript">

  669.   ;(_ => {

  670.     const jumper = document.getElementById('jumper')

  671.     jumper.addEventListener('click', e => {

  672.       e.preventDefault()

  673.       const anchor = e.target.getAttribute('href')

  674.       const targetEl = document.getElementById(anchor.substring(1))

  675.       targetEl.scrollIntoView({behavior: 'smooth'})

  676.     })

  677.   })()

  678. </script>