Resize Observer with an RXJS Twist

We all love using CSS Flex and Grids, don’t we?

However, in certain cases, a change in the Container dimension may require its content elements to be redrawn. To address such use cases, Resize Observer Specification was published.

I am glad to report that Resize Observer is now widely supported in modern browsers. Its type definitions are also merged in Typescript Lib with this PR.

However, In the age of RxJs Observables, I find the API for Resize Observer a bit cumbersome to use. And I started thinking … it would be nice to build an RxJs wrapper around this API!

This thought led me to the creation of the From-Resize library. The main goals for this library are listed below.

  • Return an RxJs Observable that emits on every container dimension change
  • Set the watch directions to be Horizontal, Vertical or All
  • Set an initial debounce time to control the emit frequency
  • Get notified on first load using emitOnStart
  • Harness the power of RxJs Operators to do wonders!

#javascript #react #rxjs #typescript

What is GEEK

Buddha Community

Resize Observer with an RXJS Twist

RxJS Basics in Examples

Let’s take a look at simple examples of using RxJS, and after that, I hope, you will get the basic idea behind it.

What will be covered in this article:

  • 1. Simplest example
  • 2. Observer
  • 3. Observable
  • 4. Subscription
  • 5. RxJS API List: “index” functions:
  • 5.1 concat
  • 5.2 merge
  • 5.3 forkJoin
  • 5.4 fromEvent
  • 5.5 iif
  • 5.6 defer
  • 6. Http requests using “ajax”

#subscription #observer #asynchronous #rxjs #observables

Resize Observer with an RXJS Twist

We all love using CSS Flex and Grids, don’t we?

However, in certain cases, a change in the Container dimension may require its content elements to be redrawn. To address such use cases, Resize Observer Specification was published.

I am glad to report that Resize Observer is now widely supported in modern browsers. Its type definitions are also merged in Typescript Lib with this PR.

However, In the age of RxJs Observables, I find the API for Resize Observer a bit cumbersome to use. And I started thinking … it would be nice to build an RxJs wrapper around this API!

This thought led me to the creation of the From-Resize library. The main goals for this library are listed below.

  • Return an RxJs Observable that emits on every container dimension change
  • Set the watch directions to be Horizontal, Vertical or All
  • Set an initial debounce time to control the emit frequency
  • Get notified on first load using emitOnStart
  • Harness the power of RxJs Operators to do wonders!

#javascript #react #rxjs #typescript

Nat  Grady

Nat Grady

1621428060

Angular Meets RxJS: Higher-order Observables

Introduction

This article belongs to a series called “Angular meets RxJS” in which I try to explain reactive programming using “RxJS” in an “Angular” context the best I can.

Table of contents

Basic concepts

RxJS subjects

RxJS operators (Part 1)

RxJS operators (Part 2)

RxJS operators (Part 3)

“takeUntil” and the “async” pipe

Higher-order observables

Error handling

RxJS schedulers (coming soon)

Mini-project: Build a Pokedex (coming soon)

In this article

As we saw in the article about  “RxJS” operators, a higher-order function in “JavaScript” is a function accepting another function in parameter or returning one. The same concept exists for observables. In this article, we are going to see why it is absolutely critical to understand them and how you can use them to simplify and secure your pipelines.

The situation

Let’s take a common situation as a basis for this article. Say you’re building a “Medium” clone to allow people to write some articles. A very nice feature of “Medium” is that it autosaves your document at regular interval.

To simulate the REST API, I’ll use the “json-server” npm package. If you don’t know it, it’s a very useful package that provides a REST API based on a “JSON” file.

Below are the steps required to set it up, you can skip these if you don’t want to replicate the examples of this article on your computer.

Start by installing “json-server” globally by running the command:

yarn global add json-server

Once this is done, create a file called “db.json” with the following content:

{
    "documents": [
        {
            "id": "1",
            "lastUpdate": null
        }
    ]
}

#observables #angular #rxjs #javascript

Rupert  Beatty

Rupert Beatty

1616102700

Angular Meets RxJS: RxJS Operators

Introduction

This article belongs to a series called “Angular meets RxJS” in which I try to explain reactive programming using “RxJS” in an “Angular” context the best I can.

Table of contents

Basic concepts

RxJS subjects

RxJS operators (Part 1)

RxJS operators (Part 2)

RxJS operators (Part 3)

“takeUntil” and the “async” pipe

Higher-order observables

Error handling

RxJS schedulers (coming soon)

Mini-project: Build a Pokedex (coming soon)

In the previous article…

…we talked about functional programming, marble diagrams and creation operators. We used them to create observables out of regular values or by combining other observables. Now, we’re going to see the other type of operators: the pipeable ones. These operators are used to transform an observable into another one.

There are more than a hundred of operators so it’s obvious that I won’t talk about all of them. Indeed, I’ll focus on the most popular and useful ones. However, if you have any question or if you think that I forgot an important one, please tell me in the comments and I’ll update the article.

#angular #reactive-programming #observables #javascript #rxjs

Shawn  Durgan

Shawn Durgan

1603591204

Reactive Programming: Hot Vs. Cold Observables

The Observer Pattern is at the core of reactive programming, and observables come in two flavors: hot and cold. This is not explicit when you are coding, so this article explains how to tell the difference and switch to a hot observable. The focus is on hot observables. The concepts here are relevant to all languages that support reactive programming, but the examples are in C#. It’s critical to understand the distinction before you start doing reactive programming because it will bring you unstuck if you don’t.

Please support this blog by signing up for my course Introduction to Uno Platform.

Reactive Programming

It’s hard to clearly define what Reactive Programming is because it spans so many languages and platforms, and it has overlap with programming constructs like events in C#. I recommend reading through the Wikipedia article because it attempts to give a history of reactive programming and provide objective information.

In a nutshell, reactive programming is about responding to events in the form of sequences (also known as streams) of data. Technically, any programming pattern that deals with this is a form of reactive programming. However, a pattern called the Observer pattern has emerged as the de facto standard for reactive programming. Most programming languages have frameworks for implementing the observer pattern, and the observer pattern has become almost synonymous with reactive programming.

Here are some popular frameworks:

RxJS (JavaScript)

ReactiveUI (.Net)

ReactiveX (Java oriented – with implementations for many platforms)

RxDart (Dart)

The concept is simple. Observables hold information about observers who subscribe to sequences of notifications. The observable is responsible for sending notifications to all of the subscribed observers.

Note: The publish-subscribe (pub/sub pattern) is a closely related pattern, and although technically different, is sometimes used interchangeably with the observer pattern.

Hot Observables

Hot observables start producing notifications independently of subscriptions. Cold observables only produce notifications when there are one or more subscriptions.

Take some time to read up about the observer pattern if you are not familiar. If you start Googling, be prepared for many different interpretations of the meaning. This article explains it well and gives examples in C#. This article is another good article on the topic of hot and cold observables.

A hot observable is simpler because only one process runs to generate the notifications, and this process notifies all the observers. A hot observable can start without any subscribed observers and can continue after the last observer unsubscribes.

On the other hand, a cold observable process generally only starts when a subscription occurs and shuts down when the subscription ends. It can run a process for each subscribed observer. This is for more complex use cases.

#.net #c# #reactive programming #software #.net #dart #hot observable #java #javascript #observable #observer pattern #pubsub #reactive #reactiveui