Aurelia and ReactiveX?


#1

I am interested in using ReactiveX (rx.js) in an Aurelia application. I don’t know a lot about rx.js yet, but can definitely see that their Observable pattern can clean up some of my code.

My question is: To what extent does Aurelia work out-of-the-box with rx.js? In my immediate case, more specifically, does it bind to rx.js Observables?

Thanks for any info…


#2

Not directly but you can leverage binding behaviors to be able to bind to async streams https://github.com/zewa666/aurelia-async-binding


#3

Aurelia itself is reactive, out of the box, it auto updates UI based on change.

I think you might not need rx.js. For triggering manual logic based on variable change:

  1. With @bindable something; or @observable something;, you can hook up logic in somethingChanged(newValue, oldValue) callback.
  2. For complex scenario, use BindingEngine (inject it to your component).
this.subscriber1 = this.bindingEngine.propertyObserver(someObj, 'somePropertyOnTheObj')
.subscribe(aCallbackFunc);

this.subscriber2 = this.bindingEngine.collectionObserver(someArray)
.subscribe(aCallbackFunc);

Remember to dispose the subscriber this.subscriber1.dispose(). You can do the subscribe and dispose in attached()/detached() pair or bind()/unbind() pair.


#4

Thanks huochunpeng, but how would this work when, for example, you want to repeat.for on an rx.js Observable which is semantically like an array but actually behaves quite differently from an array?


#5

If you already have rx.js obserable in your app, that’s not what I was talking about.
Aurelia observes POJO (plain old javascript object), you don’t need any wrapper around your state.
I was suggesting it might be possible to remove rx.js from your app.


#6

Yeah, I don’t want rx.js so I can observe changes to data, Aurelia is already great at that. Rather I want it for its ability to give me cleaner asynchronous code.


#7

I see. I have not used rx.js, could not help there.

For my apps, I use Aurelia’s TaskQueue to queueTask/queueMicroTask for async code after some model change.


#8

You cant bind to observables or promises directly, only to their results. So either you subscribe and store the values to the bindable manually or write a custom binding like the one linked from my previous reply


#9

There was an old project integrating rxjs with aurelia but it is quite old: It may not work.