DEV Community

RxJS Transducer - Harness the Power of RxJS Operators

rasmusvhansen on January 28, 2019

Use the well known RxJS operators to manipulate arrays or iterables in a blazing fast way using the new tiny library rxjs-transducer Most JavaScri...
Read full post
Collapse
 
lexlohr profile image
Alex Lohr •

Arguably, take is present in the form of slice, while the lack of first with an array is a non-issue. The chaining performance was already improved here: dev.to/danielescoz/improving-javas.... Using RxJS for that task is an interesting approach, though.

Collapse
 
qm3ster profile image
Mihail Malo •

Nice one, is this the best implementation of Transducers in TS(or even all of JS) right now, or only popular because of it's part of RxJS?

In any case, two questions:

  1. How do I drain/collect the output into a collection? Especially ES6 Map is of interest.
  2. How do I compose the little transducers into one Big Chungus transducer, so that I can assign it to a variable and have it allocated ahead of time instead of constructing it on every invocation of the function that involves the piping?
Collapse
 
rasmusvhansen profile image
rasmusvhansen • • Edited

Hi, thanks for replying. I only just created the library a few days ago, so I wouldn't say it is popular (yet) :-)
But if you have a project where you are already using RxJS and are already familiar with the operators, I think it has a low entry barrier.

  1. So far it always drains to an array, so the only way to do that is new Map(transducer(xxx)(yyy)) which has a performance penalty of first allocating the array.
  2. You can't at the moment. But it is a good suggestion. I think I can solve both issues by allowing the transducer to produce a lazy iterable instead. I will look into that.

Thanks for the feedback!

Collapse
 
qm3ster profile image
Mihail Malo • • Edited

My apologies.
I assumed it was a not-even-recently-added part of the ancient RxJS behemoth.
Guess that's what I get for not clicking the I have written a transducer function link :)
I see this post was more of a camouflaged release announcement than a tutorial for an established package. 😉
I think that the line that sent me on this path the most was

RxJS will in fact process streams synchronously when possible

Thread Thread
 
rasmusvhansen profile image
rasmusvhansen •

Oh. I will make it more clear that this is a new library, and make it less camouflaged :-)

Collapse
 
qm3ster profile image
Mihail Malo •

The first two code examples are mixed up.
It shows the transducer pipe first, then the native ES5 Array methods.

Collapse
 
rasmusvhansen profile image
rasmusvhansen • • Edited

Yes, I noticed that too, but when checking the Markdown, the links to the gists are correct. Seems like a glitch in dev.to?

I created an issue here: github.com/thepracticaldev/dev.to/...

Collapse
 
qm3ster profile image
Mihail Malo •

😱

Collapse
 
gildotdev profile image
Gil •

This is great!