ReactiveX has a nice visualizations for describing...

# coroutines

[Andrey Stepankov]

ReactiveX has a nice visualizations for describing operators called marble diagrams. I think kotlin flow needs them too. So I made this site, in Kotlin JS.
https://flowmarbles.com/

[Zach Klippenstein (he/him) [MOD]]

holy shit! this is awesome

[louiscad]

Not a fan because it doesn't show when cancellation is triggered on the emitter by the operator.
You can see the issue on the take operator: https://flowmarbles.com/#take

[Zach Klippenstein (he/him) [MOD]]

This is so much more than anything we’ve had so far though, it’s a big step in the right direction, even if there’s room for future development. Awesome work @Andrey Stepankov !

[louiscad]

@Andrey Stepankov I'd like it to show exactly where it actually takes place. In the case of take, as shown in the screenshot per your request (now deleted), and more importantly, as implemented and specified in the documentation.

Talking about the doc, there's online KDoc, it'd be really good to link it, and possibly embed it as a bonus (with an iframe to ensure it's up to date).

https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/take.html

[Andrey Stepankov]

Sry for deletion. I'm start for googling for diagram on rx. Take is not a good example. flatMapLatest can be more good. Maybe version of diagramm (see attachment) can be more useful. So I can implement it. Thank you!

[louiscad]

I don't think mimmicking Rx diagrams is best. I mean, I never understood Rx based on the diagrams, but thanks to coroutines, its Channels and Flows.

Now, I get that some people will like to visualize emitted events. That said, there's two very important things to show:
1. When cancellation takes place
2. Collection of an element taking some time, delaying the call to emit.

The first is easy to show and very important because it's very common.

The second is important as soon as there's suspension in the collector (including intermediate operators). It requires some rethinking in how it's shown in the visualization.

The diagrams we can see on the screenshot I annotated above work only if you're using `flowOf`(element1, element2, ...)`.

In real-life, Flows are not hardcoded and some cancellable suspending function will be suspending between collection of elements, or emission of elements (on the collector side).

So, I believe over-simplified diagrams do not help understanding the important details like the two ones I've been mentioning.

[Andrey Stepankov]

When I created the site, my desire was to get a list of operators in the simplest possible way. So I think I did it. However, Flow should not have as many operators as RxJava.

Emit time has already been added to the output Flow.