📄 animationFrameScheduler example

#angular #rxjs #animationFrameScheduler

animationFrameScheduler is tailored for tasks that require synchronization with the browser's animation frame. It schedules tasks to be executed just before the next animation frame, ensuring smooth animations and minimizing unnecessary computations. For instance, we can utilize the animationFrameScheduler to update the UI based on animation frames, creating a visually pleasing and responsive user interface.

The scrollPosition$ observable captures the scroll position of the window on each scroll event. The animationFrameScheduler is used to ensure that the scroll position updates and smooth scrolling effect occur right before each animation frame, providing a visually smooth scrolling experience. When the user clicks the "scroll to top" button, the scrollPosition$ observable is subscribed to, and the window is scrolled smoothly towards the top in increments of 10 pixels until the scroll position reaches 0.

✅ Article Link: https://priyank-bhardwaj.medium.com/reactive-ninja-harnessing-rxjs-for-angular-mastery-part-2-7091aac29d60

📄 Custom Operators in RxJS

#angular #rxjs

✅ Article Link: https://medium.com/@navneetsingh_95791/custom-operators-in-rxjs-for-angular-applications-building-and-utilizing-your-own-operators-b5c281f979a1

📄 Custom RxJS operators 1/7: "Сache operator"

#angular #rxjs #cache

Often an RxJS stream represents an http request — a stream that emits a single value and completes. Performance-wise, it is a good practice to cache a response from a server for a certain amount of time. The built-in share operator can be configured to provide a caching mechanism with a Time To Live (TTL) for a response.

operator

import { ... } from 'rxjs';

function cache<T>(ttl: number = Infinity): MonoTypeOperatorFunction<T> {
  return share({
    connector: () => new ReplaySubject(1),
    resetOnComplete: () => timer(ttl),
  });
}

📄 Custom RxJS operators 2/7: "filterNil operator"

#angular #rxjs #filterNil

It is quite common to filter out null and undefined values from the resulting stream. Obviously, the built-in filter operator is the right tool to do the job, however in order to ensure proper type narrowing, the predicate function has to be a user-defined type guard. Therefore, it makes sense to encapsulate it into a custom RxJS operator.

operator

import { filter, OperatorFunction } from 'rxjs';

function filterNil<T>(): OperatorFunction<T, NonNullable<T>> {
  return filter((v): v is NonNullable<T> => v != undefined);
}

📄 Custom RxJS operators 3/7: "firstMatching operator"

#angular #rxjs #firstMatching

For most use cases, the task can be accomplished at least in two ways. However, there is a subtle difference when the source stream completes without having emitted a value that meets requirements. The detailed explanation can be found in one of my RxJS hints. The operator in question allows to choose a given strategy to handle such scenario based on the required argument.

operator

import { of, MonoTypeOperatorFunction, pipe, first, filter, take } from 'rxjs';

function firstMatching<T>(
  predicateFn: (v: T) => boolean,
  required: boolean = false
): MonoTypeOperatorFunction<T> {
  return required ? first(predicateFn) : pipe(filter(predicateFn), take(1));
}

📄 Custom RxJS operators 5/7: "pollWhile operator"

#angular #rxjs #pollWhile

The good old polling mechanism is still quite relevant in applications which rely on data that changes over a period of time. Let’s consider a scenario when an application has to make http requests in a certain time interval until an http response body fulfils a given condition, e.g. analysis status is set to completed. The built-in repeat operator combined with a limiting operator allows to accomplish the goal with a few lines of code.

operator

interface PollWhileConfig<T> {
  predicateFn: (v: T) => boolean;
  delay: number;
  count?: number;
  lastOnly?: boolean;
}

function pollWhile<T>({
  predicateFn,
  delay,
  count = Infinity,
  lastOnly = false,
}: PollWhileConfig<T>): MonoTypeOperatorFunction<T> {
  const limiter = lastOnly
    ? pipe(
        filter((v: T) => !predicateFn(v)),
        take(1)
      )
    : takeWhile(predicateFn, true);

  return pipe(repeat({ delay, count }), limiter);
}

📄 Custom RxJS operators 6/7: "retryForStatus operator"

#angular #rxjs #retryForStatus

The built-in retry operator allows to resubscribe to the source stream once an error has been thrown. It is possible to make a decision whether or not to retry based on the information contained in the error object. In turn, when it comes to streams that represent an http request, the operator can be configured to call an API again only for certain response statuses.

operator

interface ErrorWithStatus extends Error {
  status: number;
}

interface RetryForStatusConfig {
  retryableStatuses: number[];
  delay: number;
  count?: number;
}

function retryForStatus<T>({
  retryableStatuses,
  delay,
  count = Infinity,
}: RetryForStatusConfig): MonoTypeOperatorFunction<T> {
  return retry({
    count,
    delay: (err: ErrorWithStatus, retryCount) =>
      retryableStatuses.includes(err.status)
        ? timer(retryCount * delay)
        : throwError(() => err),
  });
}

📄 Custom RxJS operators 7/7: "toLatestFrom operator"

#angular #rxjs #toLatestFrom

The built-in withLatestFrom operator allows to add data from supplementary streams to the source stream. However, sometimes the source stream is just a trigger to perform a certain action for which data from supplementary streams is needed. As a result, the array of elements in the output stream contains a dummy first element. A better solution is to neglect the value from the trigger.

operator

function toLatestFrom<T, D1>(d1$: ObservableInput<D1>): OperatorFunction<T, D1>;
function toLatestFrom<T, D1, D extends unknown[]>(
  d1$: ObservableInput<D1>,
  ...data$: [...ObservableInputTuple<D>]
): OperatorFunction<T, [D1, ...D]>;

function toLatestFrom<D1, D extends unknown[]>(
  d1$: ObservableInput<D1>,
  ...data$: [...ObservableInputTuple<D>]
) {
  return pipe(
    withLatestFrom(d1$, ...data$),
    map(([_, ...data]) => (data.length === 1 ? data[0] : data))
  );
}