DEV Community

Davi Orlandi
Davi Orlandi

Posted on

Progressive JSON em TypeScript: Carregando e Processando Dados de Forma Incremental

O que é Progressive JSON?

Progressive JSON é uma abordagem para transmitir e processar dados JSON de forma incremental, permitindo que o cliente consuma partes do JSON à medida que elas chegam, sem precisar esperar o documento inteiro ser carregado. O objetivo é melhorar a experiência do usuário e a performance em cenários onde o JSON é muito grande ou gerado dinamicamente, como APIs de streaming, dashboards de dados ou aplicações em tempo real.

Por que Progressive JSON é necessário?

Imagine que você está desenvolvendo uma aplicação que consome um relatório gigante ou um feed de dados em tempo real. Se você esperar o JSON inteiro ser gerado e transferido para só então começar a processar, o usuário pode ficar esperando vários segundos (ou até minutos!). Com Progressive JSON, você pode começar a exibir informações parciais imediatamente, enquanto o restante dos dados ainda está sendo processado e enviado pelo servidor.

Como Progressive JSON funciona na prática?

A ideia é dividir o JSON em partes menores (chunks) e transmiti-las ao cliente conforme ficam prontas. O cliente, por sua vez, vai processando cada parte assim que ela chega, atualizando a interface de forma incremental. Isso pode ser feito usando streams HTTP, WebSockets ou qualquer protocolo que suporte transmissão contínua de dados.

Exemplo prático de uso

Vamos supor que você tem uma API que retorna uma lista de usuários muito grande. Em vez de esperar tudo ficar pronto, o servidor pode ir enviando cada usuário como um chunk separado:

No servidor (Node.js/Express):

import express from 'express';

const app = express();

app.get('/api/progressive-users', (req, res) => {
  res.setHeader('Content-Type', 'application/json');
  res.setHeader('Transfer-Encoding', 'chunked');

  res.write('['); // Início do array

  let first = true;
  const users = getBigUserList(); // Imagine uma função que retorna milhares de usuários

  users.forEach((user, idx) => {
    setTimeout(() => {
      if (!first) res.write(',');
      res.write(JSON.stringify(user));
      first = false;
      if (idx === users.length - 1) res.end(']');
    }, idx * 100); // Simula envio progressivo
  });
});

function getBigUserList() {
  // Exemplo simplificado
  return Array.from({ length: 5 }, (_, i) => ({ id: i + 1, name: `User ${i + 1}` }));
}

app.listen(3000, () => console.log('Servidor rodando na porta 3000'));
Enter fullscreen mode Exit fullscreen mode

Exemplo de consumo progressivo em TypeScript

No cliente, você pode consumir esse JSON progressivamente usando a API de streams do navegador:

async function fetchProgressiveUsers(url: string, onUser: (user: any) => void) {
  const response = await fetch(url);
  const reader = response.body?.getReader();
  const decoder = new TextDecoder();
  let buffer = '';
  let insideArray = false;

  if (!reader) throw new Error('No stream available');

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    buffer += decoder.decode(value, { stream: true });

    // Processa cada usuário individualmente
    let match;
    const regex = /{[^}]+}/g;
    while ((match = regex.exec(buffer)) !== null) {
      const user = JSON.parse(match[0]);
      onUser(user);
    }
  }
}

// Uso:
fetchProgressiveUsers('/api/progressive-users', (user) => {
  console.log('Usuário recebido:', user);
});
Enter fullscreen mode Exit fullscreen mode

Ferramentas e bibliotecas úteis

Se você quer algo mais robusto, pode usar bibliotecas como stream-json ou JSONStream no Node.js para processar grandes volumes de dados JSON de forma eficiente e baseada em eventos.

Exemplo com stream-json:

import { parser } from 'stream-json';
import { streamArray } from 'stream-json/streamers/StreamArray';
import * as fs from 'fs';

fs.createReadStream('usuarios.json')
  .pipe(parser())
  .pipe(streamArray())
  .on('data', ({ value }) => {
    console.log('Usuário:', value);
  });
Enter fullscreen mode Exit fullscreen mode

Vantagens do Progressive JSON

  • Experiência do usuário melhor: O usuário vê dados aparecendo na tela imediatamente, sem esperar o carregamento completo.
  • Menor uso de memória: Não é preciso carregar o JSON inteiro na memória, útil para arquivos grandes.
  • Resiliência: Se houver falha no meio do caminho, parte dos dados já foi processada.
  • Escalabilidade: Permite processar e exibir dados em tempo real, ideal para dashboards, feeds e relatórios extensos.

Conclusão

Progressive JSON é uma solução elegante para cenários onde o volume de dados é grande ou a latência importa. Ele permite que aplicações web e APIs sejam mais responsivas, escaláveis e eficientes, aproveitando streams e processamento incremental. Se você trabalha com grandes volumes de dados ou quer melhorar a experiência do usuário, vale a pena experimentar!

Top comments (0)