Como ler 10GB de JSON no frontend sem travar a tela || Webstreams 101 || Erick Wendel

Consumir gigabytes de arquivo direto no frontend sem travar o backend, sem travar o frontend e melhor, com funcionalidade para cancelar requests.

As Webstreams vieram para ficar e hoje você vai aprender sobre como converter streams do Node.js para as Webstreams e como processar massivamente dados sob demanda

#WebStreams #tutorial #advancedjs

✅ ACESSE MEU TREINAMENTO SOBRE STREAMS

https://bit.ly/nodejs-streams-training

✅ FOLLOW ME

▸ Linkedin:   / erickwendel  
▸ Blog: https://erickwendel.com.br/
▸ Facebook: https://fb.com/page.erickwendel
▸ Medium:   / erickwendel  
▸ Twitter:   / erickwendel_  
▸ Telegram: https://bit.ly/canalerickwendel

✅ LINKS USADOS NO VIDEO

Código fonte: https://bit.ly/webstreams-nodejs-and-...
Database: https://www.kaggle.com/datasets/danie...

✅ REFERÊNCIAS

https://developer.chrome.com/articles...
https://www.tpeczek.com/2019/04/fetch...
https://developer.mozilla.org/en-US/d...

✅ TIMELINE

00:00 - SE INSCREVE AE
00:28 - Sobre o conteúdo do vídeo
01:53 - Dicas de conteúdo gratuito
02:21 - Quê problema as web streams resolvem?
04:41 - Demo: baixando e analisando dados do csv
07:04 -Inicializando um projeto Node.js para criar o Server
08:02 -Versão no Node.js utilizada
08:12 - Criando o server sem frameworks
09: 42 - Liberando acesso público ao servidor
12:26 - Lendo o arquivo CSV com createReadStream
13:12 - Convertendo uma readable stream para Web usando Readable
18:16 - Converter o tipo do dado (CSV para JSON) com transform de streams web e streams do Node.js
19:55 - Mapeando apenas as informações desejadas do JSON com transform stream
24:12 - Diferenciando a API de uma REST, enviando dados sob demanda
25:15 - Informando quanto itens já foram processados
26:31 - A importância de usar quebra de linha
27:36 - Inicializando um projeto Node.js para criar o App
29:21 - Front-end: construindo os cards para exibir as informações
34:13 - Consumindo os dados da API que criamos
34:59 - Cancelando operações no Javascript com o abort controller
35:56 - Consumindo os dados de uma readable stream
38:51 - Convertendo dados recebidos da API em JSON , mesmo com dois chunks na mesma transmissão
44:47 - Criando um writable stream para plotar os resultados enviados pelo server
47:50 - Plotando as informações da API no front-end
48:21 - Criando event listeners para o start e stop das streams
51:49 - Limitando caracteres nos cards e criando um log para avisar que o stream parou
54:08 - Back pressuring nas streams do projeto
55:11 - Problemas reais para aplicar o projeto deste vídeo
55:58 - Dicas de ferramentas para se tornar especialista em Javascript
56:21 - Considerações finais sobre o projeto
57:25 - Blooper reels
58:13 - Curta e compartilhe esse vídeo!

#Webstreams #JSON #DesenvolvimentoFrontend #JavaScript #GrandeQuantidadeDeDados #GerenciamentoDeMemória #OtimizaçãoDeDesempenho #ProgramaçãoAssíncrona #ProcessamentoDeDados #StreamDeDados #PipelineDeDados #FragmentaçãoDeDados #CompressãoDeDados #TratamentoDeErros #ProgramaçãoOrientadaAEventos #DesempenhoWeb #DesenvolvimentoDeSoftware #DesenvolvedorWeb #WebPerformance #EricWendel #DesenvolvimentoJavaScript #DesenvolvimentoWeb #StreamingDeDados #APIWeb #WebDevelopment #ProgramaçãoWeb #DesenvolvimentoDeAplicativos #AplicativosWeb #ProgramaçãoParaWeb #Programação.