About Me

Creating a UI for Visual Reactive Programming

Christoph Bühler, September 2020

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.

Flow-based programming

An implementation of this graph using pure functions in JavaScript:

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

Introducing Asynchronicity

Icon made by Freepik from www.flaticon.com

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.

Asynchronicity in FBP

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?

In RxJS terminology we would use the merge operator for changing the direction and withLatestFrom for updating the position. One possible way of implementing our game with RxJS:

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?

Input State

Examples