How to structure rxjs code

Question

How does one structure an rxjs app? There are about a hundred toy intro examples, but not a single example of a full app, with widgets, subwidgets, etc., showing data flow through the whole application.

E.g. suppose you have an observable with some state. You need to pass it to a widget. That widget has subwidgets that need portions of that state. Do you do a subscribe?

sub = state.subscribe(widget)

Now 'widget' is outside the monad. The subwidgets can't use observable methods on state. You have the same problem if you run the widget as a side effect.

state.doAction(widget)

So do you pass the stream to widget? If so, what do you get back?

what = widget(state)

Does the widget subscribe to the state and return a disposable? Does it return a stream derived from state? If so, what's in it? Do you try to collect all the streams together from all the widgets/subwidgets/sub-sub-widgets with extensive use of selectMany(identity) to get a final application stream that you subscribe in order to kick the whole thing off?

And if the widget creates subwidgets on demand, based on state, how does widget manage its subwidgets? I keep trying a solution with groupBy(), having a group per subwidget, but managing all the subscriptions or streams back from the nested observable is an unbelievable nightmare.

Even one example of a whole application would be helpful.

Answer 1

Pass the observables to the widget's constructor as arguments and let the widget subscribe or transform it with additional monads before passing it to its sub-widget constructors. The widget will manage its own subscriptions.

If a widget produces data (e.g. user input), expose it as Observable properties on the widget.

Note the widgets themselves are not part of the observable stream. They just consume input streams and produce output streams.

// main app
var someState = Rx.Observable....;
var someWidget = createSomeWidget(someState, ...);
var s = someWidget.userData.map(...).subscribe(...);

// SomeWidget
var SomeWidget = function ($element, state, ...) {
    this.userData = $element
        .find("button.save")
        .onAsObservable("click")
        .map(...collect form fields...);

    // we need to do stuff with state
    this.s = state.subscribe(...);

    // we also need to make a child widget that needs some of the state
    // after we have sanitized it a bit.
    var childState = state.filter(...).map(...)...;
    this.childWidget = new ChildWidget(childState, ...);

    // listen to child widgets?
}

And so on. If you are using Knockout, you can take advantage of ko.observable to create two-way observable streams and sometimes avoid needing to add output properties on your widgets, but that is a whole nother topic :)