# Motivation

- analyzing / debugging the asynchronous JavaScript module loading with SystemJS
  - modern JavaScript modules form a dependency graph with import and export that has to be resolved at run-time during development (and in our Lively4 development environment)
  - the modules / files form a familiar hierarchy that is hard to follow in dynamic execution of the module loading
    - the dependency hierarchy is not lost at run-time 
  - We wanted to ask several questions:
    - How long does it take to load a "module" and its dependent modules
    - How to the modules depend on each other at run-time?
    - What log messages occurred during the module loading and which don't?
    
- More simplified example (since SystemJS and module loading are very meta....)
  - create recursive directory tree

```javascript
fetch(lively4url + "/doc", { method: "OPTIONS"}).then(r => r.text())
````


```javascript
{
  "type": "directory",
  "contents": [
    {
      "type": "directory",
      "name": "PX17",
      "size": 0
    },
    {
      "type": "file",
      "name": "code.md",
      "size": 344
    },
    // ...
  ]
}
```
Helper function

```javascript
lively.openWorkspace().then(ws => {
  ws.id = "LOG"
  ws.mode = "text/plain"
})

function clearLog() {
  document.body.querySelector("#LOG").value = ""
}

function log(s) {
  s = s.replace(lively4url,"")
  document.body.querySelector("#LOG").value += s +" \n"
}
```

Traverse directories ansync with promises:

```javascript
async function tree(url) {
  log("tree " + url)
  var result = await fetch(url, { 
    method: "OPTIONS"
  }).then(r => r.json())  
  if (result.contents) {
    for(var ea of result.contents) {
      if (ea.type == "directory") {
        tree(url + "/" + ea.name).then(resp => {
          ea.contents = resp.contents
        })
      }
    }
  }
  return result
}

clearLog()
tree(lively4url + "/doc")
```

Aysnc problem: when is the result ready?


```
tree /doc 
tree /doc/PX17 
tree /doc/PX2018 
tree /doc/RP2018 
tree /doc/SWD2015 
tree /doc/SWD2016 
tree /doc/WebDev2016 
tree /doc/WebDev2017 
tree /doc/figures 
tree /doc/files 
tree /doc/journal 
tree /doc/manual 
tree /doc/notes 
tree /doc/tutorial 
tree /doc/PX17/notes 
tree /doc/PX2018/media 
tree /doc/PX2018/project_2 
tree /doc/PX2018/project_1 
tree /doc/PX2018/project_3 
tree /doc/PX2018/project_4 
tree /doc/PX2018/project_5 
tree /doc/PX2018/project_6 
tree /doc/RP2018/vivide-js 
tree /doc/WebDev2017/project_1 
tree /doc/WebDev2017/project_2 
tree /doc/WebDev2017/project_4 
tree /doc/WebDev2017/project_3 
tree /doc/WebDev2017/project_5 
tree /doc/WebDev2017/project_7 
tree /doc/WebDev2017/project_6 
tree /doc/WebDev2017/project_8 
tree /doc/tutorial/reactive 
tree /doc/PX2018/project_2/meeting 
tree /doc/PX2018/project_2/presentation 
tree /doc/PX2018/project_2/notices 
tree /doc/PX2018/project_1/midterm-presentation 
tree /doc/PX2018/project_6/img 
tree /doc/RP2018/vivide-js/meeting 
tree /doc/RP2018/vivide-js/presentation 
tree /doc/WebDev2017/project_4/handwriting 
```


Traverse directories ansync with waiting on promises, forcing it to the domain structure....:

```javascript

async function tree(url) {
  log(url)
  var result = await fetch(url, { 
    method: "OPTIONS"
  }).then(r => r.json())  
  if (result.contents) {
    for(var ea of result.contents) {
      if (ea.type == "directory") {
        ea.contents = (await tree(url + "/" + ea.name)).contents
      }
    }
  }
  return result
}
clearLog()
tree(lively4url + "/doc")
```

The log of "await" keyword forces the tree walking algorithm to traverse the directory in depth-first order, resulting in a tree that resembles the domain structure.

```
/doc 
/doc/PX17 
/doc/PX17/notes 
/doc/RP2018 
/doc/RP2018/vivide-js 
/doc/RP2018/vivide-js/meeting 
/doc/RP2018/vivide-js/presentation 
/doc/PX2018 
/doc/PX2018/media 
/doc/PX2018/project_1 
/doc/PX2018/project_1/midterm-presentation 
/doc/PX2018/project_3 
/doc/PX2018/project_2 
/doc/PX2018/project_2/meeting 
/doc/PX2018/project_2/notices 
/doc/PX2018/project_2/presentation 
/doc/PX2018/project_4 
/doc/PX2018/project_5 
/doc/PX2018/project_6 
/doc/PX2018/project_6/img 
/doc/SWD2015 
/doc/SWD2016 
/doc/WebDev2016 
/doc/WebDev2017 
/doc/WebDev2017/project_1 
/doc/WebDev2017/project_2 
/doc/WebDev2017/project_3 
/doc/WebDev2017/project_5 
/doc/WebDev2017/project_4 
/doc/WebDev2017/project_4/handwriting 
/doc/WebDev2017/project_6 
/doc/WebDev2017/project_7 
/doc/WebDev2017/project_8 
/doc/figures 
/doc/files 
/doc/journal 
/doc/manual 
/doc/notes 
/doc/tutorial 
/doc/tutorial/reactive 
```

But forcing the algorithm into sync behavior to better understand it is a different approach....