Forem: nuko_suke

Why don't you do it when the browser is free instead of setInterval?

nuko_suke — Thu, 09 Feb 2023 14:12:34 +0000

You may have the browser execute periodically with setInterval .
For example, periodically check whether the access token is valid or not and refresh it.

The browsers is busy executing JavaScript and updating the UI to display page content. We want not to affect these important tasks.

In this article, I will show you how to make a process run periodically without affecting important browser tasks as much as possible, using access token rotation as an example.

The code example shows the following processes by using React Hooks.

check if the access token is valid while the browser is idle, and get a new token if it is invalid
schedule the process 1 to be executed periodically, so that it will be executed again a few seconds after the process 1 is completed
force checking to performed once every few seconds when the access token check is not running because the browser is too busy

Use the library idle-task (v3.3.3) to run the process while the browser is idle.

https://github.com/hiroki0525/idle-task

This library internally uses a Web API called requestIdleCallback.

Source Code

Before showing you the source code, let me first show you the screen we are going to implement.

https://8hic7w.csb.app/

CodeSandbox

If you leave the screen alone for a while, you will see a new token at the "now token is ~" point.

The implementation of the React Hooks is as follows.

import { useEffect, useState } from "react";
import { setIdleTask, cancelIdleTask } from "idle-task";

interface MockResponse {
  readonly status: number;
  readonly json: () => Promise<any>;
}

const mockFetchCheckAccessToken = async (
  _token: string
): Promise<MockResponse> => {
  if (Math.random() < 0.3) {
    return {
      status: 401,
      json: async () => null
    }
  }
  return {
    status: 200,
    json: async () => null
  };
};

const mockFetchRefreshToken = async (
  _oldToken: string
): Promise<MockResponse> => {
  return {
    status: 200,
    json: async () =>
      [... .Array(10)].map(() => Math.floor(Math.random() * 10)).join("")
  };
};

const useAccessTokenWhenIdle = (): string => {
  const [nowToken, setNowToken] = useState("none");

  useEffect(() => {
    const checkAccessToken = async (): Promise<void> => {
      const checkTokenResponse = await mockFetchCheckAccessToken(nowToken);
      if (checkTokenResponse.status === 200) {
        return;
      }
      const newTokenResponse = await mockFetchRefreshToken(nowToken);
      const newToken = await newTokenResponse.json();
      console.log("refresh", newToken);
      setNowToken(newToken);
    };
    const idleTaskId = setIdleTask(checkAccessToken, {
      revalidateInterval: 5000
    });
    return () => {
      cancelIdleTask(idleTaskId);
    };
  }, [nowToken]);

  return nowToken;
};

export default useAccessTokenWhenIdle;

Here is the key code.

    const idleTaskId = setIdleTask(checkAccessToken, {
      revalidateInterval: 5000
    });

With setIdleTask, you can register a function that you want to execute while the browser is idle.
checkAccessToken will be executed while the browser is idle.

The option revalidateInterval is specified.
This will schedule the function to run again while the browser is idle after the specified time.
In this example, it means that schedule checkAccessToken to run in 5 seconds while the browser is idle.

In this way, you can schedule the process to run periodically while the browser is idle.

check if the access token is valid while the browser is idle, and get a new token if it is invalid

schedule the process 1 to be executed periodically, so that it will be executed again a few seconds after the process 1 is completed

We have implemented 1 and 2 as described.
While 1 and 2 are sufficient, there is a concern.
It is that the browser is too busy and do not always become idle.

force checking to performed once every few seconds when the access token check is not running because the browser is too busy

This is to guarantee that the process runs as much as possible.

Let's look at the code on the use side of the useAccessTokenWhenIdle hooks.

import ". /styles.css";
import useAccessTokenWhenIdle from ". /useAccessTokenWhenIdle";
import { configureIdleTask } from "idle-task";

configureIdleTask({
  debug: true,
  interval: 1000 * 10
});

export default function App() {
  const token = useAccessTokenWhenIdle();

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      Now token is {token}
    </div>
  );
}

The point is this.

configureIdleTask({
  debug: true,
  interval: 1000 * 10
});

The configureIdleTask function is specified with an interval.
This will execute the function registered with setIdleTask at each specified interval with as little impact on browser performance as possible.

In this example, once every 10 seconds, if a checkAccessToken registered with setIdleTask remains in the queue managed by idle-task, it will be executed without affecting browser performance.

If you want to guarantee the execution of as much processing as possible, specify the interval of the configureIdleTask in this way.

force checking to performed once every few seconds when the access token check is not running because the browser is too busy

So we've got 3 implemented!!! 🎉

Summary

I have shown an example implementation of periodically rotating access tokens while the browser is idle.

Besides access token rotation, it could be used, for example, to save a draft of an article the user is editing.

If you have any bugs or questions about idle-task, please contact us at GitHub issue.

https://github.com/hiroki0525/idle-task

This article will also help you to optimize your website.

https://dev.to/nuko_suke/improve-responsiveness-to-user-interactions-4a3p

If you found this helpful, please help someone else by sharing it or tagging someone in the comments!

Thanks!

Validate Form during Browser Idle for Performance Optimization

nuko_suke — Mon, 30 Jan 2023 14:04:42 +0000

When do you validate the value entered by the user in the input form? 🤔
Perhaps, you check it at real timing, or just after tapping a button like "Submit" .

I suggest new way of form validation which uses requestIdleCallback .

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

By checking the data entered by the user while the browser is idle, the result of the validation is already available when the user taps a button like "Confirm" .
It makes us faster response to button taps.

This article introduces the example using idle-task (v3.3.1) which wraps requestIdleCallback conveniently.

Example of React

This is the example of react hooks.

import { useRef, useEffect } from "react";
import { setIdleTask, forceRunIdleTask, cancelIdleTask } from "idle-task";

export default function useValidateWhenIdle(
  input: string,
  validate: (input: string) => boolean
) {
  const idleTaskIdRef = useRef(NaN);

  useEffect(() => {
    const validateTask = () => validate(input);
    idleTaskIdRef.current = setIdleTask(validateTask);
    return () => {
      cancelIdleTask(idleTaskIdRef.current);
    };
  }, [input, validate]);

  return () => forceRunIdleTask(idleTaskIdRef.current);
}

The component that uses this hooks is as follows.

import "./styles.css";
import useValidateWhenIdle from "./useValidateWhenIdle";
import { useState, ChangeEventHandler, FormEventHandler } from "react";
import { configureIdleTask } from "idle-task";

configureIdleTask({
  debug: true
});

const validateUserName = (userName: string): boolean => {
  return /^[a-zA-Z]+$/.test(userName);
};

export default function App() {
  const [userName, setUserName] = useState("");
  const validateUserNameWhenIdle = useValidateWhenIdle(userName, validateUserName);
  const handleUserNameChange: ChangeEventHandler<HTMLInputElement> = ({
    target
  }) => {
    setUserName(target.value);
  };
  const handleSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();
    const isValid = await validateUserNameWhenIdle();
    if (isValid) {
      alert(`YourName: ${userName}`);
    } else {
      alert(`${userName} is invalid`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        FirstName:
        <input type="text" value={userName} onChange={handleUserNameChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

First, let's take a closer look at the useValidateWhenIdle hooks.

useValidateWhenIdle takes two arguments.

input : String to be validated
validate ： Function that takes a string to be validated and validates it

The return value is the function which can get validation result.

We will also take a closer look at the internal processing.

  const idleTaskIdRef = useRef(NaN);

  useEffect(() => {
    const validateTask = () => validate(input);
    idleTaskIdRef.current = setIdleTask(validateTask);
    return () => {
      cancelIdleTask(idleTaskIdRef.current);
    };
  }, [input, validate]);

The setIdleTask of idle-task makes the argument function run while the browser is idle.
setIdleTask(validateTask) will cause validateTask, a function that validates user input values, to be executed while the browser is idle.

The return value of setIdleTask is an ID.
This ID can be used to cancel the execution of an idle function or to retrieve the result of an idle function.

We uses useRef to keep track of the ID.
Then, useEffect makes us ensure that validation is performed while the browser is idle each time a user-entered value is changed.
In the useEffect cleanup function, we use cancelIdleTask to cancel the target process if it has not yet been executed.

  return () => forceRunIdleTask(idleTaskIdRef.current);

The result of a function registered with setIdleTask can be retrieved with forceRunIdleTask.
If the function has already been executed while the browser is idle, the result is returned; if it has not yet been executed, it is executed immediately.

Next, let's take a closer look at the components on the side that use useValidateWhenIdle hooks.

import "./styles.css";
import useValidateWhenIdle from "./useValidateWhenIdle";
import { useState, ChangeEventHandler, FormEventHandler } from "react";
import { configureIdleTask } from "idle-task";

configureIdleTask({
  debug: true
});

const validateUserName = (userName: string): boolean => {
  return /^[a-zA-Z]+$/.test(userName);
};

export default function App() {
  const [userName, setUserName] = useState("");
  const validateUserNameWhenIdle = useValidateWhenIdle(userName, validateUserName);
  const handleUserNameChange: ChangeEventHandler<HTMLInputElement> = ({
    target
  }) => {
    setUserName(target.value);
  };
  const handleSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();
    const isValid = await validateUserNameWhenIdle();
    if (isValid) {
      alert(`YourName: ${userName}`);
    } else {
      alert(`${userName} is invalid`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        FirstName:
        <input type="text" value={userName} onChange={handleUserNameChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

This is an example of a basic React form implementation.
What are the key points?

const validateUserNameWhenIdle = useValidateWhenIdle(userName, validateUserName);

The useValidateWhenIdle appears.
The first argument is a string to be validated, and the second argument is a function that defines the validation logic.
And the return value is function which can get the result of
the validation.
It is used when the Submit button is pressed as follows.

  const handleSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();
    const isValid = await validateUserNameWhenIdle();
    if (isValid) {
      alert(`YourName: ${userName}`);
    } else {
      alert(`${userName} is invalid`);
    }
  };

When the Submit button is pressed, we get the validation result by using async/await.

The page implemented with the code introduced so far can be viewed at the following URL.

https://kzjljm.csb.app/

Let's see if the validation actually takes place while the browser is idle!
By adding the following code, the results of the validation function execution will be output to the browser's console.

import { configureIdleTask } from "idle-task";

configureIdleTask({
  debug: true
});

If you put text in the input area, you will see that validation is taking place during idle.

Measurements taken from the Performance tab of the Chrome Developer Tools show that functions are running while the browser is idle.

You can see the example in CodeSandbox.

Conclusion

I introduced how to validate form during browser idle by using idle-task .

https://github.com/hiroki0525/idle-task

This article will also help you to optimize your website.

https://dev.to/nuko_suke/improve-responsiveness-to-user-interactions-4a3p

If you found this helpful, please help someone else by sharing it or tagging someone in the comments!

Thanks!

Improve Responsiveness to User Interactions

nuko_suke — Mon, 16 Jan 2023 13:46:33 +0000

I will share with you a story of performance improvement at my site.

Prerequisite

I must tell you about prerequisite like npm dependencies before introducing the case.

The website that I improved is Instagram Hashtag Translator .
It helps us to translate Instagram hashtags.

The technical conditions are as follows.

npm dependencies
- React v18.2.0
- Next.js v13.0.5
Hosting
- Vercel

I measured the time it took to process the JavaScript when clicking the translate button.

const clickHandler = () => {
  const start = performance.now();
  // ...
  // ...processing
  // ...
  console.log(Math.ceil((performance.now() - start) * 100) / 100);
}

Before Improvement

const clickHandler = async () => {
  // Dynamic import
  const { default: sendGaEvent } = await import(
    '~/lib/analytics/sendGaEvent'
  );
  // ...
  // Send analytics data
  sendGaEvent(data);
  // ...
  // Dynamic import
  const { default: translate } = await import('~/infra/translate');
  // ...
}

There are notable 2 points.

Import modules when user clicked the button
Send analytics data

1. Import modules when user clicked the button

By using dynamic import , we can reduces the code needed on the initial load of our application.

It likes good idea, but there also is problem.
Dynamic import gives users bad responsiveness because it is not until they clicked the button that browsers load modules.

2. Send analytics data

Is it important to send analytics data?
This answer is no.

We want to have JavaScript main thread process important tasks
like translating words as much as possible.

After Improvement

I improve the performance by using idle-task .

https://github.com/hiroki0525/idle-task

import { setIdleTask, forceRunIdleTask } from 'idle-task';

// point 1
const importSendGaEventTaskId = setIdleTask(
  () => import('~/common/analytics/sendGaEvent')
);
const importTranslateTaskId = setIdleTask(() => import('~/infra/translate'));

const clickHandler = async () => {
  // point 1
  const { default: sendGaEvent } = await forceRunIdleTask(
    importSendGaEventTaskId
  );
  // ...
  // point 2
  setIdleTask(() => sendGaEvent(data));
  // ...
  // point 1
  const { default: translate } = await forceRunIdleTask(importTranslateTaskId);
  // ...
}

point 1

I prepare browsers to load modules during their idle periods 。

const importSendGaEventTaskId = setIdleTask(
  () => import('~/common/analytics/sendGaEvent')
);
const importTranslateTaskId = setIdleTask(() => import('~/infra/translate'));

setIdleTask can register tasks which will be executed when browsers are idle.

  const { default: sendGaEvent } = await forceRunIdleTask(
    importSendGaEventTaskId
  );
  const { default: translate } = await forceRunIdleTask(importTranslateTaskId);
  // ...
}

We can get the results by using forceRunIdleTask .

It will not always be idle if browsers are busy.
forceRunIdleTask gives us the result from cache when the task had been executed, otherwise idle-task run immediately.

point 2

Send analytics data during a browser's idle periods 。

setIdleTask(() => sendGaEvent(data));

As I have already told you, setIdleTask help us to execute tasks when browsers are idle.

It seems to have solved all my problems!

Result

	Before(ms)	After(ms)
1st	1110.8	1048.8
2nd	1191.2	1068.9
3rd	1070.4	1028.4
4th	1084.8	1023.2
5th	1099.4	1080.8
average	1111.3	1050.0

That's an improvement of about 5.5% 🎉.
In fact, the main translation process itself takes about 1,000 ms , so if we consider the non-main process, the improvement is about 55%.

In absolute terms, this is an improvement of 50 to 60 ms, which may not seem like much numerically at first glance, but an improvement of 50 to 60 ms is significant.

In light of the RAIL model, users will feel comfortable when the execution time is roughly 100 ms or less (50 ms is recommended as a guideline).

Considering this, an improvement of 50 to 60 ms would be significant .

Conclusion

I improved the performance of Instagram Hashtag Translator by using idle-task .

https://github.com/hiroki0525/idle-task

If you found this helpful, please help someone else by sharing it or tagging someone in the comments!

Thanks!

JavaScript Import Strategies for Performance Optimization⚡

nuko_suke — Tue, 29 Nov 2022 10:27:44 +0000

Modern JavaScript like ES Modules supports import statement.

import sendAnalyticsData from 'sendAnalyticsData';

It helps you to optimize your website performance.
Let's see about the import strategies to improve your site!!

Mainly, there are 2 import strategies.

Import when the page starts loading
Import when the module is needed

1. Import when the page starts loading

Normally, you use import as below.

import sendAnalyticsData from 'sendAnalyticsData';

const button = document.getElementById('button');
button.addEventListener('click', () => {
  // send analytics data externally when the user clicks
  sendAnalyticsData();
});

When you build your application using the bundler like webpack, sendAnalyticsData is bundled into JavaScript files which are loaded initially in the browser.

In this example, it is a problem that the page loads a bit slowly because the JavaScript files include the unnecessary module.

The solution is to load sendAnalyticsData when it is needed.

2. Import when the module is needed

You can also use dynamic import .

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const { default: sendAnalyticsData } = await import('sendAnalyticsData');
  sendAnalyticsData();
});

sendAnalyticsData is not bundled into JavaScript files which is loaded initially in the browser.

The browser will fetch the JavaScript file which has sendAnalyticsData and load it asynchronously when the user clicks.

However, we still have the problem (especially if you use the module which updates UI) that the page responds a bit slowly to an interaction because the module is loaded only after the user clicks.

Are there other `import` strategies?

There are some solutions such as using setTimeout .

One of them I suggest is to use idle-task which wraps requestIdleCallback .

https://github.com/hiroki0525/idle-task

import { setIdleTask, waitForIdleTask } from 'idle-task';

const taskId = setIdleTask(() => import('sendAnalyticsData'))

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const { default: sendAnalyticsData } = await waitForIdleTask(taskId);
  sendAnalyticsData();
});

sendAnalyticsData is loaded during a browser's idle periods.

The page can respond quickly to an interaction if it has been loaded.

But does page respond more slowly if the browser don't have idle periods?

I change the example like as follows.

import { setIdleTask, forceRunIdleTask } from 'idle-task';

const taskId = setIdleTask(() => import('sendAnalyticsData'))

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  // use forceRunIdleTask
  const { default: sendAnalyticsData } = await forceRunIdleTask(taskId);
  sendAnalyticsData();
});

forceRunIdleTask executes importing the module immediately even if the browser don't have idle periods.

If you want to load the important module like changing UI, you should use forceRunIdleTask, otherwise use waitForIdleTask
which waits for importing module when the browser is idle.

For more details, please see https://github.com/hiroki0525/idle-task .

Conclusion

I introduced you to some import strategies for performance optimization and I recommend to use idle-task .

Thank you for reading this article!

3 Best Practices for React Performance Tuning

nuko_suke — Tue, 15 Sep 2020 13:37:50 +0000

I improved the performance of my React site(Sorry, this is Japanese site) and increased Light House Score as below.

Improved page
https://nuko-programming.com/ranking/Python
(This is a list page introducing books)
Before
Performance Score: about 30
List Items: 10
After
Performance Score: about 90
List Items: 400

(Measured in 2020/08/12)

This article introduces you to my 3 best practices of React performance tuning based on my site.

Use SSG
Change style framework to own stylesheet
Use react-window

※ The numerical data this article shows is just for your reference.

1. Use SSG

You should use Static Site Generator（SSG）. In my site, By changing SPA(Single Page Application) to SSG, the performance
score was changed about 30 to 80(List Items 10).

If you adopt SSG, I recommend Next.js. That’s because NextJs has many advantages. The following is a few features.

2. Change style framework to own stylesheet

I found the bottleneck of rendering my site quickly was material-ui. The time to load its script was same as React library. Light House Performance Score was up about 20 points by styling myself.

I also recommend CSS Modules if you will add stylesheet yourself. This is why CSS Modules is better than inline-styles and CSS in JS in terms of React performance tuning. The facts is the following.

inline-styles
　Styling and CSS – React
CSS in JS
　CSS-in-JS Performance Cost - Mitigating Strategies
　Stop using CSS in JavaScript for web development

By the way, Next.js allows you to use CSS modules simply.
(see Built-In CSS Support)

3. Use react-window

You should adopt react-window if your site has list page rendering many components. The performance score was up about 20 by this approach.

You may think why I recommend not react-virtualized but react-window. Actually, Facebook recommends windowing libraries as react-window and react-virtualized(see Optimizing Performance).
The reason is the react-window developer who also developed react-virtualized recommends to use react-window(see github). In addition, the unpacked size of react-window is 865kB, on the other hand the one of react-virtualized is 2.27MB as below.

Conclusion

This article showed how to improve the performance of React App based on my site as follows.

Use SSG
Change style framework to own stylesheet
Use react-window

Recently, the importance of rendering page quickly has increased like Core Web Vitals. I hope your Web site renders more quickly!

Convenient Python Library for importing modules

nuko_suke — Sat, 29 Aug 2020 10:02:57 +0000

I released the Python library which is named autoload_module.
It will be more comfortable to your Python programming.

What is the library?

This library is enable to automatically import modules and get class objects. The example is below.

Directory

project/
 ├ example.py
 └ validator/
   ├ validator_a.py
   ├ validator_b.py
   └ validator_c.py

validator_a.py

class ValidatorA:
    # b and c are same.
    def valildate(self, input):
        # process of validation

example.py

from autoload.module_loader import ModuleLoader

input = "foo bar baz"
loader = ModuleLoader()

# Automatically import modules and return class objects
validator_classes = loader.load_classes("validator")
try:
    # initialize and execute method
    [clazz().validate(input) for clazz in validator_classes]
except:
    print("input is invalid!!")

You can also get function objects.

# This is the example you defined not classes but functions like 'validate_A', 'validate_B' and 'validate_C'
validate_functions = loader.load_functions("validator")
[func(input) for func in validate_functions]

What is useful?

It will be useful to do something in bulk.
The following is assumed as a concrete usage example.

validation
pipeline

The example of pipeline is below.

Directory

project/
 ├ example.py
 └ pipelineA/
   ├ get_data_a.py
   └ processing_data_a.py
 └ pipelineB/
   ├ get_data_b.py
   └ processing_data_b.py

example.py

from autoload.module_loader import ModuleLoader

package_names = ("pipelineA", "pipelineB")
loader = ModuleLoader()

# You should use library like `concurrent.futures`
for package_name in package_names:
    GetData, ProcessingData = loader.load_classes(package_name)
    data = GetData().get()
    processed_data = ProcessingData().process(data)

Hot to use

Please read this.

Conclusion

This library give automatically importing modules.
I welcome your contribution!

Forem: nuko_suke

Why don't you do it when the browser is free instead of setInterval?

Source Code

Summary

Validate Form during Browser Idle for Performance Optimization

Example of React

Conclusion

Improve Responsiveness to User Interactions

Prerequisite

Before Improvement

1. Import modules when user clicked the button

2. Send analytics data

After Improvement

point 1

point 2

Result

Conclusion

JavaScript Import Strategies for Performance Optimization⚡

1. Import when the page starts loading

2. Import when the module is needed

Are there other import strategies?

Conclusion

3 Best Practices for React Performance Tuning

1. Use SSG

2. Change style framework to own stylesheet

3. Use react-window

Conclusion

Convenient Python Library for importing modules

What is the library?

What is useful?

Hot to use

Conclusion

Are there other `import` strategies?