Interactive marble diagrams

[staltz]

One basic question: where should the interactive marble diagrams be placed on the website? Under a dedicated section? One interactive diagram under each documented operator? Somewhere else?

That's important to know because it affects how I should adapt http://staltz.github.io/rxmarbles to this website.

[headinthebox]

That's a good question. I would say (not sure how hard that is), one with each operator, and then have a "playground" where you can do your own operator.

[staltz]

That sounds doable.

When you say "do your own operator", what exactly do you refer to? Combining operators (e.g., filter + map + scan), or 'lifting' your own custom operator? I imagine the second option requires a code editor where you can input JS code to define the operator.

[staltz]

Version 0.2.0 of RxMarbles is ready: http://staltz.github.io/rxmarbles
This is a beta version, so soon it'll reach a stable enough state. Let me know, @benjchristensen or Erik whether the core feature of interacting with the diagrams should improve somehow.

There are some things on the roadmap, like (1) rendering metastreams (observables of observables) and the corresponding examples such as window, groupBy, etc; (2) rendering the output of a buffer operation; (3) allow adding or removing items from an input stream.

I'm trying to keep it as a sandbox for each operator, rather than a full-blown Observable WYSIWYG editor. For instance, one thing that people might want to experiment with is chaining operators. For some examples it's simple, for instance for a map().filter().scan(), however it gets very complicated if we want to allow arbitrary combinations, since there might be a tree of Observables involved, for instance source.map().filter().sample(sampleObservable). You can't render that setting as a top-to-bottom diagram, it's tree shaped.

Another thing is that we could allow the user to edit the code for the operator, in the operator box in the diagram. I'm imagining it could work for some cases, but I'm not yet sure how to solve the potential problems with regard to all the operator coding possibilities.

[staltz]

I'm this > < close to making a web component <x-rxmarbles key="debounce"> for RxMarbles, enabling a very easy way to embed it in this website's docs.

More news very soon.

[DavidMGross]

[Like]

On Sat, Feb 7, 2015 at 9:10 AM, André Staltz notifications@github.com
wrote:

I'm this > < close to making a web component
for RxMarbles, enabling a very easy way to embed it in this website's docs.

More news very soon.

—
Reply to this email directly or view it on GitHub
#13 (comment)
.

David M. Gross
PLP Consulting

[benjchristensen]

Sounds great!

[staltz]

Done in PR #87

Just like RxMarbles.com, it doesn't have all the operators since some are more complicated (observable of observables, or contains an error, etc). But works like a charm as a Web Component.

Related staltz/rxmarbles#1

Looks like this:

[benjchristensen]

Very nice.

[staltz]

It's merged into develop, so I think I'll close this one. We can do continuous improvements through other issues. Such as #88