Embeddable rxmarbles

[xgrommx]

Hello @staltz

I'm working on a book http://xgrommx.github.io/rx-book. Can I use your interesting work in my book for visualization operators of RxJs.

[staltz]

Hi @xgrommx, sure! Actually rxmarbles will be part of the upcoming "official" documentation reactivex.io (see https://github.com/ReactiveX/reactivex.github.io/issues/1#issuecomment-51230987), so I already have to adapt rxmarbles to be easily embeddable into other pages.

Currently it's not in a state that you can easily place it inside a page, but that's a feature I will build, at least for reactivex.io. The embeddable part would be only the diagram (the white box), without the surrounding title and menu. Would that be good for your book, too?

[xgrommx]

Sure, I just need visualize a stream maybe by a json config. Now I have only interactivity via jsbin. In future I would like create visualizing streams and rxmarbles is good approach as for me. More interactive, more useful =) When do you plan create simple embedding for page? Is it will be like a json config?

I want create a very interactive book for simple learning for complicated RxJs.

[xgrommx]

Can I use it now just like an embedding and use a config through json?

[staltz]

I'm not sure how the API "config through JSON" would look like, do you want to suggest a friendly API design?

The page can be embedded as it is now using an iframe, and you can use URL hash tag to choose which operator example. For instance http://rxmarbles.com/#map and http://rxmarbles.com/#sample

As for the roadmap, I plan to make the embedding feature for v1.2.0, see here: https://github.com/staltz/rxmarbles/blob/master/TODO . Currently I'm fixing some issues to prepare v1.0.0, the first public release.

[xgrommx]

I have some another question. Why you don't use ReactJs Facebook?

[staltz]

I started building this in Facebook's React, and I hated their API. I ended up removing it, see this commit: https://github.com/staltz/rxmarbles/commit/db5235d7430d399088bf0d33cdd5a15e2d5571f2

Having had some experience with Reactive Programming where state handling is minimized, I really don't like their APIs. There is so much "state" everywhere, and it felt very limiting. The only good thing IMO was the virtual DOM. And I found an alternative for that, https://github.com/Matt-Esch/virtual-dom/, so no need for React.

[xgrommx]

Looks like a good. But maybe it is similar http://yang.github.io/reactive-coffee. As for me this is also interesting project. Also you could use angular with a plugin of rxjs. But maybe it is a good choise for you now. And d3js also could be helpful for drawing marbles.

[xgrommx]

Hello @staltz It's me again) I would like ask you how can I use my models?

[staltz]

Hi, what do you mean with models?

[xgrommx]

In your project exists https://github.com/staltz/rxmarbles/tree/master/src/models folder. How can I use my model which will be created by this example?

[staltz]

There isn't an easy way other than forking this repo and doing it yourself. I recommend waiting until version v1.2.0 which will address your needs.

[xgrommx]

Hello @staltz ,

When do you planned release v1.2.0?

[staltz]

When it's ready... I can't say when because I don't even know when. At the moment I'm working on rendering the complete notification.

[xgrommx]

Ok, I'll expect this version in future. Thanks.

[staltz]

Draft implementation for this:

• Make the sandbox an HTML5 custom element
• Use polyfill http://webcomponents.org/polyfills/custom-elements/
• Make an npm build script just for building the embeddable custom element

[staltz]

Done in v1.3.1 Ping @xgrommx

[xgrommx]

Awesome! Thank you @staltz. But I have one small question. How can I use my own source for rxmarbles? For example I have one stream and I want to visualize this one.

[staltz]

Can't use it yet. I would need to build it as attributes to the custom element, e.g.:

<rx-marbles inputs="[(0,10),(1,20),(3,40)],[(2,15),(4,50)]" operator="merge">

Or something like that

[xgrommx]

@staltz Looks good =) Thanks, it will be useful.