{"id":20137908,"url":"https://github.com/leeocoder/web-streams-js","last_synced_at":"2026-04-12T23:02:45.984Z","repository":{"id":198587037,"uuid":"701031273","full_name":"leeocoder/web-streams-js","owner":"leeocoder","description":"Este projeto é uma aplicação que consome dados de uma API em tempo real e os apresenta em um formato HTML. Tanto o frontend (JavaScript) quanto o backend (Node.js) fazem uso intensivo de Streams para manipular dados de maneira eficiente.","archived":false,"fork":false,"pushed_at":"2023-10-06T00:00:48.000Z","size":754,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T09:46:32.945Z","etag":null,"topics":["javascript","nodejs","streams-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leeocoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-05T19:13:02.000Z","updated_at":"2023-10-06T00:02:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"23be5d06-3769-4688-a8c3-9357c9727fde","html_url":"https://github.com/leeocoder/web-streams-js","commit_stats":null,"previous_names":["leeocoder/web-streams-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leeocoder%2Fweb-streams-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leeocoder%2Fweb-streams-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leeocoder%2Fweb-streams-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leeocoder%2Fweb-streams-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leeocoder","download_url":"https://codeload.github.com/leeocoder/web-streams-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241582553,"owners_count":19985845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","nodejs","streams-api"],"created_at":"2024-11-13T21:30:08.772Z","updated_at":"2026-04-12T23:02:45.923Z","avatar_url":"https://github.com/leeocoder.png","language":"JavaScript","readme":"# Projeto de Consumo de Dados em Streaming\r\n\r\nEste projeto é uma aplicação que consome dados de uma API em tempo real e os apresenta em um formato HTML. Tanto o frontend (JavaScript) quanto o backend (Node.js) fazem uso intensivo de Streams para manipular dados de maneira eficiente.\r\n\r\n# Backend\r\n\r\nO backend é o componente principal responsável por processar e enviar os dados para o frontend em tempo real. A sua eficiência é potencializada pelo uso de Streams. Vamos explorar as principais funcionalidades:\r\n\r\n## Streams no Backend\r\n\r\n### Leitura de Arquivo como Stream\r\n\r\nO backend utiliza createReadStream para ler o arquivo CSV como um stream. Essa abordagem permite o processamento eficiente de arquivos grandes, já que os dados são lidos em pedaços, evitando a sobrecarga de memória.\r\nTransformação em Tempo Real:\r\n\r\nAssim que os dados são lidos, são transformados em formato JSON em tempo real usando a biblioteca csvtojson. Dessa forma, os dados são disponibilizados para o próximo estágio do pipeline conforme são processados.\r\nFormato NDJSON (Newline Delimited JSON):\r\n\r\nOs dados são então transformados em formato NDJSON, onde cada objeto JSON é seguido por uma quebra de linha. Isso facilita a leitura e processamento dos dados no frontend, já que chegam incrementalmente.\r\nEnvio em Tempo Real:\r\n\r\nO stream de dados transformados é enviado como resposta em tempo real. Isso é especialmente útil quando se lida com grandes conjuntos de dados, pois não é necessário esperar até que todos os dados sejam processados antes de enviá-los.\r\n\r\n## Vantagens das Streams no Backend\r\n\r\n### Eficiência de Memória\r\n\r\nA leitura e processamento por meio de Streams evita a necessidade de carregar todo o conteúdo do arquivo na memória de uma vez, o que é essencial para lidar com arquivos grandes.\r\n\r\n### Processamento Assíncrono\r\n\r\nO backend pode começar a enviar dados para o frontend enquanto ainda está lendo e processando o restante do arquivo. Isso resulta em uma resposta mais rápida.\r\n\r\n### Resposta em Tempo Real\r\n\r\nO frontend recebe os dados à medida que são processados, proporcionando uma experiência de usuário mais dinâmica e responsiva.\r\nEscalabilidade:\r\n\r\nCom a abordagem de streaming, o backend pode lidar com arquivos de qualquer tamanho, desde que haja recursos suficientes disponíveis.\r\nBaixa Latência:\r\n\r\nA resposta em tempo real significa que o frontend não precisa esperar até que todo o arquivo seja processado antes de começar a exibir os dados.\r\n\r\n# Frontend\r\n\r\nO frontend é a interface da aplicação, onde os dados são consumidos e apresentados ao usuário. Ele também utiliza Streams para tornar a operação de consumo da API eficiente.\r\n\r\n## Streams no Frontend\r\n\r\n### Consumo Eficiente da API\r\n\r\nA função consumeAPI(signal) faz a requisição à API e retorna um leitor de dados. Este leitor é uma parte essencial da manipulação eficiente de dados em tempo real no frontend.\r\n\r\n### Processamento de Dados com Streams\r\n\r\nA função parseNDJSON() trabalha com streams para processar os dados da API no formato NDJSON (Newline Delimited JSON). Isso significa que os dados são processados à medida que chegam, evitando a necessidade de carregar todos os dados de uma vez.\r\n\r\n### Renderização de HTML com Streams\r\n\r\nA função appendToHTML(element) cria um fluxo de saída que permite a renderização eficiente de elementos HTML na página. Isso é feito usando um WritableStream, que escreve os dados no DOM à medida que são processados.\r\nControle de Abortamento:\r\n\r\nA aplicação possui uma funcionalidade de abortamento que pode ser acionada a qualquer momento pelo usuário. Ao clicar no botão \"Stop\", o controlador de aborto é ativado, interrompendo a operação de consumo de dados.\r\nFuncionalidades Adicionais no Frontend\r\nA cada novo item processado, um contador é incrementado e o conteúdo é exibido em um formato de card HTML com título, descrição e um link. Isso proporciona uma experiência interativa para o usuário.\r\n\r\nA operação pode ser abortada a qualquer momento clicando no botão \"Stop\". Isso utiliza o controlador de aborto para interromper a operação atual, o que pode ser útil em situações em que o usuário deseja interromper o processo de consumo de dados.\r\n\r\nO frontend não só consome dados da API, mas também os processa e os apresenta de forma eficiente e interativa usando Streams. Essa abordagem permite que a aplicação funcione de maneira responsiva, mesmo quando lidando com grandes volumes de dados em tempo real.\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleeocoder%2Fweb-streams-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleeocoder%2Fweb-streams-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleeocoder%2Fweb-streams-js/lists"}