HTML 5 APIs for Data Handling and Processing

HTML 5 APIs for Data Handling and Processing Martin Kruliš by Martin Kruliš (v 1. 2) 26. 4. 2017 1

Binary Data � Array. Buffer ◦ Represents generic binary data of fixed length var buf = new Array. Buffer(64); ◦ slice() – create a copy of (sub)buffer � Array. Buffer. View ◦ Creates a specific view for an array buffer �Multiple views can be created over one array ◦ Many subclasses: Int 8 Array, Uint 32 Array, … ◦ Getter/setter handles the array elements in the correct format (convert them to/from JS number) by Martin Kruliš (v 1. 2) 26. 4. 2017 2

Binary Data � Data. View ◦ Another way how to view data in array buffer ◦ Low level operations: get. Int 8(), set. Float 32(), … �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š (v 1. 2) 26. 4. 2017 3

Binary Data � Base 64 Encoding ◦ 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>; base 64, <data> ◦ Using internal URLs to binary data (experimental) �URL. create. Object. URL(blob) �URL. revoke. Object. URL(url) by Martin Kruliš (v 1. 2) 26. 4. 2017 4

File API � File Interface ◦ Extension of the Blob interface �Attributes: name, size, type, last. Modified ◦ Can be constructed explicitly from binary data ◦ Real files can be accessed through input element <input id="file. Select" type="file". . . > �The input implements File. List interface (array of files) document. get. Element. By. Id("file. Select"). files[0]. . . �JS can access only those files the user have selected �Input element multiple attribute by Martin Kruliš (v 1. 2) 26. 4. 2017 5

File API � Reading Files ◦ File. Reader interface �read. As. . . (blob) – starts async. read �Read as Array. Buffer, Text, or Data. URL �ready. State (EMPTY, LOADING, DONE) �onload, onprogress, onerror, onloadend, … �result (either Array. Buffer or string), error �abort() Example 1 by Martin Kruliš (v 1. 2) 26. 4. 2017 6

File API � Drag and Drop ◦ Files can be dragged into the browser mydiv. ondrop = function(e) { e. stop. Propagation(); e. prevent. Default(); var files = e. data. Transfer. files; . . . } � Saving Files ◦ Tricky, some nonstandard APIs exist (e. g. , save. As()) ◦ Data URL can be used in window. open() or <a> �Not a very neat way, but it works by Martin Kruliš (v 1. 2) 26. 4. 2017 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š (v 1. 2) 26. 4. 2017 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 �~ 5 MB per site in most browsers �Can be configured by Martin Kruliš (v 1. 2) 26. 4. 2017 9

Web Storage � API ◦ window. local. Storage and window. session. Storage �get. Item(key), set. Item(key, val) �length, key(idx) �remove. Item(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, old. Value, new. Value �url, storage. Area Example 2 by Martin Kruliš (v 1. 2) 26. 4. 2017 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š (v 1. 2) 26. 4. 2017 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š (v 1. 2) 26. 4. 2017 12

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š (v 1. 2) 26. 4. 2017 13

Indexed DB � Opening Database Create/upgrade the structure var db = null; var request = indexed. DB. open("db_name"); request. onupgradeneeded = function() { db = request. result; db. create. Object. Store("store_name", {. . . }); }; request. onsuccess = function() { db = this. result; Open existing DB show. Data(); }; request. onerror = function() {. . . }; by Martin Kruliš (v 1. 2) 26. 4. 2017 14

Indexed DB � Data Manipulation var tx = db. transaction([stores], "readwrite"); var store = tx. object. Store(store. Name); tx. oncomplete = function(e) {. . . } store. put(data); When everything is done var range = IDBKey. Range. lower. Bound(0); store. open. Cursor(range). onsuccess = function(e) { var cursor = e. target. result; if (cursor) {. . . cursor. continue(); } A way to iterate over }; Example 3 selection of data by Martin Kruliš (v 1. 2) 26. 4. 2017 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. post. Message(msg) – send message to the peer �Worker. onmessage – receiving message event handler �Worker. terminate() – kill the worker thread Example 4 by Martin Kruliš (v 1. 2) 26. 4. 2017 16

Shared Workers � Shared Workers ◦ Workers that may be shared by multiple windows ◦ Ideal for stateless computations in background ◦ Connections to windows are represented by ports var sh. Worker = new Shared. Worker('worker. js'); sh. Worker. port. post. Message() sh. Worker. port. onmessage Main thread. . . onconnect = function(ev) { Inside worker var port = ev. ports[0]; port. onmessage = function() {. . . } } by Martin Kruliš (v 1. 2) 26. 4. 2017 17

Web. CL � Web. CL ◦ Java. Script binding for Open. CL API �Allows access to multicore CPUs and GPUs �Implemented in window. Web. CL interface ◦ Currently no browser natively implements Web. CL �Plugins exist for majority of browsers ◦ Important issues �Open. CL device/host synchronization is often performed by blocking operations �Callbacks should be used in Web. CL instead �Explicit object releasing is required due to dynamic nature of JS (managed memory and garbage collector) by Martin Kruliš (v 1. 2) 26. 4. 2017 18

Web Cryptography � Standard ◦ ◦ Cryptography Functions Encrypting/Decrypting data Signing data (asymmetric decryption) Hashing functions (integrity, security tokens, …) Arsenal of mainstream algorithms �RSA, AES, SHA, … ◦ API �Crypto – general interface (e. g. , random generator) �Crypto. subtle – Subtle. Crypto interface �encrypt(), decrypt(), verify(), digest(), … �Algorithm, Key. Algorithm by Martin Kruliš (v 1. 2) 26. 4. 2017 19

Discussion by Martin Kruliš (v 1. 2) 26. 4. 2017 20