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!

Image for post
Image for post

It’s a sweetened countdown

Our first example! A simple mapping

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


source$.a.b.c.subscribe(…)

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

Image for post
Image for post

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

A simple use case:


From idea to publication … and how it didn’t quite go as planned

Image for post
Image for post
Photo credit: Author

I had an idea that it’d be cool to create storyboards from simple text, for example:


Image for post
Image for post

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:


or how to render a cat and a mouse the cool way

originally posted at dev.to

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

Image for post
Image for post
This and other examples are runable. Code images generated using carbon.now.sh

tl;dr

Github repo: github.com/recksjs/recks 🙂

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:


or how to fail not with Observables

As developers we tend to focus on happy paths for our apps, often neglecting its error prone parts, be it calls to a server or to a 3rd party API. In this article I want to give a quick overview of error handling in RxJS with a bunch of marble diagrams explaining what’s happening. I hope, the following examples and my mumbling will help you shorten the gap between our natural desire to pursue new features and our moral obligations to provide smoothest experience to our users. Lets go!

What happens when an error occurs on an RxJS stream?

the first thing to ask

Image for post
Image for post
simplest throwError example marble diagram

Well, basically, it fails. The error…


and other backpressure techniques

There are different ways to pause event streams: we can filter, delay, buffer, space events, etc. Some of the techniques will ignore events during pause (lossy), others will delay events handling until resumed (lossless). Some of them will keep their subscription, others will resubscribe — therefore their output will behave differently, depending on the source. In this article I’d like to explore several pausing techniques and suggest how they can be implemented using RxJS. Lets go!

Image for post
Image for post

Imagine we have an app that displays push notifications from the server. These notifications we will pause in all different ways!

Filtering (lossy)

Why: user wants…

Kostia Palchyk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store