Streams API: Readable y Writable Streams

Introducción a Streams API

La Streams API es una interfaz moderna de JavaScript que te permite procesar datos por fragmentos (chunks) en lugar de cargar todo el contenido en memoria de una vez. Esto es especialmente útil para archivos grandes, videos, o cualquier dato que no necesitas tener completo antes de empezar a procesarlo.

Antes de Streams, cuando hacías una petición fetch, tenías que esperar a que toda la respuesta se descargara antes de poder procesarla. Con Streams, puedes empezar a procesar los datos mientras se descargan, lo que mejora el rendimiento y la experiencia del usuario, especialmente en dispositivos con memoria limitada.

• <strong>ReadableStream</strong>: Fuente de datos que puedes leer secuencialmente
• <strong>WritableStream</strong>: Destino donde puedes escribir datos secuencialmente
• <strong>TransformStream</strong>: Modifica datos mientras fluyen de lectura a escritura
• <strong>Chunk</strong>: Fragmento de datos que se procesa en cada iteración del stream

Readable Streams

Un ReadableStream es una fuente de datos que puedes leer secuencialmente. El stream tiene un método getReader() que devuelve un reader con el que puedes leer los datos chunk por chunk. Cada chunk es un Uint8Array que contiene una porción de los datos.

En este ejemplo, creamos un ReadableStream manualmente usando el constructor. El stream tiene un método start que recibe un controller. Usamoscontroller.enqueue() para enviar chunks al stream ycontroller.close() para indicar que no hay más datos. El reader usa read() para obtener cada chunk hasta que done es true.

Response.body como ReadableStream

Una de las aplicaciones más útiles de Streams es con fetch. La propiedadresponse.body es un ReadableStream que te permite procesar la respuesta mientras se descarga. Esto es ideal para descargar archivos grandes, mostrar progreso de descarga, o procesar datos progresivamente.

Este ejemplo muestra cómo procesar una respuesta fetch mientras se descarga. Usamos response.body.getReader() para obtener un reader del stream de la respuesta. Luego leemos chunks iterativamente hasta que donees true, lo que indica que la descarga se completó. Esto es mucho más eficiente que esperar a que toda la respuesta se descargue.

Writable Streams

Un WritableStream es un destino donde puedes escribir datos secuencialmente. El stream tiene un método getWriter() que devuelve un writer con el que puedes enviar chunks al stream. Cada chunk se procesa de forma asíncrona y puedes esperar a que se complete con await writer.write().

Este ejemplo crea un WritableStream que recibe chunks y los procesa. El métodowrite del sink recibe cada chunk y puede procesarlo de forma asíncrona. El método close se llama cuando no hay más datos para escribir. El writer usa write() para enviar chunks y close()para finalizar el stream.

Transform Streams

Un TransformStream es un stream que modifica datos mientras fluyen de un ReadableStream a un WritableStream. Es ideal para procesar datos en tiempo real, como comprimir, descomprimir, o transformar el formato de los datos mientras se transfieren.

Este ejemplo crea un TransformStream que convierte todos los caracteres a mayúsculas. El método transform recibe cada chunk y puede modificarlo antes de enviarlo al writable stream. El método flush se llama cuando no hay más chunks para procesar. Los TransformStreams son especialmente útiles para procesar datos de forma incremental. JavaScript incluye streams integrados comoCompressionStream y DecompressionStream que puedes usar directamente para comprimir y descomprimir datos sin crear tu propio transform.

• <strong>Compresión</strong>: Usar CompressionStream para comprimir datos gzip
• <strong>Descompresión</strong>: Usar DecompressionStream para descomprimir datos
• <strong>Transformación</strong>: Modificar formato o contenido de datos
• <strong>Filtrado</strong>: Eliminar chunks que no cumplen ciertos criterios
• <strong>Agregación</strong>: Combinar múltiples chunks en uno

Casos de Uso Reales

Streams API tiene múltiples aplicaciones en el mundo real que mejoran el rendimiento y la experiencia del usuario. Aquí exploramos algunos de los casos más comunes donde procesar datos incrementalmente es esencial.

Este ejemplo muestra tres casos de uso reales: descarga de archivos grandes con progreso, procesamiento de JSON incremental, y compresión de datos con CompressionStream. En todos estos casos, procesar datos incrementalmente mejora el rendimiento y la experiencia del usuario, especialmente en dispositivos con memoria limitada.