A TypeScript Playground for RX JS
This is a playground for RxJS, a library for reactive programming using Observables that make it easier to compose asynchronous or callback-based code. The playground supports editable as well as computed observables. Events of editable observables can be created with a single click and dragged around, while computed observables are expressed in type-checked JavaScript (also known as TypeScript) and can refer to other observables.
Core of this playground is the RxJs
VirtualTimeScheduler
that is used to immediately process delayed observables.
The Monaco Editor is used as editor component. The control UI is
implemented with BlueprintJs, the
visualization is rendered as plain SVG.
For technical reasons, delayed Rx operations must be
given the scheduler passed to the visualize function.
The track function can be used to track piped (intermediate) observables.
The browser url reflects the current playground model
and can be used for sharing.
Dev-Setup
Clone the project and run yarn:
git clone https://github.com/hediet/rxjs-playground.git
cd rxjs-playground
yarn
Dev-Server
To start the dev server, run:
yarn dev
and open http://localhost:8080.
Architecture
This is a rough overview of the architecture of this app:
Todos
- Improve performance
- Improve usability