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