Transmissão de dados com Fetch() e NDJSON

*”If you stream it, you can do it” (Se o senhor transmitir, o senhor consegue) — Walt Disney[^1] *

Os streams estão entrando em cena à medida que buscamos maneiras de melhorar o desempenho. E se, em vez de esperar pelo nosso inteiro a resposta ajax completa, poderíamos começar a mostrar os dados à medida que eles chegam?

Os fluxos nos permitem fazer isso. Eles são uma fonte de dados que pode ser criada e processada de forma incremental. Isso significa que, à medida que pedaços de dados ficam disponíveis, podemos trabalhar neles imediatamente.

Usando o API de busca com um formato de dados chamado NDJSON que divide objetos JSON maiores em objetos JSON menores delimitados por caracteres de nova linha, podemos receber um fluxo de pedaços menores de dados JSON como um fluxo. Como nossos dados NDJSON estão sendo transmitidos, podemos começar a processar e renderizar imediatamente. Isso deixa os usuários felizes porque podem ver as coisas mais cedo e os desenvolvedores felizes porque aumenta o desempenho geral. Se o senhor associar tudo isso aos service workers, poderá realmente ver o melhorias no desempenho.

Exemplo de uso

Parece uma situação em que todos ganham, mas qual é o problema? Bem, existem pacotes no npm, como o ndjson que serializa JSON para NDJSON, mas não temos uma maneira fácil de desserializar NDJSON para um fluxo de objetos JavaScript… até agora!

Apresentando o can-ndjson-stream

can-ndjson-stream é um módulo JavaScript simples que faz o trabalho pesado de serializar seu fluxo NDJSON em um arquivo ReadableStream de objetos JavaScript. Use-o da mesma forma que usaria JSON.parse com um objeto JSON.

Siga estas etapas simples para usar o can-ndjson-stream .

//1. require the can-ndjson-stream module
import ndjsonStream from 'can-ndjson-stream';

//2. pass the NDJSON stream response body to the ndjsonStream function. Typically, this would be used with the fetch() method.

const readableStream = ndjsonStream(response.body);  
//3. use readableStream, which is now a ReadableStream of JS objects, however you like. The ReadableStream API exposes a .getReader() and .cancel() method.

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

Primeiros passos

1. Baixe o pacote do npm e salve-o em seu projeto.

npm i can-ndjson-stream --save

2. Importe o módulo como faria com um módulo npm típico na parte superior de cada arquivo.

3. Analise seu response.body usando o ndjsonStream e trabalhar com o resultado.

Usando Async/Await

import ndjsonStream from 'can-ndjson-stream';

const fetchNdjson = async () => {
  const response = await fetch("/api");
  const exampleReader = ndjsonStream(response.body).getReader();

  let result;
  while (!result || !result.done) {
    result = await exampleReader.read();
    console.log(result.done, result.value); //result.value is one line of your NDJSON data
  }
}

Usando promessas

import ndjsonStream from 'can-ndjson-stream';

fetch('/api')  // make a fetch request to a NDJSON stream service
.then((response) => {
	return ndjsonStream(response.body); //ndjsonStream parses the response.body

}).then((exampleStream) => {
	let read;
	exampleStream.getReader().read().then(read = (result) => {
		if (result.done) return;
		console.log(result.value);

		exampleStream.getReader().read().then(read); //recurse through the stream
	});
});

4. [Optional] Crie uma API simples para servir dados NDJSON de amostra.

Seguir este tutorial no blog da Bitovi, que o ajudará a começar, ou dê uma olhada na demonstração em o repositório can-ndjson-stream.

E agora?

Se o senhor gostou deste artigo, envie um tweet para nós como o senhor planeja usar esse módulo! Confira também o restante do biblioteca CanJS. Se o senhor precisar de ajuda, não hesite em deixar um comentário abaixo ou fazer perguntas na seção Gitter do CanJS ou fóruns!

Citações inspiradoras sobre Streams Through History[^1]

[^2]: NDJSON significa JSON delimitado por nova linha. Cada caractere de nova linha em um arquivo separa essa linha em objetos JSON individuais, o que nos permite transmitir muitos pedaços menores de JSON em vez de um objeto JSON grande.

Sobre Bianca Gandolfo

Bianca é uma entusiasta de JavaScript que atualmente trabalha na equipe de código aberto da Bitovi. Ela gosta de fingir que está codificando as partes mais importantes da estrutura DoneJS em algum porão de hackers, mas na maior parte do tempo ela está apenas escrevendo documentação e corrigindo bugs perto da praia. Quando não está fazendo isso, ela pratica queimaduras solares enquanto se apaga repetidamente em uma prancha de surfe e escreve um currículo de JS para bootcamps de codificação em todo o mundo. Confira seus cursos em Estruturas de dados e algoritmos em JS e JS Foundations for Functional Programming (Fundamentos da Programação Funcional) em Mestres de Frontend.

www.bitovi.combiancagandoPublicações