/asynchronous-programming

Event Loop, callbacks, promises, API's

Primary LanguageHTMLMIT LicenseMIT

Asynchronous Programming

"Synchronous basically means that you can only execute one thing at a time. Asynchronous means that you can execute multiple things at a time and you don't have to finish executing the current thing in order to move on to next one."

"The Internet", "The Web", "Web Apps". All of these terms describe something that is interconnected. If you zoom out a bit, the entire internet is basically billions of computers all sharing information and software! But so far your projects have been all alone on your computer :(

Everything you have learned so far happens on the callstack, everything on the callstack executes synchronously. Synchronous means that each line of code will finish executing before the next one starts. Think of infinite loops, your browser freezes because nothing else can happen while the loop is looping!

What makes web development so cool is the ... web. Being able to build applications that connect computers form across the internet. This also introduces some challenges, it can take some time for computers to talk to each other across the internet. You don't want your apps freezing while you wait to hear back from another computer.

Enter asynchronous programming: writing code that tells your browser to start one task and move on to a new task while you wait for the first to finish. This is possible because of the Event Loop.

Contents

Getting Started

How to study the code in this repo.

You will need NPM and nvm on your computer to study this material

Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome

  1. Install or update the study-lenses package globally
    • npm install -g study-lenses (if you do not have it already)
    • npm update -g study-lenses (if you already have it installed)
  2. Clone this repository:
    • git clone git@github.com:HackYourFutureBelgium/asynchronous-programming.git (SSH) (recommended)
    • git clone https://github.com/HackYourFutureBelgium/asynchronous-programming.git (HTTPS)
    • gh repo clone HackYourFutureBelgium/asynchronous-programming (GH CLI)
  3. cd into the repository
    • cd asynchronous-programming
  4. Run the study command from your CLI
    • study
  5. The material will open in your default browser, you're good to go!

If you have a windows computer and get this error:

  • ... /study.ps1 cannot be loaded because running scripts ...

follow the instructions in this StackOverflow answer, that should take care of it ; )

Running Tests

This repository has two test scripts:

  • npm run test:esm -- ./path/to/file.js: used for testing ES Module files in the /browser directory
  • npm run test:cjs -- ./path/to/file.js: used for testing CommonJS files in the /node directory

TOP

Learning Objectives

  • 🥚 You understand the JavaScript Event Loop, and can demonstrate this by using setTimeout and setInterval to schedule simple tasks.
  • 🥚 You can explain why Asynchronous Programming is important for programs that have blocking and non-blocking tasks.
  • 🥚 You can explain the basics of the Client/Server model and HTTP requests and can fetch data from RESTful APIs.
  • 🥚 You can convert built-in Node modules from consuming callbacks being promises.
  • 🐣 You can write and run JavaScript for Node.js or for the Browser. Both environments run JavaScript but they have some important differences!
    • use cases: You can explain some use cases that are unique to each runtime.
    • built-in APIs: You can list some of the key APIs available in each environment, and why they are not available in the other.
    • module systems: You can explain the difference between CommonJS Modules in Node.js and ES Modules in the Browser. You can write and use programs written with either system.
  • 🐣 You can break down an asynchronous problem into smaller tasks and solve it using promises. This includes identify which tasks depend on each other and which are independent:
    • dependent tasks: The return value from one task is required to start the next task, these must be completed in a specific order - .then
    • independent tasks: These tasks do not use each other's return values, they can be completed at the same time - Promise.all
  • 🐣 You can trace, refactor and write code that accesses the file system between these 3 different syntaxes:
    1. Callbacks
    2. Promises
    3. async/await
  • 🐣 You can step through a Node.js command line application using the VSCode debugger.
  • You can write small programs with a Data Access layer that asynchronously uses data stored in different locations:
    • 🐣 Browser: You can write a small web page that fetches data from a RESTful API and renders it into the DOM.
    • 🐥 Node: You can write a small CLI program that reads user input from process.argv and reads/writes the file system.

TOP

Suggested Study

References and Practice to help you master this module.

expand/collapse

in ths repo

  • /browser
    • 🥚 /the-event-loop: Learn what the JavaScript Event Loop is and how to visualize it. There are some tools that can help step through asynchronous code, but they will not work for all the code you write.
    • 🐣 /isolate: Explore different ways to write and use asynchronous code in JS from setTimeout/setInterval, to Promises to async/await
    • 🐣 /promistaurant: Practice solving asynchronous problems by working in a restaurant. You will need to figure out how you can complete people's orders when all the tasks take different amounts of time and may or may not depend on each other.
    • 🐣 /api-calls: Learn how to fetch data from external APIs by modifying a template API Call function.
    • 🐣 /fetch-and-render: Practice fetching data from an API and rendering it asynchronously into a user interface.
  • /node
    • 🥚 /commonjs-modules: Node.js hasn't always used import/export, it used require/module.exports. Explore some examples to understand how this works.
    • 🥚 /process-argv: learn to use process.argv to get user input from the command line. you won't need this to write an API, but it's simple enough and helps to understand how command line tools work.
    • 🐣 /file-system: practice using the fs module with callbacks, promises and async/await.

The Event Loop

Callbacks, Promises, Async

APIs

fetch

Debugging Node in VSCode

Node.js


TOP

Week 1

The Event Loop!

expand/collapse

Before Class

During Class

Before Break

After break

After Class

independent study

No project this week! This week you should focus on studying:

  • The Event Loop.
    • Reverse-engineering stopwatch.net with setTimeout, setInterval, clearTimeout and clearInterval is a good challenge if you're looking for one. (A single script.js file is ok, no need for full architecture)
  • Promises
    • ./browser/promistaurant will help you understand how to solve asynchronous problems by thinking about what tasks need to be done in a specific order and which tasks can be done at the same time.
  • async/await

TOP

Week 2

expand/collapse

Before Class

During Class

Before Break

After Break

After Class


TOP

Week 3

expand/collapse

Before Class

During Class

After Class


TOP

Class Recordings

  • Students: Here you can find recordings of this module from past classes. Enjoy!
  • Coaches: When sending your PR's with links please ...
    • Indicate which class you were teaching
    • Which week it was (if the module is more than 1 week)
    • Give your name
    • and a helpful description

Class 7 & 8

Anthony, Kevin

  1. week 1:
  2. week 2:
  3. week 3:

class-9-10

Bram, Deni

  1. week 1:
  2. week 2:
  3. week 3:

class-11-12

Bram, Thibault

  1. week 1: Scheduling & The Event Loop. setTimeout, setInterval
  2. week 2: Promises & fetch
  3. week 3: async/await & fetch

Class 13-14

  1. week 1 - by Yoshi and Joel:
  1. week 2 - by Yoshi: