JavaScript Roadmap

Asynchronous JavaScript

1. JSON

Before jumping in the Async JavaScript world, make sure you understand what JSON is, we use it A LOT to consume and transmit data.

Example

{
  "students": [ 
     { 
        "id":"102", 
        "name": "Douglas", 
        "lastname": "Crockford" 
     }, 
     { 
        "id":"103", 
        "name": "Nick", 
        "lastname": "Johnson" 
     } 
  ]   
}

2. Asynchronous JavaScript

Asynchronous JavaScript is everywhere on the web.

3. Fetching data

The retired XMLHttpRequest

It's important to know that before the Fetch API was released, another interface was widely used instead to fetch data: the XMLHttpRequest (XHR).

You will probably come across it when working on existing codebases or technical documentation that have not yet migrated to the new Fetch API.

The good news is that it works very similarly to the Fetch API, so you won't have to put forth any extra effort to learn/understand it.

In the brilliant video below (over 21K likes, wow!), the author reviews some fundamental concepts and uses XHR to fetch data:

How about recreating this project in two different versions? One with XMLHttpRequest and another one with fetch to reinforce your learning?