Giter VIP home page Giter VIP logo

observable-playground's Introduction

RxJS, KefirJS, BaconJS marble diagram playground

https://thinkrx.io

Reactive

The playground is agnostic of the library api, so apart from RxJS you can also run kefirjs, baconjs and hopefully this soon

Time-bending

No matter how long your observables would delay or iterate — environment for the scripts is tweaked to run the scripts in a syncronous way

So you'll get results instantly!

Please, see mock-delayed-execution.js for details

Chart api for the examples

Chart api is exposed via require('api/v0.3'), e.g. for RxJS:

const { rxObserver } = require('api/v0.3');
const { timer } = require('rxjs');

const observer = rxObserver('Title')

timer(5).subscribe(observer);

This example will draw a timeline on the chart, with an event at 5ms [ '----o ].

Returned rxObserver implements Observer interface:

  • next — will draw an event mark [ --o-- ]

  • error — will draw an error mark [ --x ]

  • complete — will draw an end mark [ --| ]

Therefore

interval(2).pipe(
  take(4)
)
  .subscribe(rxObserver('source$'));

will output

source$

'-o-o-o-o|

E.g. rxjs-interval

Contributing

You're welcome to participate in this project!

Just check the issues tab at the top and find one that you want to work with, then:

git clone https://github.com/observable-playground/observable-playground.git
npm i
npm start

This should start a dev server.

All the examples are contained in markdown .md files, that are pretty easy to update, even via github.com itself.

NOTE: This project was bootstrapped with Create React App. You will find some information on how to perform common tasks here

Credits

This project is inspired by rxmarbles.com, learnrxjs.io and great talks by Bret Victor

Also, here's a super-awesome RxViz project — it already does much better job in most cases! Sadly, I found it after I've kickstarted this one, so... I'll pretend I never saw it :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.