Building responsive widgets

Vladimir Ivanenko — Sun, 22 May 2022 08:37:44 +0000

Prologue

A responsive interface in the era of mobile devices is more than just a good feature to have. It's one of the vital characteristics of an app or a website in its way to guarantee a nice user experience. And we got a powerful tool bringing it to life — Media Queries.

Though media queries provide us with a quite comprehensive set of capabilities they still have their limitations. One of them concerned me while I've been building widgets is that I can adapt the layout based only on the viewport but not a particular element's size.

There is an upcoming feature called Container Queries which once supported by browsers will give us more flexibility. As for now, the specification is in a working draft and we can't expect it to be widely available very soon.

If you're eager to try it now check out what browsers added experimental support for it already.

Let's get to the point.

"The point"

To be on the same page, let's define a problem first.

Why we may need to know an element's size?
Well, because we may want to make content inside adaptable for its different size variants. And in the case of widgets, we have no idea of a container's dimensions within which the widget is placed. And as we know, media queries won't help much because they work with the viewport.

The minimal solution is obvious and straightforward — add a prop to allow developers who use your widget component to decide what layout to apply. It's perfect for components libraries because it doesn't make assumptions itself on which layout variant is best but gives a developer a right to choose.

But there are certain cases when making a widget responsive right out of the box could be beneficial. Especially when it takes to visual builders or another tool for non-developers.

It's time to write some code.
React refs can give us access to a DOM element, therefore we can adjust a layout based on its width.

import { useState, useCallback } from "react";

function Widget() {
  const [layoutVariant, setLayoutVariant] = useState("default");
  const updateLayoutVariant = useCallback((element: Element | null) => {
    if (element) {
      const rect = element.getBoundingClientRect();
      setLayoutVariant(rect.width < 300 ? "narrow" : "default");
    }
  }, []);

  return <Layout variant={layoutVariant} ref={updateLayoutVariant} />;
}

And it works well enough.
If it meets your requirements, awesome, you can stick with it!

In the code above we set the layout variant only once when the component is mounted. If we expect the container's width changes during the component lifetime because of subsequent render or a window resize we have to make some improvements to our solution.

import {
  useState,
  useRef,
  useCallback,
  useEffect,
  useLayoutEffect
} from "react";

function Widget() {
  const [layoutVariant, setLayoutVariant] = useState("default");
  const containerRef = useRef<HTMLDivElement | null>(null);
  const updateLayoutVariant = useCallback(() => {
    if (containerRef.current) {
      const rect = containerRef.current.getBoundingClientRect();
      setLayoutVariant(rect.width < 300 ? "narrow" : "default");
    }
  }, []);

  useEffect(() => {
    window.addEventListener("resize", updateLayoutVariant);
    return () => {
      window.removeEventListener("resize", updateLayoutVariant);
    };
  }, [updateLayoutVariant]);

  useLayoutEffect(() => {
    updateLayoutVariant();
  });

  return (
    <Layout variant={layoutVariant} ref={containerRef} />
  );
}

Now we check out whether our widget's layout needs to be updated, however, the code became a bit more complicated.

There are open-source utilities that could be found helpful:
react-use-measure, react-use-rect.

Thank you for reading the article! Hope you could put it to good use.

Batching events with RxJS

Vladimir Ivanenko — Sat, 07 May 2022 09:38:02 +0000

What's that

Roughly speaking event batching is accumulating events for some time to process them all at once later.

We can employ two well-known strategies or even combine them to understand when it's time to flush and process the bunch of events buffered:

when the number of events reaches a threshold;
using an interval — e.g. flush events every 10 seconds.

Why use it

Event batching could be beneficial for:

performance reasons, for example, to reduce the number of writes into persistent storage or to optimize the amount of data transmitted over a network;
aggregation — e.g. to group by link and count page visits.

How to

Implementing event batching in JavaScript with RxJS is a no-brainer.

Let's start with a Node example.

const EventEmitter = require('events');
const { fromEvent, bufferCount } = require('rxjs');

// I assume you already have an instance of EventEmitter in your app. 
// In case I'm wrong, let's create the one.
const eventEmitter = new EventEmitter();

// listen to an event called `something-good-happened`
fromEvent(eventEmitter, 'something-good-happened')
   // accumulate events
  .pipe(
    // and flush them every time it's number reaches 3
    bufferCount(3),
    // let's log it
    tap(() => {
      console.log(
        `Great! The number of good things happened in a row reached ${events.length}. It's time to celebrate.`
      );
      console.log(events);
    })
  )
  // process the batch
  .subscribe((events) => {
    const goodThingsByUser = {};
    for (const event of events) {
        goodThingsByUser[event.userId] = (goodThingsByUser[event.userId] ?? 0) + 1;
    }
    // reportGoodThingsDone(goodThingsByUser);
  });

And of course, an example for a browser.

import { fromEvent, bufferTime, filter } from "rxjs";

// listen to clicks on the whole document
const clicks$ = fromEvent(
  document.documentElement,
  "click",
  // selecte only properties we need
  (event) => ({
    type: event.type,
    time: new Date(),
    x: event.x,
    y: event.y
  })
);

clicks$
  .pipe(
    // flush events every 1 second
    bufferTime(1000),
    // move next only if there is at least one event
    filter((events) => events.length > 0)
  )
  // process the batch
  .subscribe((events) => {
    fetch("/my-analytics", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(events)
    });
  });

One more live example here.

Note that there is no silver bullet and each solution has its drawbacks.
Bulk processing of a large bunch of events could dramatically worse the performance of your app because of blocking the main thread, which you should avoid at all costs. In case you expect to process lots of data consider using a message queue. Look at BullMQ for example.

Thank you for reading!

Could you share some examples of applying event batching in your projects?