HTML5 APIs for Data Handling and Processing Martin Kruliš by Martin Kruliš (v1.1) 2. 5. 2015

Binary Data ArrayBuffer ArrayBufferView Represents generic binary data of fixed length var buf = new ArrayBuffer(64); slice() – create a copy of (sub)buffer ArrayBufferView Creates a specific view for an array buffer Multiple views can be created over one array Many subclasses: Int8Array, Uint32Array, … Getter/setter handles the array elements in the correct format (convert them to/from JS number) by Martin Kruliš (v1.1) 2. 5. 2015

Binary Data DataView Blob Another way how to view data in array buffer Low level operations: getInt8(), setFloat32(), … Supports both little and big endian Blob Represents file-like object of immutable raw data Constructor gets list (array) of array buffers, array buffer views, blobs, or strings Also holds data properties MIME type by Martin Kruliš (v1.1) 2. 5. 2015

Binary Data Base64 Encoding Data and URLs 6-bit encoding of binary data which is text-safe window.atob(), window.btoa() Data and URLs E.g., display an image which is stored in JS data Data URLs data:<mime>;base64,<data> Using internal URLs to binary data (experimental) URL.createObjectURL(blob) URL.revokeObjectURL(url) by Martin Kruliš (v1.1) 2. 5. 2015

File API File Interface Extension of the Blob interface Attributes: name, size, type, lastModified Can be constructed explicitly from binary data Real files can be accessed through input element <input id="fileSelect" type="file" ...> The input implements FileList interface (array of files) document.getElementById("fileSelect").files[0]... JS can access only those files the user have selected Input element multiple attribute by Martin Kruliš (v1.1) 2. 5. 2015

File API Reading Files FileReader interface readAs...(blob) – starts async. read Read as ArrayBuffer, Text, or DataURL readyState (EMPTY, LOADING, DONE) onload, onprogress, onerror, onloadend, … result (either ArrayBuffer or string), error abort() Example 1 by Martin Kruliš (v1.1) 2. 5. 2015

File API Drag and Drop Saving Files Files can be dragged into the browser mydiv.ondrop = function(e) { e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; ... } Saving Files Tricky, some nonstandard APIs exist (e.g., saveAs()) Data URL can be used in window.open() or <a> Not a very neat way, but it works Note that when data URL is passed directly to window.open(), apropriate MIME has to be set so the data are directly downloaded (e.g. application/octet-stream). The file name cannot be set in window.open() – the only solution is to use <a> element with appropriate download argument set. by Martin Kruliš (v1.1) 2. 5. 2015

File System API File API: Directories and System API for storing files at client side Two types: temporal and persistent Intended for situations when other types of data storage (e.g., web storage) are inappropriate Multimedia files, persistent uploads, … Support for directory structure Both traversing and manipulation File reader and analogous file writer APIs Implemented in webkit only, specification rejected Firefox OS implements its own Device Storage API by Martin Kruliš (v1.1) 2. 5. 2015

Web Storage Web Storage Simple storage for keeping persistent data Similar to cookies (storing key-value strings), but intended for client-side scripting only Two storage objects with the same API Local storage – per web site, persistent Session storage – per window, deleted on close Strict quotas ~ 5MB per site in most browsers Can be configured Note that web storage have similar “persistency” as cookies for instance. I.e., the data are not automatically removed, but the user may choose so by purging the site data. by Martin Kruliš (v1.1) 2. 5. 2015

Web Storage API Window storage event window.localStorage and window.sessionStorage getItem(key), setItem(key, val) length, key(idx) removeItem(key), clear() Window storage event Fired in other windows when one window (of the same web site) changes the local storage Event object contains information about the change key, oldValue, newValue url, storageArea Example 2 by Martin Kruliš (v1.1) 2. 5. 2015

Web SQL Web SQL Database API Specialized SQL database for client-side scripts Asynchronous API with JS data bindings Transactional support SQL dialect, which is supported by SQLite 3.6.19 Web browsers should apply some form of quotas Prompt the user, when the quotas are to be exceeded Deprecated Not implemented by Firefox and MSIE Only SQLite implementation existed The standard become deprecated, because only SQLite implementations exist. At least two independent implementations were required, so the corresponding W3C group decided to abandon this API. by Martin Kruliš (v1.1) 2. 5. 2015

Indexed DB Web Database Indexed Storage Alternative to Web SQL (with different functionality) Object-oriented database (not relational) Simple queries and cursors are used instead of SQL Database stores key-value pairs Values may be complex objects Keys may be properties of value objects Indexes may be built on any object properties Transactional model All operations (objects, …) are tied to a transaction Guarantees concurrent-safe access to data by Martin Kruliš (v1.1) 2. 5. 2015

Indexed DB Application Interface Mostly asynchronous (like AJAX requests) Most operations require callback Callbacks are invoked when result becomes available Request objects representing pending operations Dom events onsuccess, onerror Database structure Database is a set of object stores identified by name and version Databases follow same-origin data isolation policy Object store – a key-value set sorted by keys Additional indexes may be applied on object store by Martin Kruliš (v1.1) 2. 5. 2015

Create/upgrade the structure Indexed DB Opening Database var db = null; var request = indexedDB.open("db_name"); request.onupgradeneeded = function() { db = request.result; db.createObjectStore("store_name", { ... }); }; request.onsuccess = function() { db = this.result; showData(); request.onerror = function() { ... }; Create/upgrade the structure Open existing DB by Martin Kruliš (v1.1) 2. 5. 2015

Indexed DB Data Manipulation var tx = db.transaction([stores], "readwrite"); var store = tx.objectStore(storeName); tx.oncomplete = function(e) { ... } store.put(data); var range = IDBKeyRange.lowerBound(0); store.openCursor(range).onsuccess = function(e) { var cursor = e.target.result; if (cursor) { ... cursor.continue(); } }; When everything is done A way to iterate over selection of data Example 3 by Martin Kruliš (v1.1) 2. 5. 2015

Web Workers Web Workers Worker represents a separate computing thread The code of the worker is sandboxed API for bidirectional communication with main thread Workers may spawn sub-workers Some APIs have synchronous counterparts for workers API Worker(url) – constructing function Worker.postMessage(msg) – send message to the peer Worker.onmessage – receiving message event handler Worker.terminate() – kill the worker thread For instance, File reader API or Indexed DB API have synchronous versions exposed to the workers. This actually makes sense, because asynchronous programming (when callback is registered to handle operation completion) is much more tedious than traditional (synchronous) programming. Furthermore, the worker does not block the UI, so the synchronous operations will not create any noticeable lag. Example 4 by Martin Kruliš (v1.1) 2. 5. 2015

WebCL WebCL JavaScript binding for OpenCL API Allows access to multicore CPUs and GPUs Implemented in window.WebCL interface Currently no browser natively implements WebCL Plugins exist for majority of browsers Important issues OpenCL device/host synchronization is often performed by blocking operations Callbacks should be used in WebCL instead Explicit object releasing is required due to dynamic nature of JS (managed memory and garbage collector) WebCL would be a better alternative for HPC than Web Workers. Each kernel is compiled into a binary code, which executes natively on selected hardware. Furthermore, the intermediate results and data can be kept in native (binary) format instead of JS data types. by Martin Kruliš (v1.1) 2. 5. 2015

Discussion by Martin Kruliš (v1.1) 2. 5. 2015