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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18. Discussion
by Martin Kruliš (v1.1)