HTML 5 APIs for Data Handling Martin Kruli

  • Slides: 17
Download presentation
HTML 5 APIs for Data Handling Martin Kruliš by Martin Kruliš (v 1. 0)

HTML 5 APIs for Data Handling Martin Kruliš by Martin Kruliš (v 1. 0) 12. 3. 2021 1

Binary Data � Array. Buffer ◦ Represents generic binary data of fixed length var

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. 0) 12. 3. 2021 2

Binary Data � Data. View ◦ Another way how to view data in array

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. 0) 12. 3. 2021 3

File API � File Interface ◦ Extension of the Blob interface �Attributes: name, size,

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. 0) 12. 3. 2021 4

File API � Reading Files ◦ File. Reader interface �read. As. . . (blob)

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

File API � Drag and Drop ◦ Files can be dragged into the browser

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. 0) 12. 3. 2021 6

File System API � File API: Directories and System ◦ API for storing files

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. 0) 12. 3. 2021 7

Web Storage � Web Storage ◦ Simple storage for keeping persistent data ◦ Similar

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. 0) 12. 3. 2021 8

Web Storage � API ◦ window. local. Storage and window. session. Storage �get. Item(key),

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 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. 0) 12. 3. 2021 9

Web SQL � Web SQL Database API ◦ Specialized SQL database for client-side scripts

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. 0) 12. 3. 2021 10

Indexed DB � Web Database Indexed Storage ◦ Alternative to Web SQL (with different

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

Indexed DB � Application Interface ◦ Mostly asynchronous (like AJAX requests) �Most operation require

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š (v 1. 0) 12. 3. 2021 12

Indexed DB � Opening Database Create/upgrade the structure var db = null; var request

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. 0) 12. 3. 2021 13

Indexed DB � Data Manipulation var tx = db. transaction([stores], "readwrite"); var store =

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. 0) 12. 3. 2021 14

Web Workers � Web Workers ◦ Worker represents a separate computing thread �The code

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. 0) 12. 3. 2021 15

Web. CL � Web. CL ◦ Java. Script binding for Open. CL API �Allows

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. 0) 12. 3. 2021 16

Discussion by Martin Kruliš (v 1. 0) 12. 3. 2021 17

Discussion by Martin Kruliš (v 1. 0) 12. 3. 2021 17