Asynchronous Programming 101: From Operating Systems Class to JavaScript’s Async/Await

Introduction: From Operating Systems Lectures to Practice

Part 1: Concurrency and Parallelism in Operating Systems

1.1 What is Concurrency?

• Definition: Concurrency is about managing multiple tasks at the same time but not necessarily executing them simultaneously. In operating systems, this is often achieved through techniques like time slicing (where a single CPU core switches between 2 or more tasks) or context switching (where the state of a process is saved so it can be resumed later).

• Example: Imagine you're in a coffee shop. The barista takes an order (Task 1), starts brewing the coffee (Task 2), and while the coffee is brewing, takes another order (Task 3). The barista is managing multiple tasks concurrently, even though they’re only actively working on one task at a time. This represents a process being executed concurrently, on a single CPU-core (represented by a single Barista performing the tasks here).

• Code Analogy (Pseudocode):

function takeOrder() {
  console.log("Taking order...");
}

function brewCoffee() {
  console.log("Brewing coffee...");
}

function serveCoffee() {
  console.log("Serving coffee...");
}

// Simulating concurrency
takeOrder();
brewCoffee(); // This task takes time
takeOrder(); // The barista takes another order while coffee is brewing
serveCoffee();

1.2 What is Parallelism?

• Definition: Parallelism involves executing multiple tasks simultaneously, usually on different processors or cores. This is possible when the system has multiple CPUs or a multi-core CPU.

• Example: Imagine two baristas working side by side. Each barista represents a CPU core on a multi-core CPU. One is taking orders while the other is brewing coffee at the same time. Both tasks are happening simultaneously, which speeds up service.

• Code Analogy (Pseudocode):

function barista1() {
  console.log("Barista 1: Taking order...");
  console.log("Barista 1: Serving coffee...");
}

function barista2() {
  console.log("Barista 2: Brewing coffee...");
}

// Simulating parallelism
barista1();
barista2(); // Both baristas work at the same time, representing processes running on different CPU cores

Part 2: Transitioning from OS Theory to JavaScript

2.1 The Single-threaded Nature of JavaScript

• Explanation: JavaScript is single-threaded, meaning it can only execute one piece of code at a time. This might sound limiting, that was definitely my first thought, but JavaScript uses a clever mechanism called the event loop to manage multiple tasks efficiently without blocking the main thread. If you are new to JS, I highly recommend you get intimately familiar with it. It is extremely important across all JS-based frameworks/runtimes (React, Angular, Next.js, Node.js, you name it...).

• Event Loop: The event loop allows JavaScript to handle tasks like fetching data from a server, waiting for user input, or processing timers. It does this by queuing tasks and executing them one at a time when the main thread is available.

• Code Example:

console.log("Start");

setTimeout(() => {
  console.log("This runs after 2 seconds");
}, 2000);

console.log("End");

2.2 The Evolution of Asynchronous Programming in JavaScript

• Callbacks: Originally, JavaScript handled asynchronous operations with callbacks. A callback is a function passed to another function, which is then executed after the asynchronous operation completes.

• Callback Hell: As applications grew more complex, deeply nested callbacks led to messy and hard-to-read code, a problem known as "callback hell."

• Code Example of Callback Hell:

getUserData(userId, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});

• Promises: To improve this, JavaScript introduced promises, which represent a value that will be available in the future. Promises allow for chaining operations and better error handling.

• Async/Await: async/await was introduced to further simplify asynchronous code. It allows developers to write asynchronous operations in a way that looks synchronous, making the code easier to read and understand.

Part 3: Deep Dive into Async/Await with Practical Examples

3.1 Understanding Async/Await through Concurrency

• Async Functions: An async function is a function that always returns a promise. You use the await keyword inside this function to pause its execution until the promise is resolved.

• Concurrency with Async/Await: Just like the time slicing in an OS, async/await allows JavaScript to handle multiple tasks by pausing one operation (await) and continuing with others until the first is ready to proceed.

• Code Example:

async function fetchData() {
  const userData = await fetchUserData();
  const details = await fetchUserDetails(userData.id);
  console.log(details);
}

fetchData();

3.2 Applying Parallelism with JavaScript

• Promise.all for Parallelism: While JavaScript is single-threaded, you can achieve a form of parallelism by starting multiple promises at the same time with Promise.all. This method allows you to execute multiple promises simultaneously and wait for all of them to complete.

• Code Example:

async function fetchMultipleData() {
  const [userData, posts] = await Promise.all([fetchUserData(), fetchPosts()]);
  console.log(userData, posts);
}

fetchMultipleData();

3.3 Real-World Applications Across Frameworks

• React and useEffect: In React, managing side effects like data fetching often involves using useEffect with async/await to handle asynchronous tasks within a component. This allows your component to perform actions like fetching data from an API without blocking the UI.

• Code Example:

useEffect(() => {
  const fetchData = async () => {
    const data = await fetchSomeData();
    setData(data);
  };
  fetchData();
}, []);

• Next.js Data Fetching: Next.js enhances data fetching with methods like getServerSideProps, which often use async/await to handle server-side data before rendering a page. This is crucial for server-side rendering and ensuring that data is ready before the page is delivered to the user.

• Code Example:

export async function getServerSideProps() {
  const data = await fetchDataFromAPI();
  return { props: { data } };
}

Part 4: Putting It All Together - Async/Await as a Concurrency Tool

4.1 Async/Await in the Event Loop

• Recap: Just as the OS uses processes and threads to manage tasks concurrently, JavaScript uses the event loop with async/await to manage asynchronous operations. This ensures that long-running tasks don’t block the main thread, keeping the UI responsive.

• Code Example:

async function handleRequest() {
  const userData = await fetchUserData();
  console.log("User data fetched");

  const posts = await fetchPosts(userData.id);
  console.log("Posts fetched");

  return { userData, posts };
}

handleRequest().then(data => console.log(data));

4.2 When Not to Use Async/Await

• Performance Considerations: While async/await simplifies code, it’s not always the best choice for highly parallel tasks. In cases where you need true parallelism (e.g., CPU-intensive tasks), using tools like Web Workers might be more efficient.

• Code Example with Web Workers:

// worker.js
self.onmessage = function(event) {
  const result = heavyComputation(event.data);
  self.postMessage(result);
}

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);

worker.onmessage = function(event) {
  console.log("Result from worker:", event.data);
}

Conclusion: From Concepts to Code

• JavaScript’s Event Loop

• Concurrency / Parallellism

• Asynchronous vs Synchronous Web Programming