loading...
Cover image for 🐢 Intro to Recks: Rx+JSX experiment

🐢 Intro to Recks: Rx+JSX experiment

kosich profile image Kostia Palchyk Updated on ・9 min read

recks (4 Part Series)

1) 🐢 Intro to Recks: Rx+JSX experiment 2) 🐢 Promises in Recks: Rx+JSX experiment 3) 🐢 Truly reactive! Rx+JSX experiment 4) 🐢 SVG and DOM Events: Rx+JSX experiment updates

I like React. And I love RxJS. So I tried to mix them in a new framework:

import { timer } from 'rxjs';

function App() {
  const ticks$ = timer(0, 1000);

  return <div>
    <h1>{ ticks$ }</h1>
    <p>seconds passed</p>
  </div>
}
run this example

tl;dr

Github repo πŸ™‚

Foreword

I've built this rendering engine in about a week for a hackathon. It turned out to be an interesting concept, that I wanted to share with you here!

The concept

React made DOM "first-class citizen" in our JS code (via virtual DOM). We can create vDOM anywhere in our structure and then pass it around.
React's components are basically a mapping of properties to vDOM:

// React
(props: Object) => vDOM

Angular deeply integrated Observable streams and made them native to its components and services. Observables let us easily operate and coordinate async events and updates, spread in time.

In this framework, we (similarly to React) map properties to vDOM. Only here we fully control update and render streams. We take the input stream of props and map them to the output stream of vDOM:

// This framework
(props$: Observable<Object>) => Observable<vDOM>

Stream in. Stream out.

everything is a stream

Beloved dog from AndrΓ© Staltz' great article

Let's get to examples, shall we?

Basic usage

Surely, we have to start with a "Hello World":

import { of } from 'rxjs';

function App() {
  return of(<h1>Hello world!</h1>)
}

of creates an Observable that emits a single provided value

Since our component renders a static <h1> and never updates it β€” we can skip the Observable part and simply return the element:

function App() {
  return <h1>Hello world!</h1>
}

Looks react-ish, doesn't it? Let's add more life to our components:

A Timer

import { timer } from 'rxjs';
import { map } from 'rxjs/operators';

function TimerApp() {
  return timer(0, 1000).pipe(
    map(tick =>
      <div>
        <h1>{ tick }</h1>
        <p>seconds passed</p>
      </div>
    )
  )
}

timer(n, m) emits a 0 at n and then will emit consequent integers with m interval

Again our component returns a stream of vDOM. Each time a component emits a value β€” the vDOM is updated.

In this example, timer will emit a new value every second. That value we will map to a new vDOM, displaying each tick in the <h1>.

We can do this even simpler!

If a child in the vDOM is an Observable itself β€” the engine will start listening to it and render its values in place. So let's move the timer Observable right into the <h1>:

import { timer } from 'rxjs';

function TimerApp() {
  const ticks$ = timer(0, 1000);

  return <div>
    <h1>{ ticks$ }</h1>
    <p>seconds passed</p>
  </div>
}
run this example (this one is the same as in the header)

This allows us to define more fine updates with neat syntax.

Note that the component function will be called only once. When the Observable timer(0, 1000) emits a value β€” the vDOM will be updated in place, without recalculating or updating other parts of the tree

State

When we need a local state in a component β€” we can create one or several Subjects to write and listen to.

Subjects are Observables that also let us push values into them. So we can both listen and emit events

Here's an example:

import { Subject } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

function GreetingApp() {
  const name$ = new Subject();
  const view$ = name$.pipe(
    map(x => x ? `Hello, ${x}!` : ''),
    startWith('')
  );

  return <div>
    <input
      placeholder="enter your name"
      onInput={e => name$.next(e.target.value)}
    />
    { view$ }
  </div>
}
run the greeting input example

In the example above when the text field emits an input event β€” we push its value to name$ stream. view$ stream that we display derives from name$ input stream.

Note that we are using a startWith operator for the view$: to optimize rendering the engine waits for the first emission from all children before rendering them. So if we remove the startWith β€” <div> will be rendered empty, until the view$ emits a value. Therefore we need to either add a startWith operator or to wrap the Observable child with a static child, e.g. <span>{ view$ }</span>

And a more conventional example with a counter:

function CounterApp() {
  const input$ = new Subject();
  const view$  = input$.pipe(
      startWith(0),
      scan((acc, curr) => acc + curr)
    );

  return <div>
    <button onClick={ ()=>input$.next(-1) }>minus</button>
    { view$ }
    <button onClick={ ()=>input$.next( 1) }>plus</button>
  </div>
}
run the counter example

In this example again we have an input$ Subject that we'll push updates to. The view$ Observable accumulates emissions from the input$ using scan operator and will display our state. E.g. when we push 1, 1, 1 to the input$ β€” we get a 1, 2, 3 on the view$.

Refs or "real DOM deal"

Sometimes we need to interact with DOM API. For that React uses special ref objects, that contain a reference to the current DOM element in their current property:

// A React component
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus(); // `current` points to the mounted text input element
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    <div/>
  );
}

Of course in this framework, we get a stream of DOM references! Once a DOM element is created or replacedβ€Š-β€Šthe engine pushes a new reference to the stream. We only need to provide the engine with a place for references to be pushed toβ€Š-β€Ša Subject. The engine will push the HTML element to it once it is attached to the real DOM. Thus we get a stream of HTMLElements and can apply our logic either to each update or to the latest reference.

Here we'll focus the <input /> each time the <button/> is clicked:

// This framework
function TextInputWithFocusButton() {
  const ref$    = new Subject();
  const clicks$ = new Subject();

  clicks$
    .pipe(withLatestFrom(ref$, (_, ref) => ref))
    .subscribe(ref => {
      ref.focus();
    });

  return (
    <div>
      <input ref={ref$} type="text" />
      <button onClick={ ()=>clicks$.next(null) }>Focus the input</button>
    </div>
  );
}
run the refs example

Subcomponents

So far we had components that only returned Observable results, and didn't have to react to any input. Here's an example of a parent component providing properties to a child component:

import { timer } from 'rxjs';
import { map } from 'rxjs/operators';


function Parent () {
  return <div>{
    timer(0, 1000).pipe(
      map(i => <Child index={i} />)
    )
  }</div>
}

function Child (props$) {
  const animal$ = props$.pipe(
    map(props => props.index % 2 ? '🐱' : '🐭')
  )

  return <h1 style="text-align: center;">{animal$}</h1>
}
run the cat-mouse example

When a Parent is rendering a Child for the first time β€” it's rendering <Child index={ 0 } />. The engine will create a Child and push the { index: 0 } props object to the subcomponent's props$ Observable. The child will immediately react with a mouse 🐭.

Later when the timer ticks again and emits <Child index={ 1 } /> β€” the engine will only push { index: 1 } to the existing Child props$.

The Child will now produce a cat 🐱.

And so on.

A cat

An example of a cat that could be produced by a component
Photo by Michael Sum on Unsplash

Redux

For bigger apps, we'll need a bit more sophisticated state management, then just a bunch of Subjects. Any implementation that outputs in an observable way would work with Recks! Let's try redogs state manager β€” it's redux, redux-observable and typesafe-actions in one small package. Redogs outputs to an Observable, so we'll easily integrate it!

Let's be innovative and create a simple To Do List app as an example πŸ™‚

First, we'll create the store:

import { createStore } from 'redogs';
import { reducer } from './reducer';
import { effects } from './effects';

export const store = createStore(reducer, effects);

Now we can access the state changes of the store in our components:

import { store } from './store';

function ItemListComponent() {
  const items$ = store.state$.pipe(
    map(state =>
      state.items.map(item => (
        <ItemComponent key={item.id} data={item} />
      ))
    )
  );

  return <div>{items$}</div>;
}

Or dispatch events to it:

import { store } from './store';

function AddItemComponent() {
  const addItem = event => {
    event.preventDefault();
    const input = event.target['title'];
    store.dispatch(
      addItemAction({
        title: input.value
      })
    );
    input.value = '';
  };

  return (
    <form onSubmit={addItem}>
      <input name="title" type="text" autocomplete="off" />
      <button type="submit">Add</button>
    </form>
  );
}

For brevity, I'll skip showing reducers, effects, and other components here. Please, see the full redux app example at codesandbox.

Note that we don't have to learn reselect and re-reselect APIs to interact with redux.

We don't have to tweak proprietary static getDerivedStateFromProps() or worry about UNSAFE_componentWillReceiveProps() and UNSAFE_componentWillUpdate() to be efficient with the framework.

We only need to know Observables, they are lingua franca in Recks.

Unlike React

For a React component to trigger a self-update β€” it has to update its state or props (indirectly). React itself will decide when to re-render your component. If you want to prevent unnecessary recalculations and re-renderings β€” there are several API methods (or hooks), that you can use to advice React how to deal with your component.

In this framework I wanted to make this flow more transparent and adjustable: you directly manipulate the output stream based on the input stream, using well known RxJS operators: filter, debounce, throttle, audit, sample, scan, buffer and many-many others.

You decide when and how to update your component!

Status

Recks source code is published to github.com/recksjs/recks

To try the framework, you can either:

git clone --depth=1 https://github.com/recksjs/recks-starter-project.git
cd recks-starter-project
npm i
npm start

The package is also available via npm i recks, all you need is to set up your JSX transpiler (babel, typescript compiler) to use Recks.createElement pragma.

[ Warning ] This is a concept, not a production-ready library.

Disclaimers

First of all, several times I've called this library a "framework", yet this is no more of a "framework" than react is. So one might prefer to call it "tool" or "library". It's up to you πŸ™‚

Also, my comparisons to React are purely conceptual. React is a mature framework, supported by a smart team of professionals, surrounded by a brilliant community.

This one is a week old, built by me 🐢

Alternatives

There's one library that provides a React hook to interact with Observables: rxjs-hooks. It works via a useState hook to update the component's state each time an Observable emits, which triggers component re-render. Worth checking out!

Another elephant I should mention here is a real streams-driven framework: cycle.js by AndrΓ© Staltz. It has a lot of supporters and solid integrations. Cycle.js has a bit different API of using subcomponents and interacting with DOM. Give it a try!

If you know other alternatives β€” please, share

Outro

Okay, that's it!

Should this project development continue?
What features would you like to see next?
I'd love to know your thoughts, so leave a comment, please πŸ™‚

If you enjoyed reading this article β€” press the "heart" and share: this will let me understand the usefulness of this topic and will help others discover this read.

In the following posts, we'll review other Recks integrations, I will share plans for features and publish project updates. So follow me here on dev.to and twitter to stay tuned!

I'm proud that you've read so far!
Thank you

The end

header photo by Matthew Smith on Unsplash

recks (4 Part Series)

1) 🐢 Intro to Recks: Rx+JSX experiment 2) 🐢 Promises in Recks: Rx+JSX experiment 3) 🐢 Truly reactive! Rx+JSX experiment 4) 🐢 SVG and DOM Events: Rx+JSX experiment updates

Posted on by:

Discussion

markdown guide
 

It would be helpful if you linked to the Github repo in the first paragraph. Just had to scan the whole article to find the link.

(Really like the idea of your library -- I've been waiting for someone to make something like this πŸ‘)

 

Hi, John!

I agree, one repo is worth a thousand words πŸ™‚ I've updated the article, thanks!

And thank you for the feedback, it's very important for me to keep going, really!

P.S. I'm currently working on a new feature to improve dev experience, so stay tuned πŸ˜‰