Js: Streams And Buffers

File Reader, typed arrays, blobs, ArrayBuffer. Links: history of typed arrays

11 flashcards · Programming Languages · by lakesare

1. What's a Blob?

   Binary Large OBject (BLOB) stores bytes that hold data of a file. Has 2 properties: size - in bytes, of data contained within Blob type - MIME type Blob data is stored in the memory or file system depending on the browser and blob size. Most APIs for working with blobs are asynchronous. But synchronous versions of APIs are also available so that they can be used in Web Workers. Content of a blob can be read as ArrayBuffer and therefore it makes blobs very handy to store binary data.

2. What's a File?

   Inherits from Blob: size - in bytes, of data contained within Blob type - MIME type And has own properties: name lastModified File can be used anywhere Blob can be used.

3. How to create a Blob?

   // regular array of any javascript objects. // BlobPropertyBag object containing MIME property const myBlob = new Blob(["This is my blob content"], { type : "text/plain" })

4. How to access bytes in File/Blob?

   The only way to read content from a Blob is to use a FileReader. var reader = new FileReader(); reader.addEventListener("loadend", () => { reader.result // contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob);

5. What does FileReader do?

   Asynchronously reads contents of File/Blob (or raw data buffers) stored on the user's computer.

6. Why/when were typed arrays created in Js?

   Because of performance problems we noticed implementing WebGL (translating Js array into C array back and forth). Typed Arrays got their start in the early implementation stage of WebGL, when we found that passing JavaScript arrays to the GPU was causing performance problems. With JavaScript arrays, WebGL had to allocate a native array and fill it by walking over the JavaScript array and cast every JavaScript object in the array to the required native type.

7. Why do typed arrays operate in CPU’s native endianness, despite it causing problems for network operations?

   Design of typed arrays is driven by the need to efficiently pass binary data to native libraries. For this reason, the typed arrays operate upon aligned data in the host CPU’s native endianness.

8. Blob vs ArrayBuffer?

   Both hold binary data, both cannot be directly manipulated. However, if we create a VIEW for the ArrayBuffer, we can manipulate its bytes easily: var int32View = new Int32Array(buffer); ___ You can turn Blob into ArrayBuffer by using a FileReader: var reader = new FileReader(); reader.addEventListener("loadend", () => { reader.result // contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob);

9. Typed arrays split their implementation into 2 parts. Name them.

   ArrayBuffer - blob-like object of binary data you cannot manipulate Typed array view (Int8Array, Uint8Array, etc.) - instead, you create e.g. Int8Array which represents the buffer in a specific format, and use that to read/write the contents of the buffer. The FileReader can read file contents as an ArrayBuffer. You can then attach typed array views to the arrayBuffer to manipulate its contents.

10. How can we rewrite this? const fs = require('fs'); const myReadStream = fs.createReadStream(__dirname + '/readMe.txt', 'utf8'); const myWriteStream = fs.createWriteStream(__dirname + '/writeMe.txt'); myReadStream.on('data', (chunk) => { myWriteStream.write(chunk); });

    Use .pipe()! const fs = require('fs'); const myReadStream = fs.createReadStream(__dirname + '/readMe.txt', 'utf8'); const myWriteStream = fs.createWriteStream(__dirname + '/writeMe.txt'); myReadStream.pipe(myWriteStream);

11. Name 4 types of streams in Js.

    Readable - e.g. http request Writable - e.g. http response Duplex - e.g. tcp/ip connection, can read and write Transform - not a data source, or a data destination. Rather it changes something in the data. E.g. takes source of Js program and strips comments.