Como usar web workers resolveu um problema de processamento no meu trabalho?

Vamos começar explicando a situação problema primeiro:

Para começar eu tinha dois objetos diferentes e precisava unificar eles e transformar em um só, mas quando eu digo que eles eram diferentes, eu quero dizerque eles tinham campos parecidos que estavam escritos de forma diferente em cada objeto. E você pode estar pensando que a solução ideal seria normalizar esses objetos, mas no meu cenário isso não era possível de ser feito e quando você é o desenvolvedor o seu trabalho é criar soluções para esses tipos de problema também que fogem ao ideal do que esperamos.

Nesse caso a primeira coisa que eu fiz foi começar a pesquisar e listar as soluções na IA e discutir com ela as soluções. Eu tenho gostado dessa forma de organizar o pensamento, por que funciona como se eu estivesse discutindo com um outro desenvolvedor a solução que eu estou pensando.

Para fazer isso eu pensei em duas soluções, a primeira seria fazer esse processamento no servidor mas o react na versão que eu preciso usar eu ainda não tem essa feature disponível e a outra opção seria criar um web worker para fazer esse processamento, sem comprometer a performance da aplicação.

Mas o que seria um web worker?

Um web worker é uma maneira de executar scripts em segundo plano em uma thread separada da thread que carrega a UI para o usuário. Ou seja você passa a ter dois canais executando tarefas, em um carrega as informações de layout e os componentes e em outra carregam os dados. Dessa forma ao invés de esperar alguns minutos reduzimos para alguns segundos o carregamento.

Como colocar isso em prática?

Para implementar essa solução, o primeiro passo é separar a lógica de “trabalho sujo” em um arquivo isolado. No meu caso, criei um script chamado unificador.worker.js.

A estrutura funciona através de um sistema de “mensageria”. O script principal envia os dois objetos brutos para o Worker; este, por sua vez, realiza toda a computação pesada de comparação e normalização e, ao terminar, “anuncia” que o resultado está pronto.

// Arquivo que seria o nosso worker

self.onmessage = function(e) {

    const { objetoA, objetoB } = e.data;



    // Aqui entra a lógica de mapear campos como 'nome_usuario' vs 'user_name'

    const resultado = objetoA.map(item => {

        const correspondente = objetoB.find(b => b.ref_id === item.id);

        return { ...item, ...correspondente };

    });



    self.postMessage(resultado);

};



// Utilizando o web worker no componente react

const worker = new Worker(new URL(‘./worker.js’, import.meta.url));



// Enviando os dados para processar

worker.postMessage({ objetoA, objetoB });



// Recebendo o resultado e atualizando o estado

worker.onmessage = (e) => {

    setDadosUnificados(e.data);

};

Fontes

Using Web Workers - Web APIs | MDN