# ContextJS Promises -- Reification of Asynchronous Context in JavaScript

## Introduction
- Background
  - Non-linear asynchronous control flow flow as forced by modern browsers make the make Web-sites more responsive, but the code harder to write and read. This is also known as the call-back-hell. 
  - Promises and the support of new syntax in form of `async` and `await` keywords in the language make JavaScript programs bring the write and readability on par with non call-back code. 
- Call stack as a form of reification of execution context that helps during development 

## Motivation
- Even though the static and lexical readability is back, (e.g. try catch works... await in for loops works), the dynamic behavior of a program is still asynchronous and development practices such that worked in non async code (call stacks, logging) cannot be applied. 
- Motivating Example
  - (reordering scrambled asynchronous log messages caused by Promises)
  - We found that understanding the dynamic loading of JavaScript modules (through SystemJS and async fetch request) was quite challenging.
  - We had problems with:
    - measuring how long a module takes for loading
    - what its dependencies are
    - what error, warning, and log messages belonged to which module and to which initial module loading request do they belong
  - These problems are caused by a lack of structure in the dynamic execution. Even though promises maintain a separate dependency graph, orthogonal to the call graph created by method and function invocations, they are not directly available at run-time on well supported by browser development tools 

## Approach
- Providing dynamic structure / context through COP / ContextJS 
- By using COP, we made Promises context-aware and used this to maintain dynamic structure in asynchronous code. 
- Example: loading a directory tree (and printing progress)
  - sync version (using await can force async code, so that dynamic behavior resembles lexical structure)
  - async version

## Implementation
- Port from Lively Kernel class system to native JavaScript classes
- We used ContextJS to make Promises maintain their layer activations

## Evaluation
- Using Promise Log Layers to better understand Lively4 boot process and module loading

## Related Work

- Plain ContextJS
- Debugging Callback Hell ?
- Debugging Promise Support in Chrome Development Tools
  - Why is there not Call Stack in debugger?
    - or is there, and we did not find it yet? #Research
- Reification of Async Dependencies.
  - Providing a Call Stack for Debugging?
- Debugging with a Call-Stack
- Printf debugging / Logging / Tracing / 
- Appeltauer JCop Events?
- EventCJ?

## Conclusion 
- The approach is not fully transparent, because it requires the developer to choose a scope...
- the behavior of the system is still async and dynamic, but the developers have more control through better reification of dynamic structure 
- Refining constructor calls in JavaScript is ugly at the moment