Aurelia and ReactiveX?

Help Requests
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

1 Like
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.

1 Like
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

1 Like
9

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

1 Like
10

Any updates on this one? I’m also interested in Aurelia and Rx.js integration. How about Aurelia vNext, any plans to add support for Rx.js?

11

It would be interesting to understand what is thought when saying “integrates with Aurelia/RxJS”. If its up to the bindings, just use a binding behavior as provided here https://github.com/zewa666/aurelia-async-binding. If there’s anything else you’re looking for @kor it would be great to explain some use-cases

1 Like
12

Maybe I was a bit unclear. I was thinking about the Angular framework where the rx.js is a core part of the framework. I was curious whether Aurelia is planning on taking the same route.

If I understand correctly, the support is currently added with a third-party plugin and may or may not be compatible with future versions of Aurelia?

13

No its likely not going to be integrated like in Angular. The plugin on the other hand is an official one and will be kept uptodate

14

There could be some experiment to make everything more observable awareness in the future, but the main commitment of Aurelia has always been plain and simple JS, as well as POJO (plain old JS object).