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.

Pardue

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 :)

Eremite

Can you comment on how to handle widget lifetimes that depend on a stream? I.e. you have to inspect state to know when to create and destroy the child widgets. You can move the child creation into the subscribe(), but then things start to get a bit confusing, e.g. you're doing a subscribe on state inside a subscribe on state, which creates weird ordering issues. If the child widgets also generate streams (e.g. ajax requests) that the parent needs, it gets even more confusing. – Pardue

You'd need to post a more specific example use case you are trying to solve. Your current description is a bit too abstract for me to understand how you've ended up in this dilemma. And are you using any libraries/frameworks? MVC? MVVM? etc. I've been building highly reactive RxJs MVVM UI for several years now and I've never encountered this problem. So if you can post a new Q with a specific example I'll add advice if I can – Eremite

New question here: https://mcmap.net/q/742347/-rx-data-driven-subwidgets – Pardue