Fundamentals of Backend and Blockchain Development

class: middle, center
## CSBC 1000 - Fundamentals of Backend and Blockchain Development

### Class 8: Building a NodeJS Backend - II

*Dhruvin Parikh*

---
## Class Plan
* Javascript runtime
* Call stack
* Stack overflow
* Event loops
* External APIs
---

<div id="js-runtime-overview">
    <div class="js-runtime">
        <div class="heap">
            Heap
            <div class="heap-obj heap-obj1"></div>
            <div class="heap-obj heap-obj2"></div>
            <div class="heap-obj heap-obj3"></div>
        </div>
        <div class="stack">
            Stack
            <div class="stack-obj-container">
                <div class="stack-obj">baz()</div>
                <div class="stack-obj">bar()</div>
                <div class="stack-obj">foo()</div>
                <div class="stack-obj">main()</div>
            </div>
        </div>
    </div>
    <img class="event-loop" src="event-loop.png" />
    <div class="callback-queue">
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
    </div>
    <div class="external-apis">
        <div class="api">setTimeout</div>
        <div class="api">I/O</div>
        <div class="api">Rendering</div>
    </div>
    <div class="event-loop-label">Event Loop</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="js-runtime-label">JS Runtime</div>
    <div class="external-apis-label">External APIs</div>
</div>

---
#Call Stack

* Currently executing code
* Javascript has exactly 1 callstack
* Hence why commonly explained as single threaded
<br/>(Example in next slide)
---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack"></div>
    <div class="codes">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">printUsername()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code on-stack">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack on-stack">
        <div class="call-stack-container">
            <div class="call">combineNames()</div>
            <div class="call">printUsername()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code on-stack">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code on-stack">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack on-stack">
        <div class="call-stack-container">
            <div class="call">concat()</div>
            <div class="call">combineNames()</div>
            <div class="call">printUsername()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code concat-code on-stack">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code on-stack">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code on-stack">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack on-stack">
        <div class="call-stack-container">
            <div class="call">printUsername()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code on-stack">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack on-stack">
        <div class="call-stack-container">
            <div class="call">console.log()</div>
            <div class="call">printUsername()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code on-stack">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack on-stack">
        <div class="call-stack-container">
            <div class="call">printUsername()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code on-stack">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack on-stack">
        <div class="call-stack-container">
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
        </div>
    </div>
    <div class="codes">
        <pre class="code concat-code">
function concat(str1, str2) {
    return str1 + "" + str2;
}
        </pre>
        <pre class="code combine-code">
function combineNames(user) {
    return concat(user.first,
                  user.last);
}
        </pre>
        <pre class="code print-code">
function printUsername(user) {
    var name = combineNames(user);
    console.log(name);
}
        </pre>
        <pre class="code">
printUsername({
    first: "John",
    last: "Doe"
});
        </pre>
    </div>
</div>

---
class: middle, center
##Stack Overflow

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
        </div>
    </div>
    <div class="codes">
        <pre class="code foo-code">
function foo() {
    return foo();
}
        </pre>
        <pre class="code">
foo();
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code foo-code">
function foo() {
    return foo();
}
        </pre>
        <pre class="code">
foo();
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code foo-code on-stack">
function foo() {
    return foo();
}
        </pre>
        <pre class="code">
foo();
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code foo-code on-stack">
function foo() {
    return foo();
}
        </pre>
        <pre class="code">
foo();
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code foo-code on-stack">
function foo() {
    return foo();
}
        </pre>
        <pre class="code">
foo();
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code foo-code on-stack">
function foo() {
    return foo();
}
        </pre>
        <pre class="code">
foo();
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code foo-code on-stack">
function foo() {
    return foo();
}
        </pre>
        <pre class="code">
foo();
        </pre>
    </div>
</div>

---

<div class="call-stack-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">foo()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="codes on-stack">
        <pre class="code foo-code on-stack">
function foo() {
    return foo();
}
        </pre>
        <pre class="code">
foo();
        </pre>
    </div>
    <img class="fail" src="explosion.png" />
    <img class="error" src="stackoverflow.png" />
</div>

---
layout: false
class: middle, center, inverse
#The Event Loop and friends

---
<div id="js-runtime-overview">
    <div class="js-runtime">
        <div class="heap">
            Heap
            <div class="heap-obj heap-obj1"></div>
            <div class="heap-obj heap-obj2"></div>
            <div class="heap-obj heap-obj3"></div>
        </div>
        <div class="stack">
            Stack
            <div class="stack-obj-container">
                <div class="stack-obj">baz()</div>
                <div class="stack-obj">bar()</div>
                <div class="stack-obj">foo()</div>
                <div class="stack-obj">main()</div>
            </div>
        </div>
    </div>
    <img class="event-loop" src="event-loop.png" />
    <div class="callback-queue">
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
    </div>
    <div class="external-apis">
        <div class="api">setTimeout</div>
        <div class="api">I/O</div>
        <div class="api">Rendering</div>
    </div>
    <div class="event-loop-label">Event Loop</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="js-runtime-label">JS Runtime</div>
    <div class="external-apis-label">External APIs</div>
</div>

---
<div id="js-runtime-overview">
    <div class="js-runtime">
        <div class="heap">
            Heap
            <div class="heap-obj heap-obj1"></div>
            <div class="heap-obj heap-obj2"></div>
            <div class="heap-obj heap-obj3"></div>
        </div>
        <div class="stack">
            Stack
            <div class="stack-obj-container">
                <div class="stack-obj">baz()</div>
                <div class="stack-obj">bar()</div>
                <div class="stack-obj">foo()</div>
                <div class="stack-obj">main()</div>
            </div>
        </div>
    </div>
    <div class="js-runtime-gray"></div>
    <img class="event-loop" src="event-loop.png" />
    <div class="callback-queue">
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
        <div class="callback">cb</div>
    </div>
    <div class="external-apis">
        <div class="api">setTimeout</div>
        <div class="api">I/O</div>
        <div class="api">Rendering</div>
    </div>
    <div class="event-loop-label">Event Loop</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="js-runtime-label">JS Runtime</div>
    <div class="external-apis-label">External APIs</div>
</div>

---
#Callback/Task Queue

* Holds the list of tasks/callbacks to be executed next
* Is unbounded (can grow infinitely long)
* Multiple ways to add things to it
    - setTimeout(fn, 0);
    - setImmediate(fn);
    - nextTick(fn);

---
#External APIs
* Do everything not Javascript related
* Can use other threads
* Examples of External APIs
    - Network I/O
    - Rendering Calls
    - Timeouts/Intervals
    - File System Access
    - C++ code
    - Web Workers

---
#Event Loop

* Loop that waits for and dispatches events from the callback queue to the callstack
* Only dispatches when callstack is empty
* You have no control over this

---
class: middle, center
##Async example

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

console.log("Waiting for timeout");
```
</div>
    <pre class="console">
    </pre>
    <div class="callback-queue">
    </div>
    <img class="event-loop" src="event-loop.png" />
</div>

---

<div class="js-runtime-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="external-apis-label">External APIs</div>
    <div class="console-label">Console</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="external-apis">
        <div class="api-container">
        </div>
    </div>
    <div class="codes">

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

console.log("Waiting for timeout");
```
</div>
    <pre class="console">
    </pre>
    <div class="callback-queue">
    </div>
    <img class="event-loop" src="event-loop.png" />
</div>

---

<div class="js-runtime-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="external-apis-label">External APIs</div>
    <div class="console-label">Console</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">setTimeout()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="external-apis">
        <div class="api-container">
        </div>
    </div>
    <div class="codes">

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

console.log("Waiting for timeout");
```
</div>
    <pre class="console">
    </pre>
    <div class="callback-queue">
    </div>
    <img class="event-loop" src="event-loop.png" />
</div>

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

console.log("Waiting for timeout");
```
</div>
    <pre class="console">
    </pre>
    <div class="callback-queue">
    </div>
    <img class="event-loop" src="event-loop.png" />
</div>

---

<div class="js-runtime-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="external-apis-label">External APIs</div>
    <div class="console-label">Console</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">console.log()</div>
            <div class="call">(Anonymous Function)()</div>
        </div>
    </div>
    <div class="external-apis">
        <div class="api-container">
            <div class="api">
                setTimeout
                <img src="spinner.gif" />
                <div class="cb">doTimeout</div>
            </div>
        </div>
    </div>
    <div class="codes">

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

console.log("Waiting for timeout");
```
</div>
    <pre class="console">
    </pre>
    <div class="callback-queue">
    </div>
    <img class="event-loop" src="event-loop.png" />
</div>

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

console.log("Waiting for timeout");
```
</div>
    <pre class="console">
Waiting for timeout
    </pre>
    <div class="callback-queue">
    </div>
    <img class="event-loop" src="event-loop.png" />
</div>

---

<div class="js-runtime-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="external-apis-label">External APIs</div>
    <div class="console-label">Console</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="call-stack">
        <div class="call-stack-container">
        </div>
    </div>
    <div class="external-apis">
        <div class="api-container">
            <div class="api">
                setTimeout
                <img src="spinner.gif" />
                <div class="cb">doTimeout</div>
            </div>
        </div>
    </div>
    <div class="codes">

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

console.log("Waiting for timeout");
```
</div>
    <pre class="console">
Waiting for timeout
    </pre>
    <div class="callback-queue">
        <div class="cb">doTimeout</div>
    </div>
    <img class="event-loop" src="event-loop.png" />
</div>

---

<div class="js-runtime-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="external-apis-label">External APIs</div>
    <div class="console-label">Console</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">doTimeout()</div>
        </div>
    </div>
    <div class="external-apis">
        <div class="api-container">
        </div>
    </div>
    <div class="codes">

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

---

<div class="js-runtime-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="external-apis-label">External APIs</div>
    <div class="console-label">Console</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">console.log()</div>
            <div class="call">doTimeout()</div>
        </div>
    </div>
    <div class="external-apis">
        <div class="api-container">
        </div>
    </div>
    <div class="codes">

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

---

<div class="js-runtime-viz">
    <div class="call-stack-label">Call Stack</div>
    <div class="external-apis-label">External APIs</div>
    <div class="console-label">Console</div>
    <div class="callback-queue-label">Callback Queue</div>
    <div class="call-stack">
        <div class="call-stack-container">
            <div class="call">doTimeout()</div>
        </div>
    </div>
    <div class="external-apis">
        <div class="api-container">
        </div>
    </div>
    <div class="codes">

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

console.log("Waiting for timeout");
```
</div>
    <pre class="console">
Waiting for timeout
Timeout complete
    </pre>
    <div class="callback-queue">
    </div>
    <img class="event-loop" src="event-loop.png" />
</div>

```
function doTimeout() {
    console.log("Timeout complete");
}

setTimeout(doTimeout, 5000);

---
class: middle, center
##Browser - Element onClick