RP 2018: Seminar on Reactive Programming
- Hierarchical Data and Asynchronicity for VivideJS -
Sebastian Koall
Software Architecture Group
Hasso Plattner Institute
University of Potsdam, Germany
---
Context - Background
- Adapted System: Vivide
- Work with an OO UI
Directly working on objects
- Direct data and dataflow manipulation
- Adapt the views while exploring the data
---
Context - Motivation
- Provide data in a task-oriented form
- Lively4: Web-based live programming environment
Provide insights into the processed data
- VivideJS: Asynchronous online data processing
```javascript {.v-2-2 .example1}
[
{name: "object", subclasses:[{name: "morph"},]},
{name: "list", subclasses:[{name: "linkedlist", subclasses:[{name: "stack"}]}, {name: "arraylist"}]},
{name: "usercontrol", subclasses:[{name: "textbox"}, {name: "button"}, {name: "label"}]},
]
```
---
Features - Async Scripts
- Most online resources are asynchronously accessed
- VivideJS needs to support async/await scripts
```javascript {.v-2-2 .example2}
lively.findDependedModules('https://lively-kernel.org/lively4/lively4-thulur/src/client/lively.js')
```
---
Features - Multilevel Hierarchies
- Explore hierarchical data relations
- Different scripts hierarchy levels
- Define arbitrary children of objects
```javascript {.v-2-2 .example3}
fetch('https://lively-kernel.org/lively4/lively4-thulur/', {method: 'OPTIONS'})
.then(r => r.json())
.then(j => j.contents);
```
---
Insights
- OO UIs are great for data exploration
- Deferred architecture changes are possibly harmful
- Javascript asynchronity is not easy to hide
- Resource pointers do not point to the actual object
---
Shortcomings
- Limited number of widgets
- List widget
- Tree widget
- Box plot widget
- Views await whole amount of data
No streaming
- Connection management
- Difficult to explore data structures
- Merging source views
- Some remaining UI bugs (e.g. loop marker length)
---
Next Steps And Future Work
- Bug fixing
- Source widget merging strategies
- Further widgets
- Connection management between views
- Long-term: Integrate Vivide into Lively
E.g.: Replace file browser with Vivide view
---
# Close
---
Implementation
