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

[@ErickWendelAcademy]

Eaaaai galera como estão? Espero que estejam curtindo o conteúdo. Notei que no video esqueci de colocar o AbortController para o backend quando o frontend aborta a operação. Criei um segundo arquivo com a solução corrigida. Não esquece de deixar seu like no video e o star no repositorio, isso me ajuda demais! github.com/ErickWendel/webstreams-nodejs-and-browser-tutorial/blob/main/recorded/server/index-bug-resolvido.js

[@lczago]

da pra fazer a mesma coisa que vc ensinou com vídeos? (mp4, mkv etc...) ou funcionaria de uma forma diferente?

[@HerumorNumenorean]

@ErickWendelTraining esse comentário não está fixado

[@ErickWendelAcademy]

@@HerumorNumenorean valeuuu

[@AnaRebeca-gx4zk]

eX@@HerumorNumenorean R

[@wellingtonborgmann8299]

Parabéns cara, sua contribuição é louvável, conteúdo em português é muito pouco, ainda mais coisas mais avançadas, por isso tenho que aprender inglês, vlw

[@obrxlx]

Conteúdo de alta qualidade, mostrando como usar as ferramentas corretas do Node pra criar soluções! Quem souber absorver bem este conteúdo tem um ouro nas mãos!

[@ogustavovasquez]

Traz mais desse "como você faria para... com Node?". Ficou top demais, mano.

[@ErickWendelAcademy]

Ai simmm, vou trazer 🤩

[@paulovolpin2852]

Brabo demais!!! Isso eleva o nível e disponibiliza um leque muito poderoso pra resolver problemas reais de maior escala. Já tinha visto um vídeo seu e um post lá no Linkedin mostrando um código, ai apliquei no trampo, foi um ganho muito grande lá no processo. Agora com esse acoplamento de web e node o bagulho fica sem limites mano. Grato demais pela aula!! Abraço

[@luscasleo]

Esse cara é fera! Conteúdo super importante pra quem procura programar de forma realmente performática.

[@HerlonCosta]

Isso aqui é incrível, aprendendo já pra aplicar em um projeto pessoal.

[@digaoespectro4499]

E ae mano ... admiro teu trabalho! Espero que consiga chegar 50% desse teu conhecimento... Estou me esforçando cada dia mesmo iniciando agora nesse novo mundo! Agradeço por ter pessoas como vc que nos dá incentivo.

[@MrChernicharo]

Excelente vídeo! Adorei o `--watch do node@19`. Fiquei de cara com esse lance de manipular as streams, mandar tudo pro front, tirar vantagem do abortController e tudo mais. Muito massa! Inclusive dei uma tentada aqui no desafio do fim do vídeo mas parece q to patinando 🤦🏽 hahaha. Acho q me falta traquejo com node fora do basicão REST. De todo modo, muito obrigado Erick pelo conteúdo. Vou ficar ligado nos vídeos!

[@adeniltonbarroso5087]

Foi meu primeiro contato com webstreams e conseguir entender sem me perder. As aplicações para essa abordagem são inúmeras. Muito obrigado pela aula, excelente didática!

[@DhenysonJhean]

Ai sim em, video em portgues com conteudo surreal top das galaxias. Vlw Erick, tu é o cara!!!

[@darckalado]

Cara nunca programei em JS na vida kkk e vi seu video até o final, consegui absover o conceito e estou pensando em como aplicar com python. VALEU UM ABRAÇO

[@taveirinha1337]

Assunto de Seniorzãaoo em malandro!! Top d+ Erick

[@marllongomes]

Muito bom o conteúdo! Nesse nível não se encontra em outros locais no yt.

[@ErickWendelAcademy]

Orraaaaa. Esse não achei nem pela internet🤣🤣 o bom que já conheço nodejs streams então fui assimilando na tentativa e erro

[@angelicaflausino2242]

Top! Fui acompanhando o vídeo e fazendo junto, muito bom, parabéns pelo conteúdo.

[@kauenery7617]

mano bom demais esse video! parabéns e obrigado! foda! tava com uma treta aqui no trabalho com problema de performance pra abrir arquivo JSON gigante na página e vou resolver com esse aproach que vc passou, valeu demais.

[@dev.dismonte]

Mano o Erick e o Fábio Akita são disparados os caras mais disruptivos nos conteúdos. Muito top!

[@celiovmjr]

Tudo bem, você venceu! Me inscrevi no seu canal... Você é incrível ❤️

[@cortesdev2448]

Sempre trazendo conteúdos que só encontramos aqui, só aluno do JS Expert, se tiver que dar uma dica a alguém seria compre esse curso

[@alissongomes2145]

Erick é foda demais, aprendi Node com ele em um mês o que não aprendi em 1 ano de cursos la da Udemy.

[@matheuszvidal]

TU É FERA! assisti tudo e espero que possa trazer a resolução do desafio no final :)

[@gauravpurohit3755]

00:00 - SIGN UP AE 00:28 - About video content 01:53 - Free content tips 02:21 - What problem do web streams solve? 04:41 - Demo: downloading and parsing csv data 07:04 - Initializing a Node.js project to create the Server 08:02 -Node.js version used 08:12 - Creating the server without frameworks 09:42 - Releasing public access to the server 12:26 - Reading CSV file with createReadStream 13:12 - Converting a readable stream for web using Readable 18:16 - Convert data type (CSV to JSON) with transform from web streams and Node.js streams 19:55 - Mapping only desired information from JSON with transform stream 24:12 - Differentiating the API from a REST, sending data on demand 25:15 - Informing how many items have already been processed 26:31 - The importance of using line breaks 27:36 - Initializing a Node.js project to create the App 29:21 - Front-end: building the cards to display the information 34:13 - Consuming the API data we created 34:59 - Canceling operations in Javascript with abort controller 35:56 - Consuming data from a readable stream 38:51 - Converting data received from API to JSON even with two chunks in the same stream 44:47 - Creating a writable stream to plot the results sent by the server 47:50 - Plotting the API information on the frontend 48:21 - Creating event listeners to start and stop streams 51:49 - Limiting characters on cards and creating a log to let you know that the stream has stopped 54:08 - Back pressing on project streams 55:11 - Real problems applying the project in this video 55:58 - Tooltips to become a Javascript expert 56:21 - Final thoughts on the project 57:25 - Blooper reels 58:13 - Like and share this video!

[@adriancampos2523]

Teu conteudo eh mto top.. sem firula falando coisa raiz de uma forma legal

[@christopherwillians4560]

Os indianos vão vir aqui no vídeo aprender com vc. O cara é tão zika que consegue ensinar os caras que ensinam. Top demais! Queria um dia ter 1% do seu conhecimento. Obrigado Erick ✌️

[@thyaghito]

Obrigado algoritmo do youtube por me indicar esse canal! Parabens pelo conteudo!

[@DavidDeltaSierra]

Erick é um mito, os seus vídeos de performance me fizeram gostar de nodejs hahahahaha

[@ErickWendelAcademy]

hahaha adorei!! Bora que tem muito mais!

[@alisonrodrigues3087]

O único canal BR que trás verdadeiramente conteúdo avançado em javascript!!!

[@diogo254254]

Como eu fico feliz que tu voltou a fazer video em português. Valeu.

[@ErickWendelAcademy]

opaaa ai sim!! to balanceando entre ptbr e em ingles agora 🤩

[@fernando-felicio]

Os erros de gravação são os mais esperados. Kkkkkkkk Brincadeiras a parte, que conteúdo top mano. Só tenho a agradecer por esse ensinamento. Deus está te dando em dobro tudo o que entrega de conteúdo pra comunidade. Vc é brabo demais.

[@rafaelcarlos3815]

Essas aulas me deixa emocionado

[@cristovaogallagher]

Mano do céu. Vou tentar isso amanhã num projeto que tô trabalhando. Tô sofrendo demais para processar uma planilha xlsx com 400k linhas. Espero que dê certo 🙏🏻🙏🏻🙏🏻. Valeu meu amigo pelo conteúdo

[@pensandosimples]

Sou DBA, não trabalho com JS mas acho legal saber que coisas assim existem.

[@ErickWendelAcademy]

Dahoraaaa

[@HerlonCosta]

Sensacional como sempre mestrão, confesso que vou ter que assistir mais umas duas vezes pra fixar bem. Ta sênior demaaaaais!!!!

[@seuhomem2025]

Conteudo top, a minha primeira liguagem foi o js, atualmente eu programo em golang mas sempre volto nos seus videos para me manter informado. Parabéns!!

[@johnsmera7481]

Ce loco! Esse cara é muito brabo, a comunidade agradece

[@devalefe]

Monsstrrooooooo! 🤘 Conteúdo de qualidade! Muito top como sempre!

[@wellingtonsilva2669]

Esse canal sai do básico, tem canal por aqui que está mais de 5 anos resumindo documentação. Erick e Akita são os melhores para a comunidade de tech (devs) sem dúvidas fora do padrão de canais para vender cursos.

[@BrunoOliveira-kk8on]

Didática ímpar! Você é fera e manja muito, vlw por ensinar

[@GabrielLeite360]

Sensacional mano! 1 hora pareceu 5 minutos kkkk valeu!!!

[@ErickWendelAcademy]

hahhahaha né! tmj manolo

[@kontempler]

Sensacional! Funcionou muito bem! Seguindo este exemplo, gostaria de saber como manipular diretamente um array pegando cada objeto dele, individualmente como chunk.

[@PaulaFlavia1]

Ainda sou iniciante, mas achei essa aula fantástica

[@opcoesdenegocio7948]

Excelente vídeo :) Seria possível fazer o caminho inverso com as mesmas ideias? O front enviando um arquivo pesado via stream seguindo o mesmo conceito? Seria ótimo um vídeo seu com isso. Obrigado

[@samukinha4723]

Valeu Erick! Já até sei com qual CSV eu vou testar! Conteúdo SENSACIONAL

[@ErickWendelAcademy]

ai simmmm me diz como foi depois!!

[@hiperesp]

+1 inscrito te conheci por esse vídeo, dei uma olhada no seu canal e me inscrevi, já tenho pelo menos uns 5 vídeos seu na lista :)

[@hiperesp]

voltei pra falar que tou maratonando os videos do canal, assisti tanto video seu que eu ja perdi a conta kkkkk

[@saulotarsobc]

Mano. Pode falar mais sobre Electron JS? Seria legal ver um projeto seu. 😅 Com next ok? Rsrs

[@Renanfa1]

Parabéns cara, como sempre conteúdo muito bom.

[@Matoxina]

Mano, eu quase sempre odeio assistir video aulas de programação pq acho muitas vezes chato, mas esse video eu assisti quase tudo sem problema, adoro teu jeito de explicar e deixar as coisas simples

[@ErickWendelAcademy]

Powwwww fez meu dia melhor aqui! Haha muito obrigado pelo feedback! Bora pra cima!

[@Policiano]

Nem sou dev JavaScript mas achei o conteúdo muito útil

[@jeffersonlira3952]

Caraca que cara bom, primeira vez que visito o canal, muito conhecimento e facil entendimento, mas só uma dúvida, entrei no seu video de apresentação do teu curso, e está em ingles, mas o curso é em ingles mesmo ?! ou só aquele video

[@rubensalmeida7510]

Obrigado Erick! muito bom o conteúdo!

[@ziul911]

Nem terminei de ver ainda e só pelo back já valeu o like e inscrição. Fica a recomendação/sugestão de uma v2 turbinada transformando a stream de retorno de uma query no banco, transformando ela usando message packer e mandando pro front. Será que rola? A performance vai ser maior com a transformação com message packer ou usando JSON puro? Parabéns pelo conteúdo, está excelente!

[@AlanSilva-cm8wc]

Erick frontend, aeeeeee é sênior demais

[@henrique-marti]

O moleque é bruto no javascript

[@ArthurHenrique-qu5wm]

Tarde mestre, vi que você commitou uma solução pro 'bug' que na verdade é o comportamento normal do AbortController. Creio que se vc usar o método .abort('reason') o browser não estoura aquele 'erro', que acontece porque vc não passou nada pro método (tipo, abortou sem motivo). Vou fazer um fork e testar, mas creio que isso substituiria o if (!error.message.includes... Do mais, você é mostro! Seu conteúdo é diferenciado e mesmo assim, acessível. Parabéns, e obrigado!

[@ErickWendelAcademy]

boaaaa, na verdade a correção foi pq eu não estava abortando no Node.js quando a conexão encerrava, então ele ia ler o CSV inteiro para conseguir parar, ai só adicionei o abortController lá Mas excelente sobre o .abort, não cheguei a testa-lo assim. Pode subir um PR lá corrigindo esse index-bug-resolvido se rolar sem o tryCatch 🤩

[@programedegraca]

Que conteúdo bom. Um exemplo para mim. Como ficaria um código assim em C# ?

[@hugolinobg]

​O curso Fundamentos de Javascript - Aprendendo a programar quando vai esta disponível de novo?

[@LeonardoSilva-yj9lg]

Parabéns pelo conteúdo.

[@theluposki5712]

Aí é Sênior =D

[@willmarcio8696]

Conteúdo top demais!!!

[@clevelandmusic799]

Genial! Parabéns pelo conteúdo

[@HenriqueMoroziniHupp_]

Muito top cara, quanto tempo você gasta para produzir um conteúdo desse de praticamente 1h ?

[@ErickWendelAcademy]

Muito obrigado!! De umas 8-16 horas de preparação (construir scripts, Demonstrações, pesquisa) mais umas 4 de gravação

[@HenriqueMoroziniHupp_]

@@ErickWendelAcademy sem contar a edição né haha' praticamente um dia ao total. Muita dedicação, parabéns de verdade !!🎉🎉🎉

[@bascheffer]

Muito bom, obrigado!

[@ErickWendelAcademy]

tmjjj e tenta fazer o desafio em!

[@JanderSilva01]

Obrigado pelo conteúdo!!

[@ErickWendelAcademy]

Tmj demaaais

[@Leitemcs]

Que cara bom pqp

[@danilinholacerda]

Conteúdo sensacional!

[@Gustavo-bi4hv]

Esse conteúdo de webstreams é abordado com mais detalhes no curso JS Expert?

[@MrHUGOLADEIRA]

PORRAN, RANCOU BOXXXTA! kkkkk video 10/10

[@alexartus]

Opa! Muito show esse conteúdo. Sabe se já tem suporte para outras tecnologias no backend? Java + Spring por exemplo como backend? E vc acha que webstream substitui totalmente websocket e SSE ou tem casos que estas outras tecnologias se encaixa melhor ?

[@Nanikowow]

Blza? Tb estou interessado, mas no meu caso seria .NET CORE.

[@Ghaleon15]

Dúvida boba: Somente com a versão 19 do node pra realizar isso? Ou a 19 é pra seguir o tutorial? Valeu, Erick!

[@ErickWendelAcademy]

19 para o tutorial, nas anteriores o -watch nao funciona, mas o resto tudo funciona

[@henrmota]

No cliente podemos usar webstreams com qualquer request ou mesmo ficheiro? Ou é preciso que o server tmb use streams? Ótimo conteúdo, sou português só vejo videos em inglês, com a exceção dos seus videos.

[@tiago20092003]

Isso é muito interessante

[@LuizGustavoArruda-qg4to]

Fala Erick, blza? Com essa biblioteca streams é possível fazer uma requisição server-to-server? É muito comum de mesmo entre backends ser necessário enviar requests grandes (dados que vem de arquivos ou bancos de dados por exemplo)

[@ErickWendelAcademy]

Opaaa, no www.nodejsstreams.com eu mostro exatamente isso 🤩🤘🏻

[@LuizGustavoArruda-qg4to]

@@ErickWendelAcademy opa! já vou ver como adquirir isso! hahahaha! abração!

[@gabriellsscolaro]

Gerencio um putcha site usando apenas Django e uns JavaScript dentro das templates, isso não tem como ser feito com Ajax mandando a informação que chegou e como request data do Ajax recebo no Back end o resto dos dados um por um se repetindo e colocando na tela conforme o time que você quer, ou isso pesa muito para ser feito com Ajax e Django, achei muito boa essa ideia, mas gostaria de implementar em um servidor de Ajax, só não sei se valeria a pena usar pandas ou o próprio models do Django, legal desse método é o quão dinâmico fica sem travar

[@brunonascimento6001]

Se você utilizasse o readline do lado do NodeJS, vc não garantiria que o JSON viria certo? sem precisar concatenar os chunks?

[@ErickWendelAcademy]

não necessariamente, readline só vai ajudar voce a ler linha a linha, mas nem sempre o linha a linha é uma quebra. No windows eles usam / se não me engano, ai pode quebrar alguns casos.

[@junnior8003]

Mano tu é top demais!

[@anthonibs]

Como posso criar um relatório em pdf no front para o usuário baixar, pois tenho que gerar muitas linhas e acaba travando o processamento teria algum jeito mais viável de se fazer?

[@gustavofigueiredo280]

Vídeo muito top!! Essa feature vai abrir muitas portas para as páginas web. Uma coisa que fiquei curioso, na função parseNDJSON o porque corre o risco da variável ndjsonBuffer ter algo não processado na hora do flush? Seria se faltasse o " " no final?

[@ErickWendelAcademy]

Exatamente! Certifica que nunca vai ter dado pendente de ser executado (algo raro, mas que pode acontecer) Valeuuuu

[@gabriel-dg2bd]

isso só funciona com um JSON local, ou qualquer um? Tô com um JSON pequeno (34 itens), mas a resposta tá demorando 4s só pra fazer a listagem para um array.

[@ErickWendelAcademy]

Sim qualquer um. 34 itens mas qual o tamanho desses itens? Quantidade não importa muito, mas a quantidade de sub itens nele sim

[@gabriel-dg2bd]

@@ErickWendelAcademy agora que vc falou fui dar uma olhada, mas só são 8 sub itens

[@gabriel-dg2bd]

@@ErickWendelAcademy A parte mesmo do front começa em 29:21? essa recepção dos dados n entendi como faria sem ser localmente, ou no caso tem q fazer aquela parte do Readable e no lugar do diretório "./animefly/csv" colocar a rota get. ou essa parte da API só o bak que faz?

[@ErickWendelAcademy]

@@gabriel-dg2bd então tem algo errado hehe

[@ErickWendelAcademy]

@@gabriel-dg2bd seria subir seu arquivo num S3 ou em uma API apenas e baixa-lo via fetch a partir da Url

[@jandernery]

Fala Erick beleza, então, estou upando um file pequeno até, mas no server está dando um 413 Request Entity Too Large, será que é problema da aplicação ou da cloud, valeu mesmo seus vídeos são otimos.

[@filipesantos1442]

Conteúdo foda! Valeu pela riquíssima aula Wendel! Tenho uma dúvida com relação ao split feito na linha 30 do `app/index.js`. Oq aconteceria se houver um ` ` no meio de alguma descrição do chunk, isso não sinalizaria erroneamente o fim de um item? Se sim, haveria alguma alternativa para o split correto do item, caso o chunk seja grande demais?

[@principe.borodin]

Magnifico.

[@joaocosta1228]

Muito massa cara

[@TiagoPerrelli]

E ai Erick, beleza? Reproduzi algo parecido, porém abrindo um pool de connections do mysql para retornar da mesma forma. No meu caso, tô pegando: ERR_INVALID_STATE Type Error Controller is already closed? Alguma idéia?

[@Igor-wf7cn]

Opa Erick, tranquilo? Esse underline que vc colocou tem o papel de que?? no .on('listening'), _ =>{} Seria uma função?

[@Chr_04]

Papel nenhum, é só uma firula pra ficar bonitinho pq caso só tenha um parâmetro na Arrow function vc pode omitir os parenteses

[@rafamaragui]

Carai que fera!

[@pavlov1774]

Gostaria de saber se o TREINAMENTO SOBRE STREAMS e' em ingles e valor tambem e' em dolar ?

[@denisnunes1601]

FODA PRA CARAI

[@flaviomartins7179]

Excelente!!

[@noriller]

Esse erro não vem do fetch? Tipo, não faltou só por um catch no fetch já que parece que funciona como um erro estourando?

[@ErickWendelAcademy]

Nao, ele vem da writable stream, coloquei aqui no comentário fixado a resolução 🤩

[@noriller]

@@ErickWendelAcademy top

[@marcioalexandremarcondes557]

Muito bom!!!

[@eurico_dev]

Conteúdo animal!

[@edu.paixao]

kd o link do Telegram? 🤔

[@robsondev2]

Pessoal como ficaria processar sob demanda um resultado de uma consulta do Banco de Dados (Postgres) pra gerar um csv ou xls? Daria pra fazer?

[@ErickWendelAcademy]

Rapaz, eu tenho esse exato exemplo no www.nodejsstreams.com/

[@carlosricardoziegler2650]

Conteúdo top! Teria algo sobre usar isso com Map Tile server? Pergunto pois queria implementar um map tile server pegando dados do PostGIS no lugar de um csv ou então de um bucket da GCP. Alguma ideia? Vi algumas implementações mas tem uma performance não tão boa. Tô usando Mapbox e protobuffer na api :) Valew

[@ErickWendelAcademy]

Não tenho ideia o que seja, acredito que esteja falando sobre gRPC certo?

[@carlosricardoziegler2650]

@@ErickWendelAcademy é uma api que fornece dados para mapa, onde ele recebe o zoom, x e y de um mapa e ele retorno os polygons. É bem interessante.

[@ErickWendelAcademy]

@@carlosricardoziegler2650 se voce consegue ler como stream então provavelmente consegue processar também. Tem que ver se a API deles retorna esses dados como stream

[@felipemiguel5581]

Top de mais.

[@samuel_coder]

nao tem uma lib pra deixar isso mais facil?

[@Pedro-gu7jj]

sou junior 3, ainda não vi o vídeo, a solução que eu tentaria de primeirar seria paginar os dados

[@raphapiki]

Massa!

[@fsilva1985]

lembrando que é apenas um teste. no mundo real provavelmente ele faria sim a leitura desse arquivo e colocar em algum banco de dados para assim o front consumir.

[@ErickWendelAcademy]

Depende! Ferramentas de BI/BigData acabam consolidando dados de arquivos direto de CDNs como o S3 ou AWS Athena de lá é tudo arquivo ao invés de banco de dados

[@tiagocandido1593]

muito bom