Promises article. Fixes html5rocks#446.

jakearchibald · Dec 12, 2013 · 47921f4 · 47921f4
1 parent 60a644e
commit 47921f4
Show file tree

Hide file tree

Showing 20 changed files with 1,291 additions and 0 deletions.
diff --git a/content/tutorials/es6/promises/en/index.html b/content/tutorials/es6/promises/en/index.html
diff --git a/content/tutorials/es6/promises/static/async-all-example.html b/content/tutorials/es6/promises/static/async-all-example.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Promises test</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="network-fake">
+    <label><input type="checkbox"> Fake network delay</label>
+  </div>
+  <div class="story"></div>
+  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
+    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
+  </svg>
+
+  <script src="promise-2.0.4.min.js"></script>
+  <script src="utils.js"></script>
+  <script>
+    getJson('story.json').then(function(story) {
+      addHtmlToPage(story.heading);
+
+      // Take an array of promises and wait on them all
+      return Promise.all(
+        // Map our array of chapter urls
+        // to an array of chapter json promises
+        story.chapterUrls.map(getJson)
+      );
+    }).then(function(chapters) {
+      // Now we have the chapters jsons in order! Loop thorugh…
+      chapters.forEach(function(chapter) {
+        // …and add to the page
+        addHtmlToPage(chapter.html);
+      });
+      addTextToPage("All done");
+    }).catch(function(err) {
+      // catch any error that happened along the way
+      addTextToPage("Argh, broken: " + err.message);
+    }).then(function() {
+      document.querySelector('.spinner').style.display = 'none';
+    });
+  </script>
+</body>
+</html>
diff --git a/content/tutorials/es6/promises/static/async-best-example.html b/content/tutorials/es6/promises/static/async-best-example.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Promises test</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="network-fake">
+    <label><input type="checkbox"> Fake network delay</label>
+  </div>
+  <div class="story"></div>
+  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
+    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
+  </svg>
+
+  <script src="promise-2.0.4.min.js"></script>
+  <script src="utils.js"></script>
+  <script>
+    getJson('story.json').then(function(story) {
+      addHtmlToPage(story.heading);
+
+      // Map our array of chapter urls
+      // to an array of chapter json promises
+      return story.chapterUrls.map(getJson).reduce(function(chain, chapterPromise) {
+        // Use reduce to chain the promises together,
+        // but adding content to the page for each chapter
+        return chain.then(function() {
+          return chapterPromise;
+        }).then(function(chapter) {
+          addHtmlToPage(chapter.html);
+        });
+      }, Promise.resolve());
+    }).then(function() {
+      addTextToPage("All done");
+    }).catch(function(err) {
+      // catch any error that happened along the way
+      addTextToPage("Argh, broken: " + err.message);
+    }).then(function() {
+      document.querySelector('.spinner').style.display = 'none';
+    });
+  </script>
+</body>
+</html>
diff --git a/content/tutorials/es6/promises/static/async-example.html b/content/tutorials/es6/promises/static/async-example.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Promises test</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="network-fake">
+    <label><input type="checkbox"> Fake network delay</label>
+  </div>
+  <div class="story"></div>
+  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
+    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
+  </svg>
+
+  <script src="promise-2.0.4.min.js"></script>
+  <script src="utils.js"></script>
+  <script>
+    getJson('story.json').then(function(story) {
+      addHtmlToPage(story.heading);
+
+      return story.chapterUrls.reduce(function(chain, chapterUrl) {
+        // Once the last chapter's promise is done…
+        return chain.then(function() {
+          // …fetch the next chapter
+          return getJson(chapterUrl);
+        }).then(function(chapter) {
+          // and add it to the page
+          addHtmlToPage(chapter.html);
+        });
+      }, Promise.resolve());
+    }).then(function() {
+      // And we're all done!
+      addTextToPage("All done");
+    }).catch(function(err) {
+      // Catch any error that happened along the way
+      addTextToPage("Argh, broken: " + err.message);
+    }).then(function() {
+      // Always hide the spinner
+      document.querySelector('.spinner').style.display = 'none';
+    });
+  </script>
+</body>
+</html>
diff --git a/content/tutorials/es6/promises/static/async-generators-example.html b/content/tutorials/es6/promises/static/async-generators-example.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Promises test</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="network-fake">
+    <label><input type="checkbox"> Fake network delay</label>
+  </div>
+  <div class="story"></div>
+  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
+    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
+  </svg>
+
+  <script src="promise-2.0.4.min.js"></script>
+  <script src="utils.js"></script>
+  <script>
+    spawn(function *() {
+      "use strict";
+      try {
+        // 'yield' effectively does an async wait, returning the result of the promise
+        let story = yield getJson('story.json');
+        addHtmlToPage(story.heading);
+
+        // Map our array of chapter urls
+        // to an array of chapter json promises.
+        // This makes sure they all download parallel.
+        let chapterPromises = story.chapterUrls.map(getJson);
+
+        // Can't use chapterPromises.forEach, because yielding within doesn't work
+        for (let i = 0, chapterPromise; chapterPromise = chapterPromises[i]; i++) {
+          // Wait for each chapter to be ready, then add it to the page
+          let chapter = yield chapterPromise;
+          addHtmlToPage(chapter.html);
+        }
+
+        addTextToPage("All done");
+      }
+      catch (err) {
+        // try/catch just works, rejected promises are thrown here
+        addTextToPage("Argh, broken: " + err.message);
+      }
+      document.querySelector('.spinner').style.display = 'none';
+    });
+  </script>
+</body>
+</html>
diff --git a/content/tutorials/es6/promises/static/chapter-1.json b/content/tutorials/es6/promises/static/chapter-1.json
@@ -0,0 +1,4 @@
+{
+  "chapter": 1,
+  "html": "<p>Chapter 1 text: Cras sollicitudin orci ac velit adipiscing, ut faucibus urna auctor. Pellentesque in sem nec sem molestie malesuada. Sed aliquam mi sit amet sollicitudin luctus. Aenean quis tempus sem, in viverra metus. Maecenas sed urna bibendum, cursus lectus sed, ultricies risus.</p>"
+}
diff --git a/content/tutorials/es6/promises/static/chapter-2.json b/content/tutorials/es6/promises/static/chapter-2.json
@@ -0,0 +1,4 @@
+{
+  "chapter": 2,
+  "html": "<p>Chapter 2 text: Curabitur laoreet cursus lectus, id tempus massa volutpat a. Vivamus placerat diam risus, ut rutrum neque consectetur ac. Sed ullamcorper porttitor diam, sit amet sollicitudin velit fermentum in. Praesent aliquet dui ac lorem molestie, non luctus lacus porta. Nullam risus justo, aliquam sit amet neque at, fringilla pharetra mi. Curabitur tincidunt dictum magna, vitae faucibus urna vehicula sit amet. Donec ornare malesuada nisi. Pellentesque tincidunt ultrices quam, ac laoreet risus convallis in. Ut consequat justo dolor, ac venenatis mi aliquam nec. Ut quis accumsan est, non pulvinar orci. Ut hendrerit nunc et laoreet rutrum. Nulla et libero fringilla, sodales risus in, euismod libero.</p>"
+}
diff --git a/content/tutorials/es6/promises/static/chapter-3.json b/content/tutorials/es6/promises/static/chapter-3.json
@@ -0,0 +1,4 @@
+{
+  "chapter": 3,
+  "html": "<p>Chapter 3 text: Duis ac lobortis mi. Vestibulum non augue pellentesque, convallis diam vitae, sollicitudin nulla. Aenean et pharetra erat, lobortis tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum gravida ligula justo, vitae ullamcorper metus scelerisque non. Vestibulum commodo vel metus eget vestibulum. Phasellus porttitor, nunc nec rutrum vulputate, quam lorem dapibus urna, vel accumsan purus mauris id urna. Morbi vitae rutrum nisl, sit amet cursus est. Donec ipsum dui, aliquam non metus at, ultrices accumsan odio. Morbi pretium eros eu lorem commodo pulvinar.</p><p>Donec quis elementum orci. Aenean viverra, nisl eget tempus sodales, velit elit pretium dui, eu ultrices tellus lectus rhoncus orci. Praesent arcu sem, lacinia sit amet tempus ultrices, malesuada eu odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tincidunt dictum posuere. Ut pretium lacinia tortor sit amet consequat. Phasellus ac velit pharetra, fringilla mi ut, porta neque. Donec non urna dolor. Sed sem erat, mattis non risus et, lobortis fringilla dui.</p>"
+}
diff --git a/content/tutorials/es6/promises/static/chapter-4.json b/content/tutorials/es6/promises/static/chapter-4.json
@@ -0,0 +1,4 @@
+{
+  "chapter": 4,
+  "html": "<p>Chapter 4 text: Maecenas nec ipsum viverra erat tincidunt convallis. Morbi nec varius lectus. Vivamus vestibulum massa vitae sapien vestibulum, eu pretium felis consectetur. Nulla sagittis sem sapien. Integer quis imperdiet ipsum, a luctus sem. Duis aliquet feugiat mauris, sed posuere diam aliquam eu. Phasellus vel turpis ac nunc blandit blandit. Sed hendrerit risus nec odio egestas gravida. Vestibulum eget purus vel nulla gravida vulputate eu auctor turpis. Integer laoreet cursus consectetur. Integer laoreet sapien a urna sollicitudin blandit. Curabitur commodo quam ut erat suscipit, ac elementum quam adipiscing. Fusce id venenatis dui. Sed vel diam vel est ullamcorper lacinia. Curabitur sollicitudin diam pharetra tincidunt scelerisque.</p>"
+}
diff --git a/content/tutorials/es6/promises/static/chapter-5.json b/content/tutorials/es6/promises/static/chapter-5.json
@@ -0,0 +1,4 @@
+{
+  "chapter": 5,
+  "html": "<p>Chapter 5 text: Vivamus dignissim enim vel dolor commodo, in vehicula est facilisis. Aliquam ac ipsum sem. Sed justo risus, tincidunt ac lectus nec, molestie elementum urna. Aenean quis velit nec sapien dignissim tincidunt. Aenean venenatis faucibus ultricies. Maecenas eu libero molestie, luctus diam ac, molestie urna. Aliquam erat volutpat. Cras eu augue vitae massa lobortis euismod id nec lacus. Cras gravida bibendum turpis at varius.</p>"
+}
diff --git a/content/tutorials/es6/promises/static/promise-2.0.4.min.js b/content/tutorials/es6/promises/static/promise-2.0.4.min.js
diff --git a/content/tutorials/es6/promises/static/promise-flow.svg b/content/tutorials/es6/promises/static/promise-flow.svg
diff --git a/content/tutorials/es6/promises/static/promise1.gif b/content/tutorials/es6/promises/static/promise1.gif
diff --git a/content/tutorials/es6/promises/static/promise2.gif b/content/tutorials/es6/promises/static/promise2.gif
diff --git a/content/tutorials/es6/promises/static/promise3.gif b/content/tutorials/es6/promises/static/promise3.gif
diff --git a/content/tutorials/es6/promises/static/story.json b/content/tutorials/es6/promises/static/story.json
@@ -0,0 +1,10 @@
+{
+  "heading": "<h1>A story about something</h1>",
+  "chapterUrls": [
+    "chapter-1.json",
+    "chapter-2.json",
+    "chapter-3.json",
+    "chapter-4.json",
+    "chapter-5.json"
+  ]
+}