DEV Community

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

Collapse
 
kosich profile image
Kostia Palchyk • Edited

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!