Does MobX Observables have anything to do with RxJS ones?

Question

The title is pretty much self explaining. I can't find any info about it. Angular uses RxJs observables under the hood is the same going on in React and MobX particularly?

Answer 1

From what I see in the MobX source code, there aren't many overlaps. Neither of them uses each other or has a common dependency with the other.

The interpretation of Observable in MobX seems to be that objects, arrays, maps, etc. are wrapped with a Proxy object to track and be notified on property changes. This is used for communicating state changes through the application while changing relatively little to the vanilla javascript types (which is probably what they mean by "transparent"). While these types may be observable (as in the verb), they are not an implementation of Observables defined by ReactiveX.

RxJS on the other hand, provides a completely new, some would say huge, API that is used to modify so-called "notifications" generated by abstract Observable types that don't necessarily represent vanilla javascript types. Instead of directly changing objects imperatively, a "LINQ-ish" language, made up of pipeable operators, is used to express execution flows. In many ways, RxJS can be seen as an language extension for JavaScript to enable Reactive programming as defined in the Observable contract.

There is one overlap though and that is the claim of "MobX" to be a library that is used for

transparently applying functional reactive programming

RxJS too provides reactive programming, but it's definitely not transparent.

Answer 2

Here is an easy to understand example from the official mobx github wiki page

Let's suppose you have a person object with three attributes (observable properties in MobX or streams in RxJs):

class Person {
  constructor(firstname, lastname, nickname) {
    this.firstname = firstname
    this.lastname = lastname
    this.nickname = nickname
  }
}

Lets suppose you want to reactively derive a 'displayname' for the person. You want something like this...

displayname() {
   return this.nickname ? this.nickname : this.firstname + ' ' + this.lastname
}

In MobX all you need is this: -

const displayname = computed(() => this.nickname ? this.nickname : this.firstname + ' ' + this.lastname)

However, in RxJS you would have to do something like: -

const displayStream = person.nickname.combineLatest(this.nickname, this.firstname, this.lastname)
  .map([nickname, firstname, lastname] => nickname ? nickname : firstname + " " + lastname)
  .distinctUntilChanged

As shown on the example above here are key points from the linked reading: -

1. In MobX you hardly have operators, as stuff is normally combined through normal javascript constructions.
2. In RxJS you need to do this using combineLatest or any other operator.
3. MobX will automatically stop listening to observables that are not actively in use.
4. MobX has first class support for efficiently working with complex data structures like objects, arrays and maps.

When to use one over the other?

"if time plays an important role, like when throttling, accumulating events or having complex join patterns like zip, these are the cases where you want to work with streams (RxJS) otherwise you can simply use MobX."

For more detailed explanations head over to the MobX Repo