1 / 17

HTML5 APIs for Data Handling

HTML5 APIs for Data Handling. Martin Kruli š. Binary Data. ArrayBuffer 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

fteneyck
Download Presentation

HTML5 APIs for Data Handling

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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)

More Related