Gentle Intro to Node Streams

Youtube
Stackblitz

Reference

There are 4 types of streams in Node.js:

1. Writable: streams to which we can write data. For example, fs.createWriteStream() lets us write data to a file using streams.
2. Readable: streams from which data can be read. For example: fs.createReadStream() lets us read the contents of a file.
3. Duplex: streams that are both Readable and Writable. For example, net.Socket
4. Transform: streams that can modify or transform the data as it is written and read. For example, in the instance of file-compression, you can write compressed data and read decompressed data to and from a file.

import * as fs from 'fs';
// this works but let's use async iterator aka for loop
// to show the readable stream is an array whose elements
// are loaded as chunks of data
// const asyncIterableLogChunks = async (readable) => {
//   readable.on('data', (chunk) => {
//     console.log(chunk);
//   });
// };
const asyncIterableForLoopForReadableStream = async (readable) => {
  for await (const chunk of readable) {
    console.log(chunk);
  }
};

const readable = fs.createReadStream('./file.txt', { encoding: 'utf-8' });
// asyncIterableLogChunks(readable);
asyncIterableForLoopForReadableStream(readable);

• The stream is an array of data loaded into server memory 1 chunk at a time and operated on, then sent somewhere, before the next chunk comes. It’s kind of like a roller coaster. Only one group can get in and ride at a time. You might say the chunks are, in a sense, synchronous with respect to each other, notwithstanding the fact that the chunking process of streams per se is async, meaning, it can be paused and resumed in order to accommodate other node processes in the event loop.
• Let’s pause and contemplate before we dive further. What is the point of this? To incorporate server side data fetching streamed into react components as props using higher order component pattern. That is my interpretation of React RFC 229

boo 👻 nifty

@bronifty

@dan_abramov React RFC 229 (use hook) TLDR; it is an extension of RFC 188 (RSC), which runs on the server (with access to Node TCP/db connection & file system) & passes props to client components. Suspense manages overlapping io state lifecycle allowed by async RSC in 229. Use is conditional

02:14 AM - 18 Oct 2022

boo 👻 nifty

@bronifty

@dan_abramov RSC dynamically/conditionally imports the client component based on Web API (I believe it is ESM) therefore RSC can “choose” which client it serves. Use adopts similar behavior on the client for data management

02:18 AM - 18 Oct 2022

boo 👻 nifty

@bronifty

SSR: Server sends DOM to browser to which handlers are attached to “hydrate” app (make interactive via React ecosystem)

CSR: There is no DOM (but root element); client fetches data and writes DOM dynamically. (Not hydration)

RSC: HOCs with access to Node (TCP/fs) streaming

05:39 AM - 19 Oct 2022