Creating a UI for Visual Reactive Programming
Flow-based programming (FBP) as a visual programming language is arguably one of the most understandable tools for communicating data flow of synchronous processes, addressing
How are processes wired together?
This article aims to lay out the challenges of leveraging this concept by going full reactive and answering the question of
When are processes executed?
A Synchronous Process with FBP
The following graph of a simple calculation can be understood by most and does not require proficiency in any programming language.
const add = (a, b) => a + b; const multiply = (a, b) => a * b; const result = multiply(add(4, 7), 2); // 22
Given this example, the benefits of FBP become clear:
- There are fewer ways of implementing a solution
- Bugs are unlikely
- Increased productivity
- Better readability
Let us try to visualize a simple game using FBP:
The direction of a spaceship is controlled by user input (left or right). The spaceship should continuously move in that direction until the direction is changed.
At this point it is unclear as to how this graph should be interpreted. When is Update Position called? On every tick or just when the direction changes? How can we describe the behavior we are trying to achieve visually?
const pressLeft = controllerInput.pipe(ofType('left')); const pressRight = controllerInput.pipe(ofType('right')); const keyPress = merge(pressLeft, pressRight); const tick = interval(1000 / 20); const speed = .01; const position = tick.pipe( withLatestFrom(keyPress), map(([, key]) => key === 'left' ? -1 : 1), map(dir => dir * speed), scan((posX, updateX) => posX + updateX, 0), );
Proposal for a UI for Reactive Programming
When is B executed?