HTML5 APIs for Data Handling

1. HTML5 APIsforData Handling Martin Kruliš by Martin Kruliš (v1.0)

2. Binary Data • ArrayBuffer • Represents generic binary data of fixed length varbuf = newArrayBuffer(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.0)

3. Binary Data • DataView • 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.0)

4. 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 FileListinterface (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.0)

5. 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.0)

6. File API • Drag and Drop • Files can be dragged into the browser mydiv.ondrop = function(e) { e.stopPropagation();e.preventDefault(); varfiles = 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 by Martin Kruliš (v1.0)

7. 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.0)

8. 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 by Martin Kruliš (v1.0)

9. Web Storage • API • window.localStorageand window.sessionStorage • getItem(key), setItem(key, val) • length, key(idx) • removeItem(key), clear() • Window storage event • Fired in other windows when one window changes the local storage • Event object contains information about the change • key, oldValue, newValue • url, storageArea Example 2 by Martin Kruliš (v1.0)

10. 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 by Martin Kruliš (v1.0)

11. 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.0)

12. Indexed DB • Application Interface • Mostly asynchronous (like AJAX requests) • Most operation 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.0)

13. Indexed DB • Opening Database vardb = null; varrequest = 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.0)

14. Indexed DB • Data Manipulation vartx = db.transaction([stores], "readwrite"); varstore = tx.objectStore(storeName); tx.oncomplete= function(e) { ... } store.put(data); varrange = IDBKeyRange.lowerBound(0); store.openCursor(range).onsuccess= function(e) { varcursor = 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.0)

15. 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 Example 4 by Martin Kruliš (v1.0)

16. 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) by Martin Kruliš (v1.0)

17. Discussion by Martin Kruliš (v1.0)