loading...

Discussion on: RegExp syntax for Observables: Never Been Easier!

Collapse
bradtaniguchi profile image
Brad

If only we had a library to use regular expressions on streams

Whoa... RxJs and Reactive Programming can be hard. Regular Expressions can be hard. Seems like combining the two could make whatever your doing harder.

clear and extensible syntax

I don't consider regex to be clear if you don't use them regularly. (Which hopefully is most people hehe)

What would be a real-world use-case for getting --dm-m-m-m-mu| as a use case? Maybe testing?

Collapse
kosich profile image
Kostia Palchyk Author

Hi, Brad!

Because I might've confused everyone with strings and regexes comparisons, just to be sure:
We don't get a string "--dm-m-m-m-mu|". Marble diagrams I used are only for visualization of what's going on with Observables. We work with an actual live stream of events.

When we apply a selector, what we get — is a stream of events, that match the selector.

For testing purposes, please see this amazing package rxjs-marbles by @cartant (it's actually used in this package testing flow)

Sorry, if that was obvious, just wanted to make sure we're on the same page 🙂

Now. To the main point:

Whoa... RxJs and Reactive Programming can be hard. Regular Expressions can be hard. Seems like combining the two could make whatever your doing harder.

Yep, both might be hard! And have you seen that regexp for email validation? Sheesh!

And Observables: I've been using RxJS for about 3 years now, have created a playground for observables and am currently working on a RxJS-based framework. Still I'm often confused with that toolset of operators:

Take the mouse Drag and Drop example: if I were to implement that in pure RxJS, I would start with this:

mouseDown$.pipe(
  switchMap(() => mouseMove$),
  takeUntil(mouseUp$),
  repeat()
)

Then I'd realize that I'm doing a resubscription on repeat(), that could've been omitted. So I dig in my memory and under a thick layer of TV shows, I finally find a windowToggle operator:

mouseMove$.pipe(
  windowToggle(mouseDown$, mouseUp$)
)

Only I forget at first that it accepts a function as a second argument.

mouseMove$.pipe(
  windowToggle(mouseDown$, () => mouseUp$)
)

And then if later I were required to add those trailing mouseDown$ and mouseUp$ events to the output stream w/o an additional subscription — ooff. That code grows fast.

Now with a query expression, the same effect might be achieved with:

exec(
  'DM*U',
  { D: mouseDown$, M: mouseMove$, U: mouseUp$ }
)

My point is that it's sometimes easier to use the declarative regex-like syntax.
And with library evolving — we'll get better options to express ourselves.

Hope this really-really long reply will let you look at the idea at another angle.

Cheers!

Collapse
kosich profile image
Kostia Palchyk Author

Hey, Brad!

Almost a year after I think I heard you 🙂
I've created an operator-based API!

// > Mouse DnD

// get dom element to drag
const item = document.getElementById('item');

// capture mouse down, up and move
const D = fromEvent(item, 'mousedown');
const M = fromEvent(document, 'mousemove');
const U = fromEvent(document, 'mouseup');

// listen to a query (_DM*_U)* & log it
query(
  some(mute(D), some(M), mute(U))
)
  .subscribe(({ x, y }) => console.log(x,y));

Check it out: github.com/erql

What do you think?