DEV Community: Kostia Palchyk

RxJS pipe as a React hook

Kostia Palchyk — Mon, 26 Apr 2021 17:34:36 +0000

Ever tried to use an Rx Observable in React? Then you know what's the problem with this code:

function App() {
  let [time, setTime] = useState(0);
  timer(0, 1000)
    .pipe(
      filter(x => x % 2),
      map(x => x + '!')
    )
    .subscribe(setTime);

  return <h1>{ time }</h1>
}

Yeah, it subscribes to the timer with each render. Which triggers setTime on each timer emission. Which leads to a re-render. Which leads to... well, you know, memory leaks and weird behaviour. And on top of that it even won't be destroyed with the component unmount.

In this short post I want to share with you a non-canonical idea (probably not original one) how to fix that!

tl;dr: online playground with hook pipe

🪝 The hook

We could devise a custom react hook, that will fix that. Lets use a useEffect hook, which will subscribe to the source, and push messages to our observer (setTime in the example above)

let useObservable = (observable, observer) => {
  // useEffect with empty deps will call this only once
  useEffect(() => {
    let sub = observable.subscribe(observer); // connect
    return () => sub.unsubscribe(); // < unsub on unmount
  }, []);
}

And it will be used like this:

function App() {
  let [time, setTime] = useState(0);
  useObservable(
    timer(0, 1000)
      .pipe(
        filter(x => x % 2),
        map(x => x + '!')
      ),
    setTime
  );

  return <h1>{ time }</h1>
}

Which looks react-ish... but not rx-ish.
Not nice 😕. We can do better!

So let's explore another way!

🗞️ RxJS pipes

But before we continue, a quick reminder of RxJS pipe operator mechanics:

Roughly speaking RxJS pipe operator (like, map) is just a function that takes one Observable and returns a new Observable:

(source: Observable<A>) => Observable<B>

So when we subscribe to the resulting Observable<B>, operator subscribes to the source Observable<A>. And when that source emits a value, operator applies its logic to it (map, filter, etc) and decides what, when, and how to push to the resulting Observable<B>. map will push modified values, filter will push only values that satisfy given condition.

Okay, back to hooks

🪝🗞️ The hook pipe

We can modify the hook to implement the Rx Operator interface, while still enclosing a useEffect hook.

Let's start with how we'll use it in a component:

function App() {
  let [time, setTime] = useState(0);

  timer(0, 1000)
    .pipe(
      filter(x => x % 2),
      map(x => x + '!'),
      useUntilUnmount()
    )
    .subscribe(setTime);

  return <h1>{ time }</h1>
}

And here's it's implementation:

function useUntilUnmount() {
  // Observable => Observable interface
  return source => new Observable(observer => {
    // create a new Subscription
    // we'll use it to handle un-mounts and unsubscriptions
    let sub = new Subscription();

    // this is run only once
    useEffect(() => {
      // connect observer to source
      sub.add(source.subscribe(observer));
      // on unmount -- destroy this subscription
      return () => sub.unsubscribe();
    }, []);

    // return sub to handle un-subscriptions
    return sub;
  });
}

This is really just 8 lines of code.

Disclaimer: while being leak-free and working as promised, this might not be the best way to use Observables in React. Tried <$> fragment already?

🛸💨 Outro

Try our shiny hook pipe (with dependencies!) in this online playground and leave a comment here with your opinion!

And in the future, when pipeline operator |> lands in JS, we'll probably substitute the subscribe with our custom hook subscribe. Like this:

function App() {
  let [time, setTime] = useState(0);

  timer(0, 1000)
    |> filter(x => x % 2)
    |> map(x => x + '!')
    |> subscribeHook(setTime)

  return <h1>{ time }</h1>
}

That's it for today! Follow me here and on twitter for more RxJS, React, and JS posts!

I hope you had fun! If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons — it helps a lot!

Thank you for reading this article! Stay reactive and have a nice day 🙂

Cya! 👋

Psst.. Check out my other Rx / React articles!

😉

header image by Victor Garcia on Unsplash, gif taken from giphy.com

Much Fun with RxJS-Autorun

Kostia Palchyk — Tue, 27 Oct 2020 15:12:43 +0000

Hi! 👋

Today I'll show you some tricks using rxjs and rxjs-autorun that we reviewed in the previous post. Let's quickly recap what it does:

you pass it an expression that uses some streams
whenever those streams emit, autorun runs the expression with new values
you get a stream of those evaluations results

Now let's go fast explore what we can do with it!

Mapping a single stream: 🌱 🌿 🌳

The most basic usage: we have a stream t of growing integer values: 0, 1, 2, etc (RxJS timer will create us one). And we want to substitute that integer with a string: "even" or "odd":

const t = timer(0, 1_000);
computed(() => $(t) % 2 ? 'odd' : 'even');
// Result:
// > even > odd > even > odd …

Explanation: $(t) will wait until stream t emits a value. Then with every value emission, computed will re-evaluate its expression, putting the result into the output stream.

Combinations: 📦 + 🎀 = 🎁

By tracking multiple streams inside expressions we can combine emissions from these streams:

import { timer, of } from 'rxjs';
import { computed, $ } from 'rxjs-autorun';

const a = timer(0, 1_000);
const b = of('🐇');
computed(() => $(a) + ' - ' + $(b))
// > 0 - 🐇 > 1 - 🐇 > 1 - 🐇 …

Similarly to combining into strings, we can combine into Arrays:

computed(() => [ $(a), $(b) ])
// > [ 0, 🐇 ] > [ 1, 🐇 ] …

Objects:

computed(() => ({ a: $(a), b: $(b) }))
// > { a: 0, b: 🐇 } > { a: 1, b: 🐇 } …

or even call functions!

function toString(count, animal) {
  return (count < 3 ? 'some' : 'many') + animal;
}
computed(() => toString( $(a), $(b) ))
// > some 🐇 > some 🐇 … > many 🐇 …

Switching: 🌤 🌧

Now, imagine we have a function getWeather that returns an Observable with the weather forecast for a given city. Using the same ?: from the first example we could create a widget to show weather for two cities:

const t = timer(0, 1_000);
const nice = getWeather('Nice'); // => Observable<'Nice: 🌤'>
const cannes = getWeather('Cannes'); // => Observable<'Cannes: 🌧'>
computed(() => $(t) % 2 ? $(nice) : $(cannes));
// > Cannes: 🌧 > Nice: 🌤 > Cannes: 🌧 > Nice: 🌤 …

Tricks: 🐇 🎩

Now, remember I said that $(…) will wait for the stream to emit its first value before continuing evaluation. Let's do some tricks exploiting this rxjs-autorun feature!

Filtering

computed will wait for every observable to emit in order to produce a value. But what if we pass it a never emitting Observable: NEVER? Correct, this will pause emission until other tracked Observable emits:

const a = timer(0, 1_000);
computed(() => $(a) % 2 ? $(NEVER) : $(a) + ' even' );
// > 0 even > 2 even > 4 even …

Take while

Similarly to NEVER, we can exploit awaiting by passing it an Observable that completes never ever emitting a value: EMPTY. If an expression relies on a stream that we know won't emit a value — then surely the resulting Observable won't emit either! So computed completes:

const a = timer(0, 1_000);
const c = computed(() => $(a) < 5 ? $(a) : $(EMPTY));
// > 0 > 1 > 2 > 3 > 4 > COMPLETE!

NOTE: this feature is in beta-testing now and will be available with the next release

Bonus: 🙂

I showed you two functions: computed to run expressions and $ to track values. But $ has a sibling! A _ function, similarly to $, will read the current value of a stream but it won't trigger expression re-evaluation if that stream updates!

Now, imagine the examples above if you mix $ and _. Got you thinking, eh? Then imagine that all the computed streams can be used in other computed expressions!

🙂 → 😲 → 🤯

Outro: 🛸💨

You'll find the docs and the library here: github.com/kosich/rxjs-autorun

I hope you had fun! If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons — it helps a lot!

Follow me here and on twitter for more RxJS, React, and JS posts!

Thank you for reading this article! Stay reactive and have a nice day 🙂

Cya! 👋

Psst.. need something more to read?

I got you covered:

😉

RxJS Proxy: 3 new features

Kostia Palchyk — Fri, 23 Oct 2020 11:04:57 +0000

amazing header photo by Zach Kadolph

Hi! 👋 In the previous post, I've introduced you to rxjs-proxify that turns your Observable into an Object of Observables:

const o = of({ msg: 'Hello' }, { msg: 'World' });
const p = proxify(o);
p.msg.subscribe(console.log); // > Hello > World

Today I'll show you what new abilities you get with the recent 0.0.10 release: now proxify can be applied not only on Observables but also on Subjects and BehaviorSubjects. Also, we get a statify method that will help you manage the local state!

tl;dr try & install: github.com/kosich/rxjs-proxify

📖 Intro

Left to right: Observable, Subject, and BehaviorSubject. Cute photo by The Lucky Neko.

Observable Proxy (already familiar to you)
subscribe at any depth

const observable = proxify( of({ p: '🐑' }) );
observable.subscribe(console.log); // > { p: 🐑 }
observable.p.subscribe(console.log); // > 🐑

It will be handy if you need to access many sub-properties on your streams:

// framework agnostic model
const { title, body } = proxify( fetchArticle() );
// framework agnostic view
<article>
  <Title value={ title } />
  <Body value={ body } />
</article>

Note that here we're creating two separate Observables, so you'll probably want to .pipe( share() ) inside fetchArticle.

Subject Proxy
subscribe at any depth, push at the root

const subject = proxify(new Subject<{ p: string }>());
subject.subscribe(console.log);
subject.p.subscribe(console.log);
subject.next({ p: '🐥' }); // > { p: 🐥 } // > 🐥

While you have all the benefits of Observable Proxy, you can also update the whole Subject value.

BehaviorSubject Proxy

subscribe at any depth, push at any depth, synchronously read the current state

const behavior = proxify(new BehaviorSubject({ p: '🐖' }));
behavior.p.subscribe(console.log); // > 🐖
behavior.p.next('🐇'); // > 🐇
console.log(behavior.p.value) // > 🐇

In addition to Observable Proxy, you can synchronously read and update the state at any level!

// model
const s = proxify(
  new BehaviorSubject({ title: '', checked: false })
);
// view
<div>
  <input
    value={ s.title }
    onChange={ e => s.title.next(e.target.value) } />
  <input
    type="checkbox"
    checked={ s.checked }
    onChange={ e => s.checked.next(e.target.checked) } />
</div>

State proxy

And we also export a statify function that creates a BehaviorSubject Proxy with a distinctUntilChanged on all its properties:

// create a state
const state = statify({ a: '🐰', z: '🏡' });

// listen to & log root state changes
state.subscribe(console.log); //> { a:🐰 z:🏡 }

// update particular substate
state.a.next('🐇'); //> { a:🐇 z:🏡 }
state.a.next('🐇'); //> same value, no update

// read current values
console.log(state.z.value + state.a.value); //> 🏡🐇

// update root state, still logging
state.next({ a: '🐇', z: '☁️' }) //> { a:🐇 z:☁️ }

// and then…
state.z.next('🌙');   //> { a:🐇  z:🌙 }
state.a.next('🐇👀'); //> { a:🐇👀 z:🌙 }
state.z.next('🛸')    //> { a:🐇👀 z:🛸 }
state.a.next('💨');   //> { a:💨  z:🛸 }

That's it! Just a few words before you go:

🎉 Outro

You can try proxify online.

And you'll find more examples and the installation guide at github.com/kosich/rxjs-proxify. Hope you'll find these little tools useful!

If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons

Follow me here and on twitter for more RxJS, React, and JS posts!

Thank you for reading this article! Stay reactive and have a nice day 🙂

And thanks to @fkrasnowski for discussing with me and polishing this idea in the previous post comments!

RxJS Autorun Intro

Kostia Palchyk — Thu, 15 Oct 2020 12:01:35 +0000

Hey, RxJS streamers! 🙋‍♂️

Today we're going to review a small library that re-evaluates an expression based on updates in streams it uses.

tl;dr: docs and package at github.com/kosich/rxjs-autorun 🔗

Let's boldly explore it!

It's a sweetened countdown

Our first example.

Say, we want to prettify each value on a timer stream. So we'll write such an expression:

import { timer } from 'rxjs';
import { computed, $ } from 'rxjs-autorun';

// timer would emit every second
const a = timer(0, 1_000);
// expression would concat every emission with a cake
const result = computed(() => $(a) + ' 🍰');
// now we should subscribe to the resulting stream
result.subscribe(x => console.log(x));
// > 0 🍰
// > 1 🍰
// > 2 🍰
// > …

Explanation: computed takes a function that uses some streams and re-evaluates it when those streams update. It returns an observable that you can manipulate further. And $(a) indicates that a is a stream and its updates should be listened to.

So technically this expression is equivalent to a.pipe( map(x => x + '🍰') )

But let's keep discovering what else this tiny lib can do:

Infinite monkey theorem needs infinite bananas

Here we'll combine a timer that would represent a queue of our little 🐒 fellas with a stream of fetched bananas 🍌:

import { timer, of } from 'rxjs';
import { delay } from 'rxjs/operators';
import { computed, $ } from 'rxjs-autorun';

const a = timer(0, 1_000); // get some monkeys
const b = of('🍌').pipe(delay(2_000)); // fetch some treats
const result = computed(() => '🐒 #' + $(a) + ' gets ' + $(b)); // mix
result.subscribe(x => console.log(x)); // listen to result stream
// ...2s gap...
// > 🐒 #1 gets 🍌
// > 🐒 #2 gets 🍌
// > 🐒 #3 gets 🍌
// > …

BTW, did you know that banana is technically a berry?

Not hard at all, is it?

This expression is similar to combineLatest(a, b).pipe( map(([x,y]) => x + y) ).

Let's review another multiple streams example:

Who's up to some pizza?

The last trick we're gonna learn today is ability to read latest values without tracking their updates:

import { Subject } from 'rxjs';
import { computed, $, _ } from 'rxjs-autorun';

const a = new Subject(); // neighbours
const b = new Subject(); // food
computed(() => $(a) + ' likes ' + _(b))
  .subscribe(x => console.log(x));
a.next('🐈'); // nothing: b is still empty
b.next('🥛'); // > 🐈 likes 🥛
a.next('🐭'); // > 🐭 likes 🥛
b.next('🍕'); // nothing: _(b) doesn't trigger re-runs
a.next('🙋‍♂️'); // 🙋‍♂️ likes 🍕

Explanation: _ function indicates that we need to take one value from a stream, but we don't want to recalculate our expression when this particular stream emits. So if an expression uses $(a) and _(b) — it would react only to a updates.

This also means that computed(() => _(a)) expression would emit one value and immediately complete.

Okay, one really last thing before we wrap-up:

Transformation

This time, try to guess what it is:

import { timer, of } from 'rxjs';
import { computed, $, _ } from 'rxjs-autorun';

const a = timer(0, 1_000);
const b = of('💧');
const c = of('❄');
const result = computed(() => $(a) % 2 ? _(b) : _(c));
result.subscribe(x => console.log(x));

Indeed, this is capricious weather 🙂

Actually, this expression is somewhat similar to switchMap

Outro 😳

All the examples you can try here.

And there's more to the library, go explore it yourself!

In the following articles we'll review how to filter emissions and how to manage subscriptions inside rxjs-autorun expressions. Not to miss those and other RxJS posts — follow me here and on twitter!

If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons — it helps a lot!

Thank you for reading this article! Stay reactive and have a nice day 🙂

Also I want to thank @fkrasnowski for lengthy discussions of this idea, @ryansolid for giving it a try and Johan for collaborating with me on this! 🙏

Psst.. need something more to read?

I got you covered:

😉

Queries for Observables: Crazy & Simple!

Kostia Palchyk — Wed, 07 Oct 2020 13:57:10 +0000

In the previous post we explored API to select events from streams using RegExp-like syntax, e.g.:

const D = fromEvent(element, 'mousedown');
const M = fromEvent(document, 'mousemove');
const U = fromEvent(document, 'mouseup');

exec(
  'DM*U'         // <- regular expression
  , { D, M, U }  // <- streams that will be used
)
  .pipe(…)
  .subscribe(console.log);

In this post we'll review it's functional API counterpart:

query(D, some(M), U) // select some Ms between Ds and Us
  .pipe(…)
  .subscribe(console.log)

But first, we'll recap the thought process. If you're already familiar with the idea — hop here

tl;dr: package @ https://github.com/erql/rx-rql 📦

💡 Recap the idea

Imagine we need to implement a drag-n-drop behavior.

For that, we have three event streams: mousemove$, mousedown$, mouseup$. So we want to capture mousemove$ events after mousedown$ emitted and before mouseup$.

Let's draw a marble diagram of the event streams we have:

mousedown$  --o------------
mousemove$  -o-o-o-o-o-o-o-
mouseup$    ------------o--

Every event stream is represented with separate line.
o stands for event on the stream. - is a separator to represent passing time

For better readability let's substitute all the os to respective letters of the streams:

mousedown$  --d------------
mousemove$  -m-m-m-m-m-m-m-
mouseup$    ------------u--

'd' will now stand for mouse-down event, 'm' for mouse-move, 'u' for mouse-up

Now that we have distinct event names, we can simplify our diagram to a single line of events:

events$     -mdm-m-m-m-mum-

Let's remove the time - signs as well, we don't them:

events$      mdmmmmmum

Okay, to rephrase our task in terms of the new diagram: we need to capture the m events between d and u emissions.

🤔

Hmm...

"we need ms between d and u"...

Sounds familiar...

Ah! If that was a string, we could easily do it with a regular expression:

/dm*u/.exec('mdmmmum')

Would give us the needed dmmmu without trailing mouse-move m events...

Right?

If only we had a library to select events from streams with regexes...

🚀 Solution

query(D, some(M), U)
  .pipe(…)
  .subscribe(console.log)

Rx-RQL 📦 package provides following API to make such selections:

query(…) — root of your selection
A — select 1 emission from the stream
some(A) — select 0 to ∞ emissions from A
maybe(A) — select 0 or 1 emission from A
many(n,m)(A) — select from n to m emissions from A
mute(A) — select emission from A & mute it

And you can group them as you like:

some(A, some(B), mute(C)) — select as many emissions from: select as many Bs as possible between emissions from A and muted C

Here's how to create a simple drag-n-drop behavior using this package:

And here's a Mr. Potato-Head DnD 🥔 — a more sophisticated example based on this amazing article by @dailydevtips1 ! Thx, Chris 🙏

👋 Outro

Thank you for reading this article! Stay reactive and have a nice day 🙂

If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons

And in case you're not yet following me here and on twitter — then you've probably missed my recent experiments: Rx + Proxy, Rx Autorun, React + Rx

// Detect dark theme var iframe = document.getElementById('tweet-1313544826558783488-385'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1313544826558783488&theme=dark" }

Now I'd love to hear your thoughts! 👂

Turn a Stream of Objects into an Object of Streams

Kostia Palchyk — Fri, 18 Sep 2020 14:40:56 +0000

Hi, fellow RxJS streamer! 👋

Today I want to share a JS/TS package that allows you to access props of objects on Observables:

source$.subscribe(o => console.log(o?.a?.b?.c))
// turn ↑ into ↓
source$.a.b.c.subscribe(console.log)

tl;dr: github.com/kosich/rxjs-proxify

A simple use case: read the msg property of each value on the stream

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";

const source = of({ msg: 'Hello' }, { msg: 'World' });
const stream = proxify(source);
stream.msg.subscribe(console.log); // 'Hello', 'World'

☝️ proxify will create a Proxy for given Observable

The package has good TypeScript support, so all props are intelli-sensed by cats, dogs, and IDEs:

import { of } from 'rxjs';
import { proxify } from 'rxjs-proxify';

const source = of({ a:1, b:1 }, { a:2, b:2 });
const stream = proxify(source);
stream. // <- will suggest .a .b .pipe .subscribe etc

👀 I can see your intentions

t's also possible to call methods on values (even those using this keyword), e.g.:

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";

const source = of({ msg: () => 'Hello' }, { msg: () => 'World' });
const stream = proxify(source);
// calls msg() fn on each value of the stream
stream.msg().subscribe(console.log); // 'Hello', 'World'

🤯 pure magic, I tell you

And you are still free to apply RxJS operators at any depth:

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";
import { scan } from "rxjs/operators";

const source = of({ msg: 'Hello' }, { msg: 'World' });
const stream = proxify(source);
stream.msg.pipe(scan((a, c)=> a + c)).subscribe(console.log); // 'HelloWorld'

Just like regular Observables!

The package uses Proxies under the hood, recursively applying it to sub-properties and method results, so the chain can be indefinitely deep. And you can apply .subscribe or .pipe at any time!

🎹 Try it

You can install it via npm i rxjs-proxify

Or test it online: stackblitz.com/edit/rxjs-proxify-repl

📖 Repository

The source code and more examples are available on github repo:

github.com/kosich/rxjs-proxify

Outro

Thank you for reading this article! Stay reactive and have a nice day 🙂

If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons — it helps a lot!

Soon I'll post a more detailed review of the lib and how it works

Follow me here and on twitter for more RxJS, React, and JS posts:

// Detect dark theme var iframe = document.getElementById('tweet-1302684300366798849-749'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1302684300366798849&theme=dark" }

🗣 Would love to hear your thoughts!

Psst.. need something more to read?

I got you covered:

😉

Cya 👋

Pretty Git Log built w/ React & Ink

Kostia Palchyk — Mon, 10 Aug 2020 13:53:33 +0000

Hi! This is a short #showdev post to share what I've created yesterday using React, Ink and simple-git 🙂

A Pretty Git Log npm package with basic interactivity

See this video:

That's it for now 🤷‍♂️

Have ideas or comments — please, share! I'll be glad to discuss!

Want to participate / fork? Here's the repo github.com/kosich/git

Follow me here and on twitter/@kddsky for more: I'll create and share a tutorial on this soon!

Thanks for reading! ❤️

THE END

Fetching Data in React with RxJS and <$> fragment

Kostia Palchyk — Tue, 04 Aug 2020 08:49:33 +0000

We often need to fetch data in our components. Here's an example using useState hook and fetch API to get and display some data:



function App(){
  const [data, setData] = useState(null);

  // useEffect for fetching data on mount
  useEffect(() => {
    fetch('//...')
    .then(response => response.json())
    .then(data => setData(data));
  }, []);

  return <div>Data: { data }</div>
}

here and further I'll drop checking response.ok for brevity sake

Looks alright?

Well, this approach lacks few important features:

cancelling fetching on component unmount (e.g if user leaves current page)
handling errors
displaying loading indicator

To handle all these issues nicely we'll use RxJS!

RxJS is a very mighty tool to manage and coordinate async events (like fetching and UI events). Learning it will pay you back 10 fold!

Please, don't get freaked out now, I'll walk you through adding and using it 🙂

tl;dr: resulting app playground and <$> fragment library

Let's start with updating our App to use RxJS!

🔋 Power Up

First we'll switch to RxJS' fromFetch — it's a wrapper around native fetch:



function App(){
  const [data, setData] = useState(null);

  useEffect(() => {
    fromFetch('//...')
      .subscribe(response =>
        response.json().then(data => setData(data))
      );
  }, []);

  return <div>Data: { data }</div>
}

.subscribe method is an analogue for .then in Promises — it will receive value updates from the RxJS stream (currently it will handle only one update, but there'll be more)

Also .subscribe returns an object with which we can cancel the "subscription". This will help us solve our first issue: cancelling fetching on component unmount.



function App(){
  const [data, setData] = useState(null);

  useEffect(() => {
    const subscription = fromFetch('//...')
      .subscribe(response =>
        response.json().then(data => setData(data))
      );

    // this function will be called on component unmount
    // it will terminate the fetching
    return () => subscription.unsubscribe();
  }, []);

  return <div>Data: { data }</div>
}

See React's useEffect#cleaning-up-an-effect docs section for details

Hurray: 1 done, 2 left!

Let's do a small cleanup before we go further:

🔧 Refactoring and <$> fragment

As you can see, we're using response.json() async operation inside our subscribe function — this is a bad practice for a number of reasons: this stream would not be reusable and cancellation wont work if we're already on stage of response.json() parsing.

We'll use a mergeMap RxJS operator to fix this:



function App(){
  const [data, setData] = useState(null);

  useEffect(() => {
    const subscription = fromFetch('//...')
      .pipe(
        // mergeMap is an operator to do another async task
        mergeMap(response => response.json())
      )
      .subscribe(data => setData(data));

    return () => subscription.unsubscribe();
  }, []);

  return <div>Data: { data }</div>
}

UPD: @benlesh made a good point that one can use RxJS' ajax.getJSON instead of fetch wrapper, and skip the mergeMap. E.g.: ajax.getJSON(url).subscribe(/* etc. */). I will keep the fromFetch approach for educational and laziness reasons 🙂

We've separated response.json() operation from results handling. And with our subscribe handler only responsible for displaying data — we can now use <$> fragment!

<$> — is a small (1Kb) package to display RxJS values in our React components.

It will subscribe to provided stream for us and display updates in place. And also unsubscribe on component unmount, so we won't need to worry about that too!



function App(){
  // we need useMemo to ensure stream$ persist
  // between App re-renders
  const stream$ = useMemo(() =>
    fromFetch('//...')
      .pipe(
        mergeMap(response => response.json())
      )
  , []);

  return <div>Data: <$>{ stream$ }</$></div>
}

Note that we've dropped useState and .subscribe: <$> does all that!

So, we're ready to add more operators to continue solving our tasks. Let's add a loading indicator!

⏳ Loading indicator



function App(){
  const stream$ = useMemo(() =>
    fromFetch('//...')
      .pipe(
        mergeMap(response => response.json()),
        // immediately show a loading text
        startWith('loading...')
      )
  , []);

  return <div>Data: <$>{ stream$ }</$></div>
}

startWith will prepend async data stream with provided value. In our case it looks somewhat like this:



start -o---------------------------o- end

       ^ show 'loading'            ^ receive and display
       | immediately               | response later

Awesome: 2 done, 1 left!

We'll handle errors next:

⚠️ Error handling

Another operator catchError will let us handle error from fetching:



function App(){
  const stream$ = useMemo(() =>
    fromFetch('//...')
      .pipe(
        mergeMap(response => response.json()),
        catchError(() => of('ERROR')),
        startWith('loading...')
      )
  , []);

  return <div>Data: <$>{ stream$ }</$></div>
}

Now if fetching fails — we'll display 'ERROR' text.

If you want to dig deeper, I wrote a detailed article on managing errors: "Error handling in RxJS or how not to fail with Observables" — suppressing, strategic fallbacks, retries simple and with exponential delays — it's all there.

3 done, 0 left!

Let's finalize with moving some divs around:

🖼 Better UI

Most likely we'd like to show properly highlighted error and styled (maybe even animated) loading indicator. To do that — we'll simply move our JSX right into the stream:



function App(){
  const stream$ = useMemo(() =>
    fromFetch('//...')
      .pipe(
        mergeMap(response => response.json()),
        // now we'll map not only to text
        // but to JSX
        map(data => <div className="data">Data: { data }</div>),
        catchError(() => of(<div className="err">ERROR</div>)),
        startWith(<div className="loading">loading...</div>)
      )
  , []);

  return <$>{ stream$ }</$>
}

Note that now we can fully customize view for each state!

🍰 Bonus: anti-flickering

Sometimes if the response comes too quickly we'll see the loading indicator flash for a split second. This is generally undesirable since we've worked long on our loading indicator animation and want to ensure user sees it through 🙂

To fix this we'll split out fetching Observable creation and join the fetching with a 500ms delay:



function App(){
  const stream$ = useMemo(() =>
    customFetch('//...').pipe(
        map(data => <div className="data">Data: { data }</div>),
        catchError(() => of(<div className="err">ERROR</div>)),
        startWith(<div className="loading">loading...</div>)
      )
  , []);

  return <$>{ stream$ }</$>
}

function customFetch(URL) {
  // wait for both fetch and a 500ms timer to finish
  return zip(
    fromFetch(URL).pipe( mergeMap(r => r.json()) ),
    timer(500) // set a timer for 500ms
  ).pipe(
    // then take only the first value (fetch result)
    map(([data]) => data)
  )
}

Now our loved user will see the loading animation for at least 500ms!

4 done, 🍰 left!

A few final words:

🎉 Outro

Here's our resulting app if you want to play around with it.

To start using RxJS in your React components just do:



npm i rxjs react-rxjs-elements

And then drop a stream inside <$>:



import { timer } from 'rxjs';
import { $ } from 'react-rxjs-elements';

function App() {
  return <$>{ timer(0, 1000) } ms</$>
}

That's it, I hope you've learnt something new!

Thank you for reading this article! Stay reactive and have a nice day 🙂

If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons

Follow me on twitter for more React, RxJS, and JS posts:

// Detect dark theme var iframe = document.getElementById('tweet-1285580447175643138-374'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1285580447175643138&theme=dark" }

The End

Thanks to @niklas_wortmann and @sharlatta for reviewing!

What React RxJS libs do You Use?

Kostia Palchyk — Thu, 23 Jul 2020 11:31:02 +0000

I'm currently using redux-observable for effects. It fits nice into whole redux flow (the question is if I need Redux itself, but that's a separate matter)

Sometimes I use RxJS directly in an effect hook (surely, with teardown!), but there are RxJS hook libraries for that, e.g.: re-rxjs/react-rxjs, crimx/observable-hooks and LeetCode-OpenSource/rxjs-hooks (they have thousands of weekly downloads! Alas, I haven't tried them well yet)

And I made a tiny React + RxJS package to display Observable content:

import React from 'react';
import { $ } from 'react-rxjs-elements';

function App(){
  return <div>
    <$>{ timer(0, 1000) } sec</$>
  </div>
}

npm i react-rxjs-elements

P.S. I also created an ⚠️ experimental JSX + RxJS framework — it's cute, check it out!

And what RxJS + React addons do you use?
How do you like them? Share an example!
Do you think we even need RxJS in React?

Share your thoughts!

Text to Speech + Image — A Talkie in JS

Kostia Palchyk — Tue, 07 Jul 2020 16:41:45 +0000

In the previous part we created a website where users can generate GIF animations using Emoji, domain-specific language (DSL) and a Canvas. In this post we'll upgrade our animations to talkies!

example animation we achieved in part I

Intro

I thought that it'd be funny to create animations where Emoji can talk. I already had Emoji moving around and displaying phrases as text. Obviously it was missing sound. In this article I'll show you how I added it!

tl;dr: try this animation
⚠️ warning: contains sound!

Text-to-Speech

Accidentally I stumbled upon "Text To Speech In 3 Lines Of JavaScript" article (thanks, @asaoluelijah!) and that "3 lines" quickly migrated to my project.

const msg = new SpeechSynthesisUtterance();
msg.text = 'Hello World';
speechSynthesis.speak(msg);
// ☝️ You can run this in the console, BTW

example taken from Asaolu Elijah's article. Go read it for more API details

Surely "3 lines" turned out to be 80. But I'll get to that later.

Text-to-Speech — is a part of browser Web Speech API that allows us to read text out loud and recognize speech.

But before we can go further with adding Text-to-Speech to animation, I need to show you how I rendered animation in the first place.

Animation and RxJS

After parsing DSL and rendering it to canvas (see part I), I had an array of frames:

[ { image: 'http://.../0.png' 
  , phrases: [ 'Hello!' ]
  , duration: 1000
  }
, { image: 'http://.../1.png' 
  , phrases: [ 'Hi!' ]
  , duration: 1000
  }
]

Each frame had a rendered image, phrases within it and frame duration.

To show the animation I used a React component with RxJS stream inside:

import React, { useState, useEffect } from 'react';

function Animation({ frames }) {
  // state for current frame
  const [frame, setFrame] = useState(null);

  useEffect(() => {
    // turn array intro stream of arrays
    const sub = from(frames).pipe(
      // with each frame delayed by frame.duration
      delayWhen(frame => timer(frame.duration)),
      // mapped to an Image
      map(frame => <img src={frame.image} />)
    )
    .subscribe(setFrame);

    return () => sub.unsubscribe(); // teardown logic
  }, [frames]);

  return frame;
}

to simplify things, I'll use pseudocodish JS around the article

Here I use a useEffect hook to create a RxJS Observable and a subscription to it. The from function will iterate over the rendered frames array, delayWhen will delay each frame by frame.duration and map will turn each frame into a new <img /> element. And I can easily loop the animation by simply adding a repeat() operator.

Note that subscription has to be cancelled at some point (specially the endless repeat()): the component might be destroyed or the frames might change. So the function passed to useEffect hook needs to return a teardown callback. In this case I unsubscribe from the animation observable, effectively terminating the flow.

With that covered, we can now discuss the Text-to-Speech!

Text-to-Speech and RxJS

Now I needed to pronounce the text using Speech API, but that frame.duration delay I used wouldn't work: I had to wait until the phrase is spoken and only then switch to the next frame. Also, if user edits the scenario or navigates away — I need to stop current synthesis. Happily, RxJS is ideal for such things!

First I needed to create an Observable wrapper around Speech Synthesis API:

export function speak(text) {
  return new Observable((observer) => {
    // create and config utterance
    const utterance = new SpeechSynthesisUtterance();
    utterance.text = text;

    // subscribe our observer to utterance events
    utterance.onend = () => observer.complete();
    utterance.onerror = (err) => observer.error(err);

    // start the synthesis
    speechSynthesis.speak(utterance);

    return () => {
      speechSynthesis.cancel();
    }
  });
}

this is a shortened version, see sources for more

When utterance will end Observable will complete, thus letting us chaining the synthesis. Also, if we unsubscribe from Observable — the synthesis will be stopped.

I've actually decided to publish this Observable wrapper as an npm package. There's a link in the footer 👇!

Now we can safely compose our phrases and be notified when they end:

concat(
  speak('Hello'),
  speak('World')
)
  .subscribe({
    complete(){ console.log('done'); }
  });

Try this code online at https://stackblitz.com/edit/rxjs-tts?file=index.ts

And to integrate the Text-to-Speech back into our Animation component:

from(frames).pipe(
  concatMap(frame => {
    // concat all phrases into a chain
    const phrases$ = concat(
        EMPTY,
        ...frame.phrases.map(text => speak(text))
    );

    // we'll wait for phrase to end
    // even if duration is shorter
    const duration$ = merge(
        phrases$,
        timer(frame.duration)
    );

    // to acknowledge the duration we need to merge it
    // while ignoring it's values
    return merge(
        of(<img src={frame.image} />),
        duration$.pipe(ignoreElements())
    );
  })
)

Thats it! Now our Emoji can walk and talk!

Turn the volume up and try this "Dancing" animation

a recorded version of "Dancing"

And surely try creating your own 🙂

Outro

It was pretty simple, huh?

But there was a hidden trick: previously the web app was hosted on GitHub pages and users shared their animations using downloaded GIFs. But GIF cannot contain sound, you know... so I needed another way for users to share animations.

In the next article I'll share details on how I migrated the create-react-app to NextJS/Vercel platform and added MongoDB to it.

Have a question or idea? Please, share your thoughts in the comments!

Thanks for reading this and see you next time!

❤️ 🦄 📖

RxJS debounce vs throttle vs audit vs sample — Difference You Should Know

Kostia Palchyk — Fri, 19 Jun 2020 14:33:01 +0000

In this article, we'll review how these operators work and how they differ.

For simplicity, we'll compare their *Time counterparts: auditTime, debounceTime, throttleTime, sampleTime — they work in the same way, just in defined time windows.

These operators are handy when you want to lower the load on the consumption function side. For example, you don't want to react to every user mousemove or every input.change event. In their own way, they will let you filter input stream based on time intervals. So let's see how they differ!

We'll start with investigating this marble diagram:

You can play with this marble diagram here

Explanation: here we apply all four operators to the source stream. The source starts emitting at time:0 and completes at time:1000. In the applied operators the colors are preserved from the source, but the value is substituted with the actual time of emission in resulting stream.

As you can see:

debounceTime will emit a value from the source stream only if a given time has passed without source producing more values
throttleTime will start a timer when the source emits. It can be set to emit the first and/or the last value in the given time window. Then it repeats this procedure
auditTime behaves in a similar way to the trailing throttleTime, but note that it won't emit a value from the last time window if the source has completed
sampleTime simply emits a value from the source in a given time window if the source actually emitted

I believe in learning by playing, so head to this marble diagram REPL to try changing code yourself: thinkrx.io/rxjs/debounceTime-vs-throttleTime-vs-auditTime-vs-sampleTime

Outro

That's it, I hope you had fun! If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons — it helps a lot!

Follow me here and on twitter for more RxJS, React, and JS posts!

Thank you for reading this article! Stay reactive and have a nice day 🙂

Cya! 👋

Psst.. need something more to read?

I got you covered:

😉

Text to GIF animation — React Pet Project Devlog

Kostia Palchyk — Wed, 17 Jun 2020 18:07:15 +0000

I had an idea that it'd be cool to create storyboards using simple text:

User describes a scene and gets images as an output

In this article, I'll share with you my thought and build process of this project.

And surely I'll show you the final result!

Spoiler: it didn't end as planned. tl;dr final result

0. Idea

I've started with visualizing the idea. First pen & paper, then draw.io (you can see one of the first concepts above), then writing a generic overview:

User defines scenes using simple English:

Scene
Ann as woman to the right
Frame
Ann says "Hello!"

Scene definitions describe actors (decorations) and frames
Actors use preset sprites like tree, man, woman
Frames define actions that the actors perform

Users will be able to share their stories and "like" and modify other's.

With the idea and language more-or-less defined it was time to draft the development plan:

Set up — project preparation
JSON to images — test out if I can create images as I want
Images to GIF — ensure I can generate gifs on the client, try some libs
Text to JSON — I'll need to create a parser for the language
Backend — needed for login/save/share flows
Publication

NOTE: For brevity reasons, I wont mention many dead-end ideas or stupid mistakes: so if you'll get a feeling that everything goes too smooth — thats only because of the editing. Also, I will cut a lot of code and use pseudocode-ish style to shorten the sources. If you'll have any questions — please, don't hesitate to ask!

Let's go!

1. Set up

I'll need a git repository to organize my dev process and a framework to speed it up. I used create-react-app and git init:

npx create-react-app my-app
cd my-app
# [skipped TypeScript adding process]
git init -y
git commit -m "initial"
npm start

Important thought: We need to test our ideas fast! And it doesn't really matter which language, framework, or VCS you use, as soon as you're comfortable and productive with it.

2. JSON to images

I started with defining a simple JSON to test out if I can render images based on this structure.

The JSON should describe:

sprites — image URLs for our actors and decorations
scenes — should contain and position actors and decorations
and frames — should contain actions, like "Ann moves left"

({
  sprites: { name: 'http://sprite.url' },
  scenes:
    // scene descriptions
    { scene_ONE:
        { entries:
            /* entries with their sprites and position */
            { Ann: { sprite: 'woman'
                   , position: { /* ... */ }
                   }
            }
        },
    },
  frames:
    [ { scene_name: 'scene_ONE'
      , actions: [
          { target: 'Ann'
          , action: 'move'
          , value: {x, y}
          }
        ]
      }
    , // ...other frames
    ]
})

For the actors I've defined three preset sprites: tree, woman and man and added relevant images to the project.

Now for each frame we'll perform all the actions (move and talk)

// for each frame
const computedFrames = frames.map(frame => {
  // clone entries
  const entries = _.merge({}, frame.scene.entries);
  // perform actions on the target entry
  frame.actions.forEach(action => {
    const entry = entries[action.target];

    if (action.type == 'talk') {
      entry.says = action.value;
    }

    if (action.type == 'move') {
      entry.position = action.value;
    }
  });

  return { entries };
});

And for drawing entry sprites we'll surely use canvas:

// draw the entries
const images = computedFrames.map(frame => {
  const canvas = document.create('canvas');
  const ctx = canvas.getContext('2d');
  frame.entries.forEach(entry => {
    ctx.drawImage(entry.sprite); // for sprites
    ctx.fillText(entry.says);    // for speech
  });
  // return rendered frame URL
  return URL.createObjectURL(canvas.toBlob());
})

Canvas can export it's contents as a dataURL or a blob — we'll need this to generate .gif later!

^ In reality, the code is a bit more asynchronous: toBlob is async and all the images should be downloaded before ctx.drawImage, I used a Promise chain to handle this.

At this point I have proved that the images can be rendered as intended:

The First Rendering! Hurray! 🙌

So we can move on:

3. Images to GIF

This required some research on available libraries. I've ended up with gif.js. Alas, it hasn't been updated for about a year atm, but it did it's job quite fine (demo).

To generate a .gif file — we need to feed every image to the gif.js generator and then call render() on it:

const gif = new GIF({ /* GIF settings */ });

images.forEach(imgUrl => {
  const img = new Image();
  img.src = imgUrl;
  gif.addFrame(img, { delay: 1000 });
});

gif.on('finished', blob => {
  // Display the blob
  updateGifURL(URL.createObjectURL(blob));
});

gif.render();

Awesome, now we can generate and download the .gif:

Aand action!

4. Text to JSON

I wanted users to type in commands in simple English. And this was the hard part for me, as I didn't even know where to start:

create my own parser?
input.split(/\n/) and then use regexes?
use some English grammar parser?

Luckily, after searching around I came across this article "Writing a DSL parser using PegJS" that introduced me to PEG.js (@barryosull , thank you).

PEG.js is a simple-to-use parser builder:

you define your language using regex-like rules
it generates a .js file with your personal fresh new parser
you plug this parser in and run it against your text

For example, here is an excerpt from my rules that parses Scenes:

These rules will parse this text:

Scene
with Tree as tree at { y: 160 scale: 1.5 }

to this JSON:

{
    "type": "scene",
    "values": [
      {
        "type": "object",
        "objectName": "Tree",
        "sprite": "tree",
        "state": {
            "y": 160,
            "scale": 1.5
        }
      }
    ]
}

In a couple of hours playing with PEG.js online version I ended up with a language and output structure I was fine to work with.

And after plugging it into the app I got this:

Look, they talk and listen

SIDE NOTE 1: at this point, I dropped the idea of fuzzy positioning Ann to the right and updated PEG.js to define a js-like object notation: Ann at { x: 100 y: 100 }.

SIDE NOTE 2: also, I couldn't keep re-generating GIF on every text update. It was too heavy. 100ms-UI-thread-blocking-on-every-keystroke heavy.

RxJS 😍 came to the rescue! debounce for input text updates and a simple timer, mapped to frame switch imgRef.current.src = next_frame to imitate the animation.

Actual .gif will be generated only when user hits the "download" button!

5. Backend

This pet-project already took me a weekend of development, so I had to drop all backend-related tasks and stick with static web-app for now.

6. Publication

I used GitHub Pages feature to deploy and share the project.

GitHub Pages will serve your website under their domain http://username.github.io/repository. Since I might be adding a backend later — I needed to buy a domain so that all links I share now would still be valid in the future.

Picking names is always hard for me. After an hour struggling I ended up with:

Go give it a try framd.cc! 🙂

Outro

Plot twist: After deploying and sharing project with friends — I've found that I'm short on sprites! Turns out people can't tell a lot of stories using just man, woman, and a tree image. So I decided to use emoji as sprites 👻 . And now you have a ton of these 🌳👩‍🚀🌍 to tell your story right!

The end

That's it! Thank you for reading this! 🙏

Have any questions? Post em in the comments section, I'll be glad to answer!

If you enjoyed reading — please, consider giving this article and this tweet a ❤️

Kos Palchyk

@kddsky

"Text to GIF animation — React Pet Project Devlog"
from idea to production in 4 days

dev.to/kosich/text-to…
6 min read

#React #canvas #js #ts #dsl #devlog #creativity #DEVCommunity

18:08 PM - 17 Jun 2020

1 1

It helps a lot!

Thanks!

P.S: some gif examples:

DEV Community: Kostia Palchyk

RxJS pipe as a React hook

🪝 The hook

🗞️ RxJS pipes

🪝🗞️ The hook pipe

🛸💨 Outro

Psst.. Check out my other Rx / React articles!

Much Fun with RxJS-Autorun

Mapping a single stream: 🌱 🌿 🌳

Combinations: 📦 + 🎀 = 🎁

Switching: 🌤 🌧

Tricks: 🐇 🎩

Filtering

Take while

Bonus: 🙂

🙂 → 😲 → 🤯

Outro: 🛸💨

Psst.. need something more to read?

😉

RxJS Proxy: 3 new features

📖 Intro

🎉 Outro

RxJS Autorun Intro

It's a sweetened countdown

Infinite monkey theorem needs infinite bananas

Who's up to some pizza?

Transformation

Outro 😳

Psst.. need something more to read?

😉

Queries for Observables: Crazy & Simple!

💡 Recap the idea

🤔

🚀 Solution

👋 Outro

Turn a Stream of Objects into an Object of Streams

🎹 Try it

📖 Repository

Outro

Psst.. need something more to read?

😉

Pretty Git Log built w/ React & Ink

Fetching Data in React with RxJS and <$> fragment

🔋 Power Up

🔧 Refactoring and <$> fragment

⏳ Loading indicator

⚠️ Error handling

🖼 Better UI

🍰 Bonus: anti-flickering

🎉 Outro

What React RxJS libs do You Use?

Text to Speech + Image — A Talkie in JS

Intro

Text-to-Speech

Animation and RxJS

Text-to-Speech and RxJS

Outro

Links

RxJS debounce vs throttle vs audit vs sample — Difference You Should Know

Outro

Psst.. need something more to read?

😉

Text to GIF animation — React Pet Project Devlog

0. Idea

1. Set up

2. JSON to images

3. Images to GIF

4. Text to JSON

5. Backend

6. Publication

Outro

The end