DEV Community: Mukul Jain

SmartGrid: Light, customisable & multi grid with minimal config.

Mukul Jain — Sat, 31 Jul 2021 11:36:12 +0000

Introducing smart grid, a lightweight 116 B, customisable (UI is up to you), multigrid (multiple pinned columns/grids) all with minimal config.

Smart Grid is not a component anymore as it was in v1 but a React hook, making UI customisable as much as a developer wants, instead of depending upon the library to create features or provide support, make your own.

Smart Grid provides required methods enabling core table features without hassle so you can focus more on UI and other important features.

Smart Grid API

const { onScroll, rowRenderer } = useGrid({
    data: state.data,
    rowHeight: 40,
    buffer: 10,
    limit: 20,
    loadMore: getData,
    // true by default
    virtualized: true
  });

      <table role="table">
        <thead>
          <tr role="row">
            <th role="cell" colSpan={4}></th>
            <th role="cell" colSpan={3}>
              Car
            </th>
          </tr>
          <tr role="row">
            <th colSpan={1} role="cell">
              First Name
            </th>
            <th colSpan={1} role="cell">
              Last Name
            </th>
            <th colSpan={1} role="cell">
              Age
            </th>
            <th colSpan={1} role="cell">
              Email
            </th>
            <th colSpan={1} role="cell">
              Make
            </th>
            <th colSpan={1} role="cell">
              Model
            </th>
            <th colSpan={1} role="cell">
              Year
            </th>
          </tr>
        </thead>
        <tbody
          role="rowgroup"
          onScroll={onScroll}
        >
          {rowRenderer((row, style, index, ref) =>
              <tr
                role="row"
                ref={ref}
                className="table-row"
                data-testid={`table-row-${index}`}
                style={style}
                key={index}
              >
                <td role="cell">{row.firstName}</td>
                <td role="cell">{row.lastName}</td>
                <td role="cell">{row.age}</td>
                <td role="cell">{row.email}</td>
                <td role="cell">{row.carMake}</td>
                <td role="cell">{row.carModel}</td>
                <td role="cell">{row.carYear}</td>
              </tr>
          )}
        </tbody>
      </table>

That's it, you can pass virtualized as false in the case of small tables to increase the performance. If you need to apply any filter on like sorting or filtering, you can do that to it.

const filteredData = React.useMemo(() => filter(state.data), [...])
const { onScroll, rowRenderer } = useGrid({
    data: filter(state.data),
    rowHeight: 40,
    buffer: 10,
    limit: 20,
    loadMore: getData,
    // true by default
    virtualized: true
  });

If you are table supports column setting, I would advice you to maintain a schema for columns and using that schema to show/hide columns.

Benefit of keeping these things out useGrid is, first the UI: it's totally upto your logic which remains outside, you don't have to use any hacks and smart grid is focused on what it should do.

Pinned Columns | MultiGrid

Pinned columns are possible through multiple grids using useGrids and are little complicated than useGrid where only 2 properties were sufficient to create a grid here the case is different

const {
    onScroll,
    rowRenderers,
    tableHeight,
    tableRef,
    GridHeaders,
    GridBodies,
    ScrollBars,
  } = useGrids(3, {
    data: loading.current ? data.concat([null, null]) : data,
    rowHeight: 40,
    buffer: 10,
    limit:20,
    dynamicHeight: true,
    loadMore: getData,
  });

GridHeaders, GridBodies, ScrollBars are just div with internal refs. In multi grid a lot happens which is not in scope for this introductory blog, you can visit the doc for more.

Why Smart Grid

There are tones of table/grid libraries out there, do we need one more? How does it stand out?

I will compare it with 3 awesome tables out there

	Smart Grid	Ag Grid	React Virtualized	React Table
Size	116 Bytes	200 kb+	27.4 kb	8 - 15+ kb
MultiGrid	Yes	Yes	Yes	No
Scroll Sync	Yes	Yes	No	NA
Hooks	Yes	No	No	Yes
Write your table UI	Yes	No	No	Yes

Scroll Sync: It's an issue where the scroll bar for 2 tables goes out of sync. It's not a bug in the table but that's how the browser handles scrolling

AG Grid

Ag Grid is one the best and most feature-loaded grid out there only bad thing is its size so for smaller projects it's not the best choice to go ahead with it. You can customize the UI but there always will be limitations as things are abstracted from you. This was the original inspiration that led to the development of Smart Grid.

React Virtualized

Another awesome component, the only problem with it is the scroll sync issue, the size and customization.

React Table

React table is in active support and hook based library. It got a lot of features and plugins at your fingertips where it lacks is multi grids and a little learning curve, as it got a lot of pre-defined API/plugins, they also contribute to size.

Each library has its pros & cons at the end it's about the requirements.

Repo: https://github.com/mukuljainx/smart-grid
Doc: https://smartgrid.mukulja.in/

Thank you, Reader. I would be very happy to hear out your feedback & views in the comment.

--EOF--

JavaScript: Simplifying 'this'

Mukul Jain — Mon, 26 Jul 2021 21:07:46 +0000

The Basics

this in any scope is equivalent to the object, implicitly it's the object from it is being call called as you must have read this depends on the call site, how and where the function is being called. Explicitly you can set this too, using bind, call or apply we will cover these later.

A simple example

var obj = {
  age: 2,
  printAge: function () {
    console.log(this.age);
  },
};

obj.printAge(); // 2

Arrow functions

Arrow functions are not just syntactical sugar over the normal function apart from other differences, one major difference is value of this it follows the lexical static binding i.e. this is not dynamic anymore. this is same as this of outer lexical scope. What does outer lexical scope mean?

Scope of the the parent function!

const x = {
  y: 2,
  x1: {
    m1: () => console.log(1, this),
  },
  x2: function () {
    const y2 = {
      m1: () => console.log(2, this),
      m2: function () {
        const y3 = {
          m3: () => console.log(3, this),
        };
        return y3;
      },
    };
    return y2;
  },
};

x.x2().m1(); // 2, {y: 2, x1: Object, x2: ƒ x2()}
x.x2().m2().m3(); // 3, {m1: ƒ m1(), m2: ƒ m2()}

All function which are defined on top level are defined on window object hence this === windows for top level functions. this is undefined with strict mode enabled or with modules.

Let's take an example

var a = 1;

function incA() {
  this.a = this.a + 1;
}

incA();

console.log(a); // 2

Note: The above example holds only for "script" not "module", it will work in browser console's but not in CodeSandBox for the same reason.

Class and "this"

There are some rules, relevant one for our discussion are

Arrow function can't be used as constructor.
this in arrow will be equal to the instance of this class. How? Checkout: Transpiled code sample for Class

Let's take an example

class X {
  name = 2;
  method1() {
    console.log(this.name);
  }
  method2 = () => {
    console.log(this.name);
  };
}

const z = new X();
z.method1(); // 2
z.method2(); // 2

let's add two more method

class X {
  name = 2;
  method1() {
    console.log(this.name);
  }
  method2 = () => {
    console.log(this.name);
  };
  method3() {
    this.method1();
  }
  method4 = () => {
    this.method2();
  };
}

const z = new X();
z.method3(); // 2
z.method4(); // 2

Still nothing changes as method3 is being called for the the object (z) itself so it got the context and method4 has static binding.

Add the following code in the end:

const method5 = z.method3;
const method6 = z.method4;

method6(); // 2
method5(); // TypeError: Cannot read property 'method1' of undefined

As method5 has now lost the context it can't point to this, you must be wondering why it throws error instead of undefined as we discussed initially!

Module ? Nope, not this time!

It's due to implementation of class. Class are defined as function inside immediately invoked function expression.

That's why it's important to bind function in React. Not all but only those which will be passed to event handler or similar pattern as they are gonna loose the context of the component instance or use arrow functions.

Overriding "this"

There might be a case where you would like to call a method from one object with another object for example

This example will be used throughout the section

const square1 = {
  side: 5,
  getArea: function () {
    return this.side * this.side;
  },
};

const square2 = {
  side: 10,
};

console.log(square1.getArea()); // 25
console.log(square1.getArea.call(square2)); //100

// This will work as well
const getArea = square1.getArea;
console.log(getArea.call(square2)); //100

// This too
const getArea2 = square1.getArea.bind(square2);
console.log(getArea2()); //100

bind vs call

With call you can specify the object while calling a method and with each call you can pass another object.

const square3 = {
  side: 20,
};
console.log(getArea.call(square3)); //400

bind is one time contract, once a method have formed bond with an object, it can't be broken, you cannot bind that again or use call on it.

// const getArea2 = square1.getArea.bind(square2);
console.log(getArea2()); //100
console.log(getArea2.call(square3));

const getArea3 = getArea2.bind(square3); // 100
console.log(getArea3()); // 100

apply is same as call, it just expects array of parameters instead of individual parameters.

--EOF--

Micro frontend: A Windows clone with micro apps

Mukul Jain — Sun, 20 Jun 2021 10:44:01 +0000

I was planning to build an online portfolio as an OS clone, my idea was to build it as a portfolio and present mine different project as apps with capability to add any app in runtime.

Then I dropped the idea and stick with capability to add any app i.e. Micro frontend. The OS clone is mostly gimmick.

What works

Folder Navigation
Photo app
New folder and rename folder (not for desktop route, bug!)
Start Menu (though nothing is clickable)
Rearrangeable Quick apps (Tutorial)
Notification Shell
Quick Actions
Calendar micro app

Not working

Upload app have stopped working ( Probably due to space or similar constraints on Heroku)

What is Micro frontend

It's a design approach similar to micro services, instead of creating a big frontend app we can break into a collection loosely coupled frontend apps built on same or different technologies might be working together.

How it started

Years back we used to have website/apps with bunch of HTML or PHP files. Around from 2006 people start updating the page with partial HTML into the DOM using browser API's updating the portion or complete page with a never need for a reload, these were the building steps towards the SPA.

Then in 2010 Angular came and took the web by storm as it was introduced by Google almost everyone was into it, it bought all the good and required parts needed for SPA in one place the Angular Framework. Back then it was really amazing it still is and a lot of things have changed. After a while in 2013 React was launched by Facebook and it doesn't took it much time to gain the upper hand from 2015 React had almost double the downloads source: npmtrends, and now it's around 20 times more, there were various reason behind this like virtual DOM which made React more performant (though Angular caught up later), low learning curve, JSX etc.

How its Going

Then came the the Micro frontend

"An architectural style where independently deliverable frontend applications are composed into a greater whole"

- Martin fowler

The goal is to make development and delivery easier for different teams ideally there should be no dependency on each other, failure of one app will not effect the others, simplest example can be a nav which loads different app on each route, without reload.

User will never know how the apps are loading the are different or components it will behave like a SPA but behind the scene there can be multiple apps powering it. Instead of route they can also co-exist on same page, like widgets exist on home screen of mobile or desktop.

Those widgets belong to different apps but work on same screen and are totally decoupled but if you will load two widget from same app, like Todo list and Todo Counter, completing a item from list should also decrease the count, here the data in store is updating and other was listening to it, other method can be dispatching events.

How micro apps work in Web OS

Build any app on Code Sandbox using the CRA template with nothing in public folder. (This has not been handled yet)
Zip the app.
Upload with App manager with required meta data.
App will be installed in OS to use in runtime.

The calendar app there was uploaded in same manner!

This all sounds cool, but whats really happening?

Behind the scenes

There are numerous ways to do this, we just need the app code/bundle which we build with Code Sandbox and a specific div to mount!

Okay so we need an app bundle and we have a zip, then bundle it!

That's what happens on uploading an app, I unzip it, copies required files to bundle, a Webpack config and few other things. The reason I am not using CRA's react-script because I need a single bundle (main.js)! (We will cover this later), have to handle assets so I can load them appropriately.

After building the app, I pushed it into a bucket with a specific prefix, a unique ID generated during app upload. Now whenever user clicks on the icon, main React app calls for bundle of that mini app.

Every asset including main.js is behind an endpoint right now in the node app which in turns streams the files from bucket, so even if the bucket url changes the I will only have to update my endpoint's controller, I can enable CDN here as the all are files for faster delivery.

On the UI side whenever user clicks on an app, along with fetching the main.js I dynamically creates a div with id required to mount it. Then the React app javascript just executes and mount itself into that id. After that it's same as any React app. Communication between this app and the OS app will not be straight forward as they are not sharing the same context so we have to some helper function on window to facilitate that.

Chunking

When I was creating this whole scenario I was unable to figure out how to get entry points for particular app, as if an app will have multiple chunks few chunks will be require to start the app this can be done too, then we will need to load those JS files/chunk while instead of just loading single JS file.

Authentication

This was an POC so auth was not important but there is an option to sign with Google to upload apps. Let say an app Chat requires user to sign in now authenticating same user multiple times for different apps doesn't provides a good experience, this can be solved by off loading the user management to a single app, the main App, if any other apps require authentication they can share the access token of the main app and get back an access token for that particular app. On server side Chat app micro service will be communicating with the main app service to generate an access token specific to this app or they can just share the one token for each app.

I tried to keep a very modular approach while development so I can make everything as Micro apps but haven't done so, this way the can we replace or update any app on runtime and different user can have different apps for same thing, like the folder app. An app just need to follow the schema for CRUD operation how they do that is up to them.

Not every big app is needed to be breakdown as micro apps, there are other ways too, even for easier development like Bit ecosystem, or just a better component model! It all depends on the requirement.

Feel free to share your thoughts/feedback in comments!

--EOF--

Using Dev.to as CMS for Gatsby(or any) Portfolio

Mukul Jain — Sun, 13 Jun 2021 12:37:25 +0000

About 3 weeks earlier I started writing blogs on Dev.to but I also had a portfolio with blogs, obviously I would like to maintain blogs at both places, for this I started manually, I wrote blogs on my portfolio and copied the same blog here dev.to. Even though I don't write more than 2 blogs a week it was manual work and was little tiring to do so, I am lazy. On top of it if there is changes in one blog I have to replicate it on both places, which can be easily missed. I automated it with 1 click! even it can be fully automated with CRON jobs on Lambda/workers or on any existing server!

Requirement / User stories

I write 1-3 blogs per week.
Maximum update I make on average is 4 per blog within span of 24 hours after that there are rarely any updates.
Even if one of the platform dev.to or my portfolio is few hours behind it's alright for me.

Solutions

RSS feed

So there is a wonderful features Publishing to DEV Community from RSS by dev.to can be accessed in settings

I just to push my blogs to a RSS feed and let dev.to fetch them from there.

Major points to noted!

Formatting will typically look good, but you may have to make manual fixes. In the case of Medium, you may have to manually fix embeds.
Updates are periodically fetched (CRON jobs!)
Blog will as draft in my dashboard I have to manually publish it.

The first pain point for me is I have to create RSS feeds, it might be easy but currently I have no idea how to do it then there are manual steps which I highlighted above.

But after getting to know about this hook, I though what if dev.to provides open API's?

Voila there are

Dev API's

A simple Google search landed me to API documentation

With API's I don't even have to worry about updating my blog!

What API do we need?

Listing: to get the list
Content: to get the blog content

Both are available that too with very useful filters

I am using https://dev.to/api/articles?username=mukuljainx to fetch the list of blogs

and

https://dev.to/api/articles/mukuljainx/useeffect-the-basics-and-the-secrets-4ehg to fetch a particular article/blog

The listing API's provide me a lot things for an article, there is more, listing the important ones

{
  type_of: string;
  id: number;
  title: string;
  description: string;
  readable_publish_date: string;
  // unique url endpoint for that article
  slug: string;
  path: string;
  url: string;
  comments_count: number;
  public_reactions_count: number;
  collection_id: number;
  published_timestamp: Date;
  positive_reactions_count: number;
  cover_image: string;
  user: {...};
}

For listing I needed title, time, reading time, description, slug (to keep the article url same as here in portfolio as it's unique for a user).

Content API

It provides the information about the article above as well as rendered HTML and raw markdown, using the rendered HTML I can directly show any blog in my portfolio I just have to append it, problem with approach is theme will differ, every portfolio have it's own theme! so do mine, for example I am using different CSS to represent code blocks, different colors for links.

Either I can overwrite the CSS but class names might change in future or the HTML arrangement, the only things which gonna stay same is raw markdown and we will use it!

To use the raw markdown we need a parser which can convert it into HTML in run-time, I already had one parser. I am using Gatsby for my portfolio and their official gatsby-transformer-remark plugin to convert my MD files to HTML one and using CSS to prettify it as needed.

A code block looks like

Either I have to change my parser as gatsby-transformer-remark parses MD files not raw MD in runtime (it might be, I didn't explored much) or use any other library for the same.

But if you remember the requirements, I might not need live updates, I don't mind if my portfolio blogs are updated after 10 hours.

I already have a setup Gatsby plugins are already parsing Markdown files and creating a static site, so it will be fast on any system and even with lower internet speed, Gatsby do a lot of enhancement to achieve this you can read more here

What if I can generate temporary MD files on top of content fetched from dev.to just before the build, in the same folder from where the plugin was already picking. For listing I can source the data from listing API to GraphQL (Gatsby uses it as default datasource)

This can be achieved using the gatsby-node.js

Gatsby Nodejs

Don't know Nodejs? not a problem at least for this part, as it's an enviorment with bunch of awesome API's but still is JS. We will be using 2 node API fs and path one to resolve path and another to write files on that path! That's it.

There is a hook onPreInit which runs before all plugin and return a promise from it so Gatsby can wait before proceeding further.

I used axios to make API calls and fs to write files,

I got the articles list from listing API
Then fetched each article using the slug
Saved the raw MD, with some meta.

const axios = require("axios");
const fs = require("fs");
const path = require("path");


const getAllArticles = async (listing) => {
  return new Promise(async (resolve) => {
    const articles = await Promise.allSettled(
      listing.map((list) =>
        axios.get(`https://dev.to/api/articles/mukuljainx/${list.slug}`)
      )
    );

    resolve(articles.map((x) => x.value.data));
  });
};

// Creates files from dev.to blogs
// exports.onPreInit === export const onPreInit
// or export { onPreInit }
// things differ due to different module format
exports.onPreInit = async () => {
  return new Promise(async (resolve, reject) => {
    const listingJSON = await axios.get(
      "https://dev.to/api/articles/latest?username=mukuljainx"
    );
    const listing = listingJSON.data;

    const articles = await getAllArticles(listing);

    articles.forEach((article) => {
      // meta for that file, can be accessed using query
      const meta = {
        slug: `/blog/${article.slug}`,
        date: article.created_at,
        readableDate: article.readable_publish_date,
        title: article.title,
        preview: article.description,
        readingTime: article.reading_time_minutes,
        reactionsCount: article.public_reactions_count,
        commentsCount: article.comments_count,
        url: article.url,
      };
      fs.writeFileSync(
        path.resolve(`${__dirname}/src/pages/posts/dev-to-${article.slug}.md`),

        "---\n" +
          Object.keys(meta)
            .map((k) => `${k}: "${meta[k]}"`)
            .join("\n") +
          "\n" +
          "---\n" +
          article.body_markdown,
        "utf8"
      );

      resolve();
    });
  });
};

Check it on Github (Consider starting it, if you found it useful)

Build it

This is all but I still need to build my site to reflect the changes to automate it one can use CRON jobs (free works on Cloud flare or Heroku), I am not doing it as it's not worth it right now. I just to have click "Build" on Cloud flare.

Even Dev.to provides generated portfolio/sites using stackbit, but the themes are limited and can't use the custom one. They might be using somewhat same approaches with CRON updates!

Either you can use this approach, API's mentioned above or Stackbit.

--EOF--

How to Create a 2D draggable grid with react-spring: The showdown

Mukul Jain — Sun, 13 Jun 2021 10:33:42 +0000

Welcome to the final part of the series! In the last part we had a grid with every block moving separately, today we will convert it into a defined grid, where each block can only replace another block and on dragging over other blocks grid will re-arrange it self to make appropriate space for this one.

Take a glance to final piece older code demo and motivate yourself.

We will be using react-spring for this purpose so install it locally or add it to code sandbox. Though we are using react-spring you can easily replace it with other library or plain react!

What is React Spring

React spring is one of the most popular React animation library, it is spring-physics, to give essence of real world interaction. All the API's are pretty simple and similar, like you want to move something.



const styles = useSpring({
    from: { x: 0, ...otherCSSPropertiesYouWantAnimate},
    to: { x: 100, ...sameProperties},
  })

or just



const styles = useSpring({ opacity: toggle ? 1 : 0 })

as you might have guess styles contains the css to move something, react-spring also provides element creator (factory) out of the box to consume these styles property as animated, you can create any HTML element using it, these play well with libraries like styled-component or with React components.



import { useSpring, animated } from 'react-spring';
...
<animated.div style={style}>
...
</animated.div>

Replace div with animated.div in Block



// https://codesandbox.io/s/multi-block-grid-react-spring-0u80r?file=/src/Block.jsx:114-156

- const BlockWrapper = styled("div")`

+ const BlockWrapper = styled(animated.div)`

As we saw above react-spring has a hook useSpring it works for one, for multiple elements there is another useSprings which supports multiple elements.



const [springs, setSprings] = useSprings(
    10,
    animate(rowSize, order.current)
);

It takes 2 parameter, first the number of items and second an array with CSS properties or a function which takes an index and return the values, we will use 2nd one as it's better for fast occurring updates and we will be having a lot of updates!

Using react spring



// Grid.jsx
const  [springs, api] =  useSprings(10,  animate);

10 is length of block as before and animate will be the function we will use to animate individual block, it get's index as a param, let's just create what we had before but in react spring context.



// Grid.jsx
const  animate  =  (index)  =>  {
  // we will move this piece out and will call it grid generator
  const  col  =  Math.floor(index  %  blockInRow);
  const  row  =  Math.floor(index  /  blockInRow);
  return  { x:  col  *  120  +  col  *  8, y:  120  *  row  +  row  *  8  };
};

...

{springs.map((style, index) => (
  <Block
    style={style}
    ...
  />
...

It renders the same grid but the blocks are not draggable anymore as we are not using the coordinates from useDraggable. We are using styles from spring, handleMouseDown is already in place and we are controlling the style using the animate function so we just have to feed the coordinates to animate function! Think animate as a middleware or transformer.

Confusing ?

Initially we were using the coordinates from useDraggable to drag the block and for that we had the handleMouseMove which was updating the state in useDraggable but now we are using coordinate from useSprings via style prop, that's why block is not dragging anymore but it still had handleMouseDown in place. We will pass the coordinates from useDraggable to our animate which in turn will update the style attribute accordingly to move the block.



const animate = React.useCallback(
    (index) => {
      return {
        x: blocks[index].x,
        y: blocks[index].y,
      };
    },
    [blocks]
);

// tell the spring to update on every change
React.useEffect(()  =>  {
    api.start(animate);
},  [api,  animate]);

Nice, blocks are moving again! You might notice a difference in speed as react spring is controlling them in a springy nature. For immediate movement we will return a extra key-value from our animate function and that will be



immediate:  (n)  => n  ===  "y"  ||   n  ===  "x"

It tells the react spring to immediately apply these changes skipping the springy motion. We should keep our moving block always on top to do this we need to figure out which index is so we will expose that from our useDraggable hook and will use it animate



const  animate  =  React.useCallback((index)  =>  {
    return  {
        x:  blocks[index].x,
        y:  blocks[index].y,
        scale:  index  ===  movingBlockIndex  ?  1.2  :  1,
        zIndex:  index  ===  movingBlockIndex  ?  10  :  1,
        immediate:  (n)  =>  immediateMotionsProsp[n]
    };
},[blocks,  movingBlockIndex]);

I have also added scale, so the moving block can stand out.

Check the frozen code sandbox till here.

Limiting movement of blocks to specified area

We don't want our blocks to leave the grid! for this we must stop the block movement if it goes outside of grid and for that we have check if onMouseMove the pointer is outside or inside the specified grid. We can do it using a very simple check the x of block should be more left most x of grid and less than right most x same goes for y coordinate, we can found out the coordinates of grid using getBoundingClientRect()



// https://codesandbox.io/s/multi-block-grid-react-spring-x8xbd?file=/src/isInside.js

isInside = (element, coordinate) => {
  const { left, right, bottom, top } = element.getBoundingClientRect();
  // if bottom and right not exist then it's a point
  if (!coordinate.right || !coordinate.bottom) {
    if (coordinate.left > right || coordinate.left < left) {
      return false;
    }

    if (coordinate.top > bottom || coordinate.top < top) {
      return false;
    }
  } else {
    if (
      coordinate.left < left ||
      coordinate.top < top ||
      coordinate.right > right ||
      coordinate.bottom > bottom
    ) {
      return false;
    }
  }

  return true;
};

We just have to add this condition in our handleMouseMove



if (
  parentRef.current &&
  !isInside(parentRef.current, {
    left: event.clientX,
    top: event.clientY
  })
) {
  handleMouseUp();
}

parentRef ? it's the ref of parent div, we can pass it to useDraggable along with totalBlocks, blockInRow.

For this to work properly we have to make some changes in our component,



const Wrapper = styled.div`
  ${({ width }) => width && `width: ${width}px;`}
  height: 480px;
  border: 1px solid red;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
`;

const BlockContainer = styled.div`
  flex-grow: 2;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  border: 1px solid black;
`;

...

<BlockContainer onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
   <Wrapper ref={parentRef} width={blockInRow * 120 + (blockInRow - 1) * 8}>
     {springs.map((style, index) => {
       const blockIndex = blocks.current.indexOf(index);
       return (
         <Block
            ...
         />
       );
     })}
   </Wrapper>
 </BlockContainer>

Automatic rearrangement

All the code we have written till now going to change a lot, why I didn't directly jump into this? I could have, it could have been 1 part tutorial using react-use-gesture (which is way more efficient), but we here to learn how things work not just to get things done, we started with one draggable block to grid and now we are adding re-arrangement to it, your next requirement can be something else but as you know all of it you can tweak the existing code or write by yourself!

We will no more save the coordinates of all block, but only track the current moving block coordinates and will forget about it as soon as the user is done dragging because we want a grid which re-arranges itself, makes space for the moving block.

We will use our existing grid creator function to get new position. Suppose you are moving the first block and moved it over the 4th one, now each block should move to make space for this one, as in the image block will re-arrange themselves to do this we will move the blocks in our array and will the position calculator again to get new position according to new arrangement.

Current Order: [A,B,C,D]

use start dragging block A, the order will remain same until block A is over any other block with at least 50% area.
As it reaches towards D, all block will re-arrange new order will be

[B,C,D,A]

We still have coordinates of block A as it is still moving, but for B,C,D we will assign them new position. We will treat like B was always was the first block and will assign it (0,0) and react-spring will take care animating it and rest of the blocks! As soon as user leave the block A it will be moved to its coordinates generated by the grid generator for position 4 or index 3.

We will also modify our useDraggable such that it takes the initial position and keep calculating the current while movement and forgets everything on mouseUp

We will start with dragging one element only and placing it back on releasing, for this we have to change the useDraggable, most of the things will remains same you can check the whole code here, important changes are



// state
{
   // block current coordinates
    block: { x: 0, y: 0 },
    // inital block positions
    blockInitial: { x: 0, y: 0 },
    // initial pointer coordinates
    initial: { x: 0, y: 0 },
    movingBlockIndex: null
}

const handleMouseDown = React.useCallback((event, block) => {
    const index = parseInt(event.target.getAttribute("data-index"), 10);
    const startingCoordinates = { x: event.clientX, y: event.clientY };
    setCoordinate((prev) => ({
        ...prev,
        block,
        blockInitial: block,
        initial: startingCoordinates,
        movingBlockIndex: index
    }));
    event.stopPropagation();
  }, []);

const handleMouseMove = React.useCallback(
    (event) => {
      if (coordinate.movingBlockIndex === null) {
        return;
      }
      const coordinates = { x: event.clientX, y: event.clientY };
      setCoordinate((prev) => {
        const diff = {
          x: coordinates.x - prev.initial.x,
          y: coordinates.y - prev.initial.y
        };
        return {
          ...prev,
          block: {
            x: prev.blockInitial.x + diff.x,
            y: prev.blockInitial.y + diff.y
          }
        };
      });
    },
    [coordinate.movingBlockIndex]
);

Concept stills remains the same what we did for single block!

Final Piece

Now we need figure out if user is moving a block where should we create the space, no there is no API which provides the element below the current element. Instead we will calculate the new block position we will consider that if block has moved at least 50% in x, y or both directions, then it can be moved to new position.

For this, we have to create an order array to keep the order of blocks in memory for re-arranging blocks we will be updating this array and feeding it to our grid generator, the order array will contain the initial index's or id's as we saw above for [A,B,C,D], to maintain the same ref we will use useRef



const  blocks  =  React.useRef(new  Array(totalBlocks).fill(0).map((_,  i)  =>  i));

handleMouseMove will also be modified as we need to send the initial block position and original index



// Grid.js
onMouseDown={(e) =>
  handleMouseDown(
    e,
    initialCoordinates.current[blocks.current.indexOf(index)],
    // we are keeping as source of truth, the real id
    index
  )
}

Now on every movement we have to check if we need to re-arrange for this we will use the same useEffect as before,
I have added comment/explanation the code snippet it self.



React.useEffect(() => {
    // we will save the actual id/index in movingBlockIndex
    const oldPosition = blocks.current.indexOf(movingBlockIndex);
    if (oldPosition !== -1) {
      // coordinate travelled by the block from it's last position
      const coordinatesMoved = {
        // remember the grid generator function above ?
        // I created an array "initialCoordinates" using it for quick access
        x: movingBlock.x - initialCoordinates.current[oldPosition].x,
        y: movingBlock.y - initialCoordinates.current[oldPosition].y
      };

      // As we have width and height constant, for every block movement 
      // in y direction we are actually moving 3 block in row.
      // we are ignoring the padding here, as its impact is so less
      // that you will not even notice
      let y = Math.round(coordinatesMoved.y / 120);
      if (Math.abs(y) > 0.5) {
        y = y * blockInRow;
      }

      const x = Math.round(coordinatesMoved.x / 120);

      const newPosition = y + x + oldPosition;
      // there will be cases when block is not moved enough
      if (newPosition !== oldPosition) {
        let newOrder = [...blocks.current];
        // swaping
        const [toBeMoved] = newOrder.splice(oldPosition, 1);
        newOrder.splice(newPosition, 0, toBeMoved);
        blocks.current = newOrder;
      }
    }

    // telling the spring to animate again
    api.start(animate);
  }, [api, animate, initialCoordinates, movingBlock, movingBlockIndex]);



const animate = React.useCallback(
  (index) => {
    // the index in order of id
    const blockIndex = blocks.current.indexOf(index);
    // the block coordinates of other blocks
    const blockCoordinate = initialCoordinates.current[blockIndex];

    return {
      x: index === movingBlockIndex ? movingBlock.x : blockCoordinate.x,
      y: index === movingBlockIndex ? movingBlock.y : blockCoordinate.y,
      scale: index === movingBlockIndex ? 1.2 : 1,
      zIndex: index === movingBlockIndex ? 10 : 1,
      immediate:
        movingBlockIndex === index
          ? (n) => immediateMotionsProsp[n]
          : undefined
    };
  },
  [movingBlock, initialCoordinates, movingBlockIndex]
);

That's all folks, here is the final outcome.

It should be noted we are using react spring as helper here, we are not utilising full power as there are still many re-renders for each block event as our useDraggable uses the useState so it was expected and totally fine for learning what's happening behind the scene, there are two path to explore.

Write useDraggable such that it doesn't causes any re-renders
use react use gesture

I would suggest to go for both paths and if you are wondering why the blocks are coloured I added a function getColors which is not worth explaining in the code. Also if you will check the initial demo's code which mentioned in first part and top of this part, the code differs a lot from what we finally have, this is because it contains a lot of code for multi width blocks and while writing this blog, I refactored/simplified a lot of things!

This was a lot to grasp, I tried to make things simpler and understandable as I can, if you any doubt & feedback please let me know in the comment, we can discuss over there.

React useEffect: The basics and the secrets

Mukul Jain — Fri, 04 Jun 2021 16:55:56 +0000

Almost everyone is familiar with hooks these days, useEffect is one of the most used hook. My 2 cents on it!

It's a hook which triggers after each render to perform any side effect.

Simple useEffect

const [count, setCount] = useState(0)

useEffect(() => {
  document.title = count;
})

Whenever the components re-render the hook will trigger updating the document title. It might be due to count change or its parent might have re-rendered causing this to re-render.

The Cleanup Method

If you are creating side effect, you might want to clear them like clearing timeout or cancelling previous pending API request, for this we have cleanup method, return a function from useEffect and it will trigger at unmount or before the next cycle of the same useEffect.

const [count, setCount] = useState(0)

useEffect(() => {
  // Not a good practice, just for the sake of example
  document.body.style.background = 'red'
    return () => {
      document.body.style.background = 'blue'
    };
})

...

<button onClick={() => setCount(count+1)}>Count ++</button>

Most people learn useEffect by relating it to componentDidMount, componentDidUpdate and componentWillUnmount. So they relates the cleanup function with componentWillUnmount and thinks all cleanup are triggered only once, on unmount. Which is far from the truth! whenever I asked this question in interview only answer I got was "in the unmount phase"

After the first render useEffect will trigger and we can see background color as red and when the state changes the component will re-render hence useEffect will trigger again after the render but before that, cleanup method will trigger as shown in this gif.

Why?: To keep the concern limited at one place, Assume cleanup doesn't run before every useEffect and let's say you are using setTimeout in the useEffect, if there is second useEffect call you have to cancel the first timer or there might be a memory leak, a possible way to do it is

const timer = React.useRef(null);

useEffect(() => {
  if(timer.current){
    clearTimeout(timer.current);
  }

  timer.current = setTimeout(...
})

but with a cleanup function you can do

useEffect(() => {
  const timer = setTimeout(...

  return () => {
    clearTimeout(timer);
  }
})

Optimize using the dependency array

There might be a case where you don't want it to run every time but on specific condition for this useEffect (all the hooks) have another parameter known as dependency array, where you can specify the dependent parameter like [count], useEffect will trigger only if count changes and cleanup method too.

Empty dependency array

Is it a special case for componentWillunmount and componentDidMount? Nope, though it seems like but it is not handled separately.

useEffect(() => {
  ...
  return () => {...}
}, [])

[] means no dependency, so useEffect will trigger only during the initial render and cleanup only in unmount phase, React calls all cleanup methods in unmount phase hence it will run, so it behaves same way as componentWillunmount and componentDidMount but it's not the same.

Last but not least due to closure cleanup will have values of previous state when useEffect was executed.

You can play with useEffect here

Creating 2D blocks layout with custom hook useDraggable

Mukul Jain — Thu, 03 Jun 2021 17:18:21 +0000

We already have a draggable block with dragging logic coupled with the UI component.

Custom hook: useDraggable

Let's take it out the dragging part and create a custom hook that can be used with anything anywhere!

import * as React from "react";

const useDraggable = () => {
  const [coordinate, setCoordinate] = React.useState({
    block: {
      x: 0,
      y: 0,
    },
    pointer: { x: 0, y: 0 },
    moving: false,
  });

  const handleMouseMove = React.useCallback(
    (event) => {
      if (!coordinate.moving) {
        return;
      }
      const coordinates = { x: event.clientX, y: event.clientY };

      setCoordinate((prev) => {
        const diff = {
          x: coordinates.x - prev.pointer.x,
          y: coordinates.y - prev.pointer.y,
        };
        return {
          moving: true,
          pointer: coordinates,
          block: { x: prev.block.x + diff.x, y: prev.block.y + diff.y },
        };
      });
    },
    [coordinate.moving]
  );

  const handleMouseUp = React.useCallback(() => {
    setCoordinate((prev) => ({
      ...prev,
      moving: false,
    }));
  }, []);

  const handleMouseDown = React.useCallback((event) => {
    const startingCoordinates = { x: event.clientX, y: event.clientY };
    setCoordinate((prev) => ({
      ...prev,
      pointer: startingCoordinates,
      moving: true,
    }));
    event.stopPropagation();
  }, []);

  return {
    handleMouseDown,
    handleMouseMove,
    handleMouseUp,
    coordinate: coordinate.block,
  };
};

export default useDraggable;

Usage with block

const Block = (props) => {
  return (
    <BlockWrapper {...props}>
      <StyledText>1</StyledText>
    </BlockWrapper>
  );
};

export default function App() {
  const { handleMouseDown, handleMouseMove, handleMouseUp, coordinate } =
    useDraggable();

  return (
    <div
      style={{ border: "1px solid", height: "100%", width: "100%" }}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      <Block
        style={{
          transform: `translate3d(${coordinate.x}px, ${coordinate.y}px, 0px)`,
        }}
        onMouseDown={handleMouseDown}
      />
    </div>
  );
}

Let's add more blocks to our layout for adding more block we can use an array and store position of each of block as object in it.

const [blocks, setBlocks] = React.useState(
  // creates an array of 10 elements each equals to 1
  new Array(10).fill(1).map(() => ({ x: 0, y: 0 }))
);

...

<BlockContainer
  style={{ border: "1px solid", height: "100%", width: "100%" }}
  onMouseMove={handleMouseMove}
  onMouseUp={handleMouseUp}
>
  {blocks.map((_,index) => (
    <Block
      key={index}
      style={{
        transform: `translate3d(${coordinate.x}px, ${coordinate.y}px, 0px)`
      }}
      onMouseDown={handleMouseDown}
    />
  ))}
</BlockContainer>

Somethings wrong and I can feel it!

...

Even if you will move one block they all will move. Check here, but why?

Moving one block is moving every block in same director and with same difference, we have handled it by using the position: relative for now! Another thing here to notice is I have changed

style={{ top: coordinate.block.y, left: coordinate.block.x }}

// to

style={{
  transform: `translate3d(${coordinate.x}px, ${coordinate.y}px, 0px)`
}}

reason being this one is more efficient considering we will be changing these values again-again, when changing left or top the browser has to run through the layout phase again because left or top may have changed how things were laid out, transform on the other hand will not affect layout.

Layout is not same on all screen sizes, as I have not limited the width height of parent div, blocks spreads according to the space as we are using flex-wrap to wrap them and it has it's downsides. If I will limit the width and height dragging will not work properly for the same reason it's was not working for the single block, if moved fast enough pointer will leave the block and might leave our parent div to where the handler are attached, we will change the layout later in this part without limiting the height and width of parent. We will limit that in part 3.

Let's visualize with limited parent height and width with our current handling.

Dia A

Black area is our parent container and green ones are the blocks. It doesn't matter how fast I drag the pointer inside black area, block will always catch up, there might be bigger jumps in case of fast movements, but it always catch up.

Dia B

Once pointer left the parent, block will move until the pointer is above it as handleMouseMove is still triggered because event current target is block and the propagates to the parent where we are catching the mouseMove using onMouseMove, it will keep propagating if there is no event.stopPropagation().

Dia C

Once the pointer left the block handleMouseMove will not trigger anymore for the block, note that the mouseUp is still not triggered inside block or parent, so we still have moving: true in our state and once the pointer reaches inside the parent, there will be wired movements of block, we can handle this while applying checks on mouseMove such that our block never leaves the parent, whenever the pointer leaves the parent, trigger handleMouseUp manually, there are still some catches that can be resolved using some calculation that we will cover later in part 3.

Making particular block move

Till now we can drag every block together in any direction as we are maintaining only one state with useDraggable, instead of maintaining one state we will maintain an array and each element inside an array will be coordinates of a block at that index!

Change the state to

// Grid.jsx

const { handleMouseDown, handleMouseMove, handleMouseUp, blocks } =
  useDraggable(10);

return (
  <BlockContainer onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
    {blocks.map((coordinate, index) => (
      <Block
        key={index}
        style={{
          transform: `translate3d(${coordinate.x}px, ${coordinate.y}px, 0px)`,
        }}
        // we will use this to identify the block, to avoid n number of inline function declaration
        data-index={index}
        onMouseDown={handleMouseDown}
      />
    ))}
  </BlockContainer>
);

// useDraggable.js state

const [coordinate, setCoordinate] = React.useState({
  blocks: new Array(totalBlocks).fill(1).map(() => ({ x: 0, y: 0 })),
  pointer: { x: 0, y: 0 },
  // removed `moving` and added `movingBlockIndex` key to track the moving block
  movingBlockIndex: null,
});

const handleMouseDown = React.useCallback((event) => {
  const index = parseInt(event.target.getAttribute("data-index"), 10);
  const startingCoordinates = { x: event.clientX, y: event.clientY };
  setCoordinate((prev) => ({
    ...prev,
    pointer: startingCoordinates,
    // we set this to null on mouseUp
    movingBlockIndex: index,
  }));
  event.stopPropagation();
}, []);

Fixing the layout

As we discussed earlier they layout is not great, though we can definitely limit the heigh and width, but we will do it using position: absolute, but isn't that will require more work ? Not actually, Not for the long run!

A grid gives us defined structure to work on as we will be working with coordinates, if one block moves we can shift other blocks to it's position and create space for this one at it's current position like you saw in the demo with position: relative these calculation will be hard as then we will always have to calculate with respect to the block's initial position to move it which will be a nightmare.

Though we will fixing only the layout not blocks re-arrangement in this part but consider these two scenario with position absolute & relative.

With position: absolute everything is natural and easy!

Then why were using position: relative? That's best for single block moment or even the grid where we don't have to re-arrange everything, if any block overlaps anyone we can simple move it with some few pixels, like here. So it depends on the case.

It's pretty simple to define a grid, everything has to be place 120px apart whether horizontal or vertical. On X axis for each block we will multiply by 120 and same will happen for Y axis. Let's say we want only 3 blocks in one row, if we had 9 block the arrangement will look like

0 | 1 | 2
__________
3 | 4 | 5
__________
6 | 7 | 8

if you notice there is a pattern, column of any index can be determined using index%3 and row can be determined using floor of index/3. So coordinate will be

{
  x: index % 3 * 120,
  y: 120 * Math.floor(rowindex / 3)
}

But there will no gap between the blocks and it will probably look bad. Let's add 8px of gap between each block, to do so X coordinate of 1st block will be same as before, we should add 8px to the 2nd block, 16px to the 3rd and so on. Why we are increasing the gap with each block as 8px as been added to 2nd block that will be pushed toward right, now the 3rd one is overlapping the 2nd by 8px so to cover that 8px and to add gap of 8px we have to add 16px, it stays same for upcoming blocks.

{
  x: index % 3 * 120 + (index % 3 * 8),
  y: 120 * Math.floor(rowindex / 3) + (Math.floor(rowindex / 3) * 8)
}

Enough talking, the code:

const totalBlocks = 10;
const blockInRow = 3;

const blocks = Array(totalBlocks)
  .fill(1)
  .map((_, index) => {
    const col = Math.floor(index % blockInRow);
    const row = Math.floor(index / blockInRow);
    return { x: col * 120 + col * 8, y: 120 * row + row * 8 };
  });

You check it working code here

That's all for today, we have a grid and draggable blocks, in next part will restrict the block movement inside the grid only and will re-arrange them if a block hovers on another using react-sprint.

How to Create a 2D draggable grid with react-spring

Mukul Jain — Sat, 29 May 2021 20:12:28 +0000

In this article we will create a 2D grid were each item can be dragged and moved to a different place, quick demo.

We will be writing most of the things from scratch to see how things work under the hood but will be using react-spring to animate because it takes the animation out of React for performance reasons! don't worry logic will be still ours, though you can surely remove react-spring out of the picture and use something else or just React ;) , we will see it at the end.

What we will cover, this will be a 3 parts series

Creating a single draggable block
Creating 2D blocks layout with custom hook useDraggable
Rearranging blocks using react-spring [2nd week of June]

Creating a single draggable block

What is a draggable block? block which moves with the mouse pointer, when the mouse key is pressed until the pressure from the key is released.

There are 3 events involved here

Mouse key/track-pad is pressed i.e. mouseDown
Mouse is moved hence the pointer moves i.e. mouseMove
The pressure is released i.e. mouseUp

mouseDown will give us the initial coordinates, on each mouseMove this will be fired whenever there is a movement even for 1px will give us the accurate path and mouseUp will give us the ending coordinates. Our block (it can be anything, div, image etc.) have to move with the mouse, so we will bind appropriate methods with the mouse events.

Let's create a block.

import * as React from "react";
// For CSS in JS
import styled from "styled-components";

const BlockWrapper = styled("div")`
  position: relative;
  border-radius: 4px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: 120px;
  background: red;
`;

const StyledText = styled("p")`
  color: white;
  font-weight: 600;
  font-size: 24px;
`;

const Block = () => {
  return (
    <BlockWrapper>
      <StyledText>1</StyledText>
    </BlockWrapper>
  );
};

export default Block;

Great we have a static block now let move it. Let's apply mouseDown to our block. Before jumping to actual code, let's try to derive the calculation needed.

Block Initial Coordinates: [0,0]

Pointer Initial Coordinates: [10,2] (when mouseDown was fired)

Pointer Final Coordinates: [110,102] (when mouseUp was fired)

Pointer Movement= Final-Initial: [100, 100]

Block Coordinates = [Block Initial Coordinates + Pointer Movement]

Now block may have some initial coordinates, but that will be covered as we are adding the difference to it.

const Block = () => {
  const [coordinate, setCoordinate] = React.useState({
    block: {
      x: 0,
      y: 0,
    },
    pointer: { x: 0, y: 0 },
    dragging: false,
  });

  const handleMouseMove = React.useCallback(
    (event) => {
      if (!coordinate.dragging) {
        return;
      }
      const coordinates = { x: event.clientX, y: event.clientY };

      setCoordinate((prev) => {
        const diff = {
          x: coordinates.x - prev.pointer.x,
          y: coordinates.y - prev.pointer.y,
        };
        return {
          dragging: true,
          pointer: coordinates,
          block: { x: prev.block.x + diff.x, y: prev.block.y + diff.y },
        };
      });
    },
    [coordinate.dragging]
  );

  const handleMouseUp = React.useCallback(() => {
    setCoordinate((prev) => ({
      ...prev,
      dragging: false,
    }));
  }, []);

  const handleMouseDown = React.useCallback((event) => {
    const startingCoordinates = { x: event.clientX, y: event.clientY };
    setCoordinate((prev) => ({
      ...prev,
      pointer: startingCoordinates,
      dragging: true,
    }));
    event.stopPropagation();
  }, []);

  return (
    <BlockWrapper
      style={{ top: coordinate.block.y, left: coordinate.block.x }}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      <StyledText>1</StyledText>
    </BlockWrapper>
  );
};

Try it here.

It's buggy

If the pointer is moved fast enough the block will be lost in the way as now the pointer has crossed the block, onMouseMove doesn't triggers anymore, hence no more dragging, a simple way to fix it is add mousemove and mouseup to document or the parent div.

We cannot add handler directly on document, we have to use addEventListener and with parent we can move our state upward and pass handleMouseUp and handleMouseMove to parent div. Something like this

<div
      style={{ border: "1px solid", height: "100%", width: "100%" }}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}>
      <Block
        style={{ top: coordinate.block.y, left: coordinate.block.x }}
        onMouseDown={handleMouseDown}
      />
</div>

Handlers on Parent

Events on Document

So which one? The parent one, there is two reason behind it:

Not all area of app is going to be draggable, probably one section of it so if the mouse moves out of the parent div, our block will stay inside, but in case of events on document, we have check that on every mouseMove event.
Other reason is handlers are more "React Way" of doing things, also you don't have to remove them ;) on unmount.

That's all for today! Next up we will move our code responsible for dragging into a hook and will create a 2D layout.

It should be noted there are many libraries which provides hook out of the box for dragging, one is use-gesture which works seamlessly with react-spring and also takes dragging out of React, giving a little performance boast. Though we will not be covering it here as our target is to learn the basics.

Spread Operator: don't misuse it

Mukul Jain — Fri, 28 May 2021 18:38:17 +0000

Spread operator was introduced with JavaScript ES6 along with other great features, but with great power comes the great responsibility. Mostly it is used to create a new reference to object or an array, though it only copies one level deep it's pretty useful especially where we cannot mutate object like React or Redux state, though we are not creating a whole new object, it gets the work done.

Great! What's the issue then? Enough talk let's write some code, We will be using a user array for this purpose and will create a map of active users. Let's define a simple User interface before jumping to real problem.

interface IUser {
  active: boolean;
  name: string;
  id: string;
}

const users = []; // 10,000 users

Case 1

const activeUsers = users.reduce((acc, user) => {
  if (user.active) {
    return { ...acc, [user.id]: user };
  }
  return acc;
}, {});

Case 2

let activeUsers = {};

users.forEach((user) => {
  if (user.active) {
    result[user.id] = user;
  }
});

Case 3

const a = users.filter((user) => user.active).map((user) => [user.id, user]);
const activeUsers = Object.fromEntries(a);

Can you arrange according their performance? from best to worst.

Check actual stats!

### Result

Case 2
Case 3 (~63% slow)
Case 1 (~86% slow)

Checkout all test cases here: JS Bench

Let's dive in

No surprise case 2 was fasted, just plain loop with simple key value addition.

Case 3 was expected to be slow as it has to iterate the array twice that should slow it down and now we have an idea by what margin so avoid it.

Case 1 was not expected to be this slow as it's similar to case one with builtin method, there is one thing which might be slowing it down, reduce internal implementation!

Nope, it's the spread operator, in general it's slower then adding a key-pair to object but that doesn't mean avoid it just use it only if required. In the case 1 anyway we will get a new object from the reduce using spread operator is totally unnecessary. Change it to

const activeUsers = users.reduce((acc, user) => {
  if (user.active) {
    acc[user.id] = user;
  }
  return acc;
}, {});

and it is almost at par with forEach one, 1% slower.

We might have developed a habit of always using spread operator to avoid uncalled bugs in daily life especially with React and it might not be degrading the performance much but it can, in some cases like this one, so let's remember this, might come handy one it.

Gatsby: Smart way to build websites

Mukul Jain — Wed, 26 May 2021 02:51:26 +0000

Gatsby is Frontend framework based on React and GraphQL with plugins for almost anything one can imagine some of which are officially supported. The plugin approach makes it modular, want to handle images with optimisation and lazy loading, install gatsby-plugin-image, need convert Markdown to HTML? install gatsby-transformer-remark and leave all the work to Gatsby.

Behind The Scenes

Few pages (ex. Home, about, contact, products )
SEO
Progressive image loading
Fast page loading
Highly customisable
Intelligent data prefetching

Pages

Whether use any framework or not, to register every page we manually have to link them with specific routes. Gatsby does this automatically, just create a js|jsx file in pages folder and that page is linked to route same as file name, there is 404 page (404.js) too which is rendered for every other route.

Same goes for Markdown files or any other format, Gatsby knows what inside the folder, it fetched everything using file system and sourced it all to GraphQL, one can named export any query from any component and that will be available as props. That's how the blog listing works in this site.

SEO

All the pages are SSR rendered improving the SEO automatically besides, it's also provide gatsby-plugin-react-helmet which allows for different meta tags based on page, use Helmet component and write all SEO related meta tags inside it, rest of things will taken care.

Progressive image loading

While loading a website a a low quality is loaded first (~ 20px x 20px) and when user scrolls to that image or all other assets are fetched high resolution image will be loaded.

Fast page loading

On initial load a partial page is loaded which have the layout and all the text, HTML + CSS mostly and in next fraction of seconds JS is fetched and parsed which makes the bootstrap the React and routing capabilities.

Highly customisable

There are two types of API exposed

Many events like onInitialClientRender, onRouteUpdate, disableCorePrefetching, onCreateDevServer, onCreatePage are exposed and some of them can be overwritten while others act as hooks. This can be done by creating a gatsby-browser.js or gatsby-node.js

Intelligent data prefetching

Can the page get more faster? Yes! As all pages server side rendered there static data (generated by GraphQL) can be pre-fetched after the current page finishes loading, this happens for the next accessible pages from the current page which are in viewport. Things for generated Markdown pages are even better, as you can seen in the gif, as I am scrolling down the data for each blog is fetched and when I click on a blog (last one in this case), it instantly loads, it's HTML was already fetched what loads after clicking, assets.

Automation is what Gatsby did, it took the best pratices and optimisation techniques and applied them during the build time and website which were already easy to make again due to automation at development time became more optimized and faster in production, not only static website, one can create full fledged e commerce website with Gatsby, that's why it matter.

Checkout my blog's Github Repo based on Gatsby