Native Observables, RxRxnd the observable that doesn&#t exist yet

A lot of interesting things are happening right now.

RxJS 7 rocks, RxJS 8 is in alpha, it appears to be usable and so are the new Native Observables which are available in Chrome Today!

Can we use them together?
Short answer, kind of no. Technically they're all Observables, so should speak the same language, right? It's just .subscribe, .next, .error, .complete, and voilà...

Well, almost. Except RxJS makes some additional effort to ensure it's dealing with true Obsevables and not the "cheap imports" ?.
So it diligently checks for Symbol.observable or @@observable to be present, so you could technically monkey-patch those into the DOM Observable by doing Observable.prototype['@@observable'] = function(){ return this }, but... even if you succeed and you manage to plug both together via document.when('click').subscribe(new Subject()), it will fail again because RxJS streams make references to their own this, internally, which now will point elsewhere... so it breaks.

Hard luck, we need a custom bridge that subscribes to the Native Observable and forwards data to RxJS land.

Great, suppose we did that, sure, it would work. You would suddenly be able to do something like the following, provided you have this wrap silly function, done:

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

Anyway, whilst the above could already qualify as some kind of news, it's not the really interesting part, at all, yet!

The interesting part

The interesting part here comes when we talk about using Observables in the real world, in real applications, which is typically inside web frameworks or smaller UI libraries.

Consider the case of a click-counter button, using Observables, inside a JavaScript "Component".

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

Now, with Native DOM Observables we have a couple of interesting problems. Subject doesn't exist, BehaviorSubject doesn't either.
In addition to that, it doesn't even have a .pipe() method to pass operators in.
Lastly, its native operators are all methods of the Observable class, not functions.

So, the big question is: how do you call the methods of an object that... doesn't exist yet?

(You're probably lost at this point... I know, hold up)

The new way to create Observables looks like element.when(eventName). It's a native call to the DOM.
However, we're now in a template, we're in a JavaScript Component. None of the HTML has been added to the DOM yet, so no call to .when() could have been possibly made.

And we want to call .map().inspect().filter() on it!

An oversight? RxJS used to sport the same interface until a few years ago (others like Bacon and Zen Observables still do), but to help tree-shaking, they've split all operator methods into operator functions, so now you can import just what you need, making your apps lighter. Great!

The Observature

So, back to our new situation, how do we solve that from within a component?
Sure, well, that's easy! We either get Subject and BehaviorSubject in the WICG proposal (spoiler: for now we don't), or... we get creative, hack the system and conceive something like a proxy that helps us pretend that the Native DOM Observable is there, even if it's not, so we can call its native operator methods. ?

I called it... the Observature.

Observable Future = Observature. Observaturus is Latin for "one who will observe", so if we force that into English, it should sound something like that.

Good, so what would it all look like in code?

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

Yay, look at that! We have something here: new Observature(0).scan(x=>x 1).
Let me explain this.
It's technically like creating a new BehaviorSubject(0).scan(x=>x 1) except for one thing: there's no BehaviorSubject anymore. ?
The Observature is just a proxy. It exposes methods from Observable and Observer for later subscription and later binding!
If you call .scan(fn), it will just remember to call .scan on the actual Observable it will be subscribed to, when the time comes.

So, what interesting stuff do Observatures bring?
First is the fact they're not actual Subjects, so when you run the code above, the operator function you provide will run at level 1/2 in the stack. It could be lighter and faster than anything you've seen before, from click to sink. No, haven't run benchmarks yet and I'm not bothered, it's the concept that matters, for now.

Ah, another little note. There's no Observable.scan(), too, in the spec now, so one thing we can do is to monkey-patch at the moment, but again, those are just tiny implementation details. We have native Observables, that's the big deal!

To stay 100% native, for other use cases you can just use .map() and .filter(), but in my experience you can't live a proper life without scan(), as well.

RxJS 8

Ok, so... the above was using native stuff, no RxJS.
How would it all look like with RxJS8?
My answer is I've got no idea, ask @benlesh, he's your man :)

The current obstacles are the same: native Observables aren't recognised by RxJS, so there's a little bit of work to do. It could all look something like this:

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

What's your thoughts? Would you use something like this?

For now, you can play with DOM Observables, Observatures on this Stackblitz

Drop a message to leave your thoughts.

The above is the detailed content of Native Observables, RxRxnd the observable that doesn&#t exist yet. For more information, please follow other related articles on the PHP Chinese website!