Перейти к содержимому

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

Erick Wendel

0:00 / 0:00

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

111 077 просмотров · 3 года назад
Erick Wendel
151 тыс. подписчиков
111 077 просмотров · 3 года назад
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.