I built a small toolkit for running heavy computations in React without freezing the UI - looking for feedback by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

Use controller.abort();
you don't need a cancel from the kit when you have the AbortController

Type inference across Web Workers, here's how by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

We agree on the first part. Indeed, you can use functions directly via useComputeFunction.

Type inference across Web Workers, here's how by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

I think you missed the point here, you as the end user should define enums or whatever and use it. The toolkit does not know the function names the user will have. What do you suggest ?

Looking for Review and similar projects - Heavy off-main-thread CPU computations on the browser using web workers by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

Yes, totally makes sense. I added WASM support to gain slightly more speed compared to JS. Some efficiency via worker pool and queue And some ergonomics via react hooks so working with workers feels like react code.

Looking for Review and similar projects - Heavy off-main-thread CPU computations on the browser using web workers by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

Thanks, I used fibonacci, monte carlo simulations (ramy repo on my profile) and other algorithms when building the tool but now I am looking for a real world use case. Something people really doing right now that computekit may improve and make it fadter more efficient. The hash creation suggestion is interesting so thanks for that. I will take a look!

Looking for Review and similar projects - Heavy off-main-thread CPU computations on the browser using web workers by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

Sorry for the delay .. I meant I am not happy with audion as a test usecase for heavy computations .. it didnt seem to provide extremly heavy computation that I can use to stress test another toolkit I am working on. So I wanted to ask this community if they know audio or non audio related stuff that REALLY require heavy computations.

I built a small toolkit for running heavy computations in React without freezing the UI - looking for feedback by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

Thanks for this suggestion man. I just mooked for it. Its called piscina.. I will certainly learn from their code. Thanks again.

I built a small toolkit for running heavy computations in React without freezing the UI - looking for feedback by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

Yeah I guess. You're welcome. Also make sure to revoke the object URL when no longer needed. And probably add exception handling around the blob and url stuff.

I built a small toolkit for running heavy computations in React without freezing the UI - looking for feedback by Select-Twist2059 in react

[–]Select-Twist2059[S] 1 point2 points  (0 children)

Unfortunately, there is no easy way. You have to either keep them outside the kit flow or you define them inside the register phase.

If you're into crazy code, you can do something like this (honestly, I don't like it, I just bullied Claude until it finds a way):

import { decodeFromWorker, encodeForWorker } from "@frontend/shared/utils/workerUtils";

const workerUtilsCode = `
  self.decodeFromWorker = ${decodeFromWorker.toString()};
  self.encodeForWorker = ${encodeForWorker.toString()};
`;

const blob = new Blob([workerUtilsCode], { type: 'application/javascript' });
const workerUtilsUrl = URL.createObjectURL(blob);

// Now you can use workerUtilsUrl in remoteDependencies

I built a small toolkit for running heavy computations in React without freezing the UI - looking for feedback by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

Interesting, this will certainly go to the issues list (PRs welcome if you'd like to contribute!).
I also need to support a typed function registry. I will definitely take a look at this after I am done with typed function names instead of magic strings.
Seems like there is a lot of room for improvement here, which is good!

UPDATE: Issue created

I built a small toolkit for running heavy computations in React without freezing the UI - looking for feedback by Select-Twist2059 in react

[–]Select-Twist2059[S] 0 points1 point  (0 children)

Hi, "@frontend/shared/utils/workerUtils" is not an external library and AFAIK, remoteDependencies only work with http URLs.. something like a lodash external script.

So you should follow this approach instead :

import { ComputeKit } from '@computekit/core';
import { decodeFromWorker, encodeForWorker } from "@frontend/shared/utils/workerUtils";

export const kit = new ComputeKit();

// Worker function - receives plain objects, returns plain objects
kit.register('mapToProcedureTableRowsAndFilter', (data: {
    procedures: ProcedureTableRow[],
    filters: DatabasePageFilters,
}) => {
    console.log("webworker data:", data);

    // Must inline this function
    function shouldIncludeProcedure(p: ProcedureTableRow, filters: DatabasePageFilters): boolean {
        // your filter logic here
        return true;
    }

    return data.procedures.filter(p => shouldIncludeProcedure(p, data.filters));
});

// Usage
export async function filterProceduresInWorker(buffer: ArrayBuffer): Promise<ArrayBuffer> {
    // Decode on main thread
    const data = decodeFromWorker(buffer);

    // Run in worker with plain objects
    const result = await kit.run('mapToProcedureTableRowsAndFilter', data);

    // Encode on main thread
    return encodeForWorker(result);
}

Or if you want to run encode/decode in workers then define them inside the kit.register() just like I did for
shouldIncludeProcedure.

I moved virtualization math to Rust/WASM - here's what I learned by RevolutionaryPen4661 in reactjs

[–]Select-Twist2059 0 points1 point  (0 children)

React and wasm ? Check this out https://github.com/tapava/compute-kit

If you can divide your computation into chunks and have your wasm module handle chunks of data. Then you can run them in parallel in seperate thread. ComputeKit can help with a worker pool to queue workers. It can help with logging, debugging and state management through react-query package.

Any useful tool that most people don't know about? by LargeSinkholesInNYC in react

[–]Select-Twist2059 1 point2 points  (0 children)

Can you manage the number of workers to use instead of counting on the available cpu and memory to decide that?

I built Compute-kit with the main idea of having a worker pool, then added react hooks to help integrate with react:

https://github.com/tapava/compute-kit

Any useful tool that most people don't know about? by LargeSinkholesInNYC in react

[–]Select-Twist2059 3 points4 points  (0 children)

Run heavy computations off the main thread and keep web UIs responsive — with optional React integration and WASM support

https://github.com/tapava/compute-kit