GuildCrafts · kmwarter · May 31, 2017 · May 31, 2017
diff --git a/frontend-masters-exercises/exercises/ex1/README.md b/frontend-masters-exercises/exercises/ex1/README.md
@@ -0,0 +1,9 @@
+# Instructions
+
+1. This exercise calls for you to write some async flow-control code. To start off with, you'll use callbacks only.
+
+2. Expected behavior:
+	- Request all 3 files at the same time (in "parallel").
+	- Render them ASAP (don't just blindly wait for all to finish loading)
+	- BUT, render them in proper (obvious) order: "file1", "file2", "file3".
+	- After all 3 are done, output "Complete!".
diff --git a/frontend-masters-exercises/exercises/ex1/ex1-fixed.html b/frontend-masters-exercises/exercises/ex1/ex1-fixed.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Exercise 1 - Fixed</title>
+</head>
+<body>
+<h1>Exercise 1 - Fixed</h1>
+
+<script src="ex1-fixed.js"></script>
+
+</body>
+</html>
diff --git a/frontend-masters-exercises/exercises/ex1/ex1-fixed.js b/frontend-masters-exercises/exercises/ex1/ex1-fixed.js
@@ -0,0 +1,63 @@
+function fakeAjax(url,cb) {
+	var fake_responses = {
+		"file1": "The first text",
+		"file2": "The middle text",
+		"file3": "The last text"
+	};
+	var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
+
+	console.log("Requesting: " + url);
+
+	setTimeout(function(){
+		cb(fake_responses[url]);
+	},randomDelay);
+}
+
+function output(text) {
+	console.log(text);
+}
+
+// **************************************
+// The old-n-busted callback way
+
+function getFile(file) {
+	fakeAjax(file,function(text){
+		fileReceived(file,text);
+	});
+}
+
+function fileReceived(file,text) {
+	// haven't received this text yet?
+	if (!responses[file]) {
+		responses[file] = text;
+	}
+
+	var files = ["file1","file2","file3"];
+
+	// loop through responses in order for rendering
+	for (var i=0; i<files.length; i++) {
+		// response received?
+		if (files[i] in responses) {
+			// response needs to be rendered?
+			if (responses[files[i]] !== true) {
+				output(responses[files[i]]);
+				responses[files[i]] = true;
+			}
+		}
+		// can't render yet
+		else {
+			// not complete!
+			return false;
+		}
+	}
+
+	output("Complete!");
+}
+
+// hold responses in whatever order they come back
+var responses = {};
+
+// request all files at once in "parallel"
+getFile("file1");
+getFile("file2");
+getFile("file3");
diff --git a/frontend-masters-exercises/exercises/ex1/ex1.html b/frontend-masters-exercises/exercises/ex1/ex1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Exercise 1</title>
+</head>
+<body>
+<h1>Exercise 1</h1>
+
+<script src="ex1.js"></script>
+
+</body>
+</html>
diff --git a/frontend-masters-exercises/exercises/ex1/ex1.js b/frontend-masters-exercises/exercises/ex1/ex1.js
@@ -0,0 +1,77 @@
+function fakeAjax(url,cb) {
+	var fake_responses = {
+		"file1": "The first text",
+		"file2": "The middle text",
+		"file3": "The last text"
+	};
+
+	var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
+
+	console.log("Requesting: " + url);
+
+	setTimeout(function(){
+		cb(fake_responses[url]);
+	},randomDelay);
+}
+
+function output(text) {
+	console.log(text);
+}
+
+// **************************************
+// The old-n-busted callback way
+let first = null
+let secondStatus = 0
+let second = null
+letthirdStatus = 0
+let third = null
+
+function getFile(file) {
+	fakeAjax(file,function(text){
+		// what do we do here?
+  if(file === "file1") {
+    first = "done"
+    output(text)
+    if(secondStatus === 1) {
+      output(second)
+      second = "done"
+    }
+    if(second === "done" && thirdStatus === 1) {
+      output(third)
+    }
+  }
+
+  if(first !== "done" && file === "file2") {
+    secondStatus = 1
+    second = text
+  }
+
+  if(first === "done" && file === "file2") {
+    second = "done"
+    output(text)
+    if(thirdStatus === 1) {
+      output(third)
+    }
+  }
+
+  if(second !== "done" && file === "file3") {
+    thirdStatus = 1
+    third = text
+  }
+
+  if(second === "done" && file === "file3" ) {
+    third = "done"
+    output(text)
+  }
+
+
+	});
+}
+
+// request all files at once in "parallel"
+console.log("FILE 1")
+getFile("file1");
+console.log("FILE 2")
+getFile("file2");
+console.log("FILE 3")
+getFile("file3");
diff --git a/frontend-masters-exercises/exercises/ex10/README.md b/frontend-masters-exercises/exercises/ex10/README.md
@@ -0,0 +1,13 @@
+# Instructions
+
+1. In this exercise, we're going to practice what we've learned about various async patterns so far, using the challenging "A Tale Of Three Lists" demos.
+
+2. Study the similarities/differences of the `ui.js` and `feeds.js` files on the repo (https://github.com/getify/a-tale-of-three-lists#compared-patterns), between these versions: "Plain Callbacks", "Thunks", "Promises", and "Promises+Generators".
+
+   Then look at the version of the `ui.js` and `feeds.js` files as included in this exercise, which correspond to the "asynquence Flavored" demo version on the repo.
+
+3. Pick either reactive sequences or CSP -- whichever you feel most comfortable with or want most practice with -- and modify the `ui.js` and `feeds.js` files to use the appropriate concepts. For reactive sequences, you'll be creating sequences for each type of event and subscribing to them. For CSP, you'll be creating channels for the same.
+
+   If you have time and want a real challenge, try both versions!
+
+4. Compare your approach to the "Reactive Sequences" and/or "CSP" demo versions on the repo (https://github.com/getify/a-tale-of-three-lists#compared-patterns).