Your browser, my storage

Slide 1

Slide 1 text

Your browser, my storage a new approach on data storing (v.1.3) Francesco Fullone ff AT ideato.it

Slide 2

Slide 2 text

Who am I Francesco Fullone aka Fullo - PHP developer since 1999 - President - and Evangelist - CEO @ - founder @ - Nerd and geek

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

What we want is a lot of storage space, on the client, that persists beyond a page refresh and isn’t transmitted to the server. ~ M. Pilgrim

Slide 5

Slide 5 text

Persistent local storage is one of the areas where client applications traditionally win against web applications.

Slide 6

Slide 6 text

A jump in the past

Slide 7

Slide 7 text

Cookies were introduced in HTTP/1.0, limited to only 20 per domain and 4KB each. http://qrurl.it/r/3l

Slide 8

Slide 8 text

Cookies are sent to and from client at any connection. http://qrurl.it/r/3m

Slide 9

Slide 9 text

Microsoft with Internet Explorer 6 introduced dHTML and the userData API to store up to 64KB of data

Slide 10

Slide 10 text

Mozilla introduced with Firefox 2 the DOM Storage API, it will then know as Web Storage.

Slide 11

Slide 11 text

In 2002 Adobe created the Flash Cookies aka “Local Shared Objects” for Flash 6 Data storage increased to 100KB but it was difficult to be used

Slide 12

Slide 12 text

With Flash 8, in 2006, Adobe introduced the ExternalInterface to allow Js to access to the stored resources.

Slide 13

Slide 13 text

Between 2005 and 2007 dojox.storage was written by Brad Neuberg as a Js->Flash bridge to manage bigger chunks of data (with user prompt over 1MB).

Slide 14

Slide 14 text

Google created Gears in 2007, that introduced a database paradigm (based on SQLite) to solve the storage problem.

Slide 15

Slide 15 text

BUT

Slide 16

Slide 16 text

All these storage systems had different APIs, a common platform is needed by all the browser vendors.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

The two approaches of storing: Application Cache Offline storage

Slide 19

Slide 19 text

Application Caching involves saving the application's core logic and user-interface. http://qrurl.it/r/3g

Slide 20

Slide 20 text

It is enabled by a file .appcache that declares which resources have to be saved locally. (theoretically limited to 5MB).

Slide 21

Slide 21 text

CACHE MANIFEST # Explicitly cached entries CACHE: index.html stylesheet.css images/logo.png http://www.anothersite.com/scripts/main.js # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com # static.html will be served if main.php is inaccessible # offline.jpg will be served in place of all images in images/large/ FALLBACK: /main.php /static.html images/large/ images/offline.jpg .avi images/offline.jpg

Slide 22

Slide 22 text

applicationCache can use events to trigger application behavior window.applicationCache.onchecking = function(e) { log("Checking for application update"); }

Slide 23

Slide 23 text

applicationCache can use events to trigger application behavior/2 – SetInterval( function () { window.applicationCache.update(); }, 3600000 ); – window.applicationCache.addEventListener( 'updateready', function(){ window.applicationCache.swapCache(); }, false );

Slide 24

Slide 24 text

applicationCache or check if the browser is online If (window.navigator.onLine) { log("Application is online"); }

Slide 25

Slide 25 text

Chrome/Chromium doesn't support window.navigator.onLine attribute and... It doesn't have a real offline mode!

Slide 26

Slide 26 text

As stated in the specs: “window.navigator.onLine is inherently unreliable. A computer can be connected to a network without having Internet access.”

Slide 27

Slide 27 text

If you change a resource and you don't update (!=rev) the .appcache file the browser may not download the new file! (yes! cached resources have priority on the online ones)

Slide 28

Slide 28 text

Approaches to Data Storage

Slide 29

Slide 29 text

Data storage is about capturing specific data, or resources the user has expressed interest in. http://qrurl.it/r/3n

Slide 30

Slide 30 text

Web Storage is the simpler implementation of the Data Storage paradigm. http://qrurl.it/r/3h

Slide 31

Slide 31 text

Web Storage is based on a structure of key-value pairs like any JavaScript object. localStorage.setItem("bar", foo);

Slide 32

Slide 32 text

Web Storage can save up to 5MB but only as strings. So we have to force a casting if needed. var bar = parseInt(localStorage["bar"]);

Slide 33

Slide 33 text

Web Storage should be local based or session based. var bar = localStorage["bar"]; var foo = sessionStorage["foo"];

Slide 34

Slide 34 text

sessionStorage mantains a storage area that's available for the duration of the web session. Opening a new window/tab will create a new session.

Slide 35

Slide 35 text

localStorage relies only on client, so we have to track changes and use storage.events to sync server and client if needed.

Slide 36

Slide 36 text

localStorage lock the browser, do not save 5Mb every 5 seconds ;).

Slide 37

Slide 37 text

Web SQL Database is WAS just an offline SQL implementation, based on SQLite. http://qrurl.it/r/3i

Slide 38

Slide 38 text

this.db = openDatabase('geomood', '1.0', 'Geo', 8192); this.db.transaction(function(tx) { tx.executeSql("create table if not exists checkins(id integer primary key asc, time integer, latitude float, longitude float, mood string)", [], function() { console.log("siucc"); } » ); });

Slide 39

Slide 39 text

Web SQL Database is not supported by Microsoft and Mozilla, it is on browsers based on webkit.

Slide 40

Slide 40 text

But ... Web SQL Database is dead! as being dropped by W3C from 18/11/10 why bother more?

Slide 41

Slide 41 text

Web SQL Database is the only database storage engine that works on mobile devices!

Slide 42

Slide 42 text

IndexedDB is a nice compromise between Web Storage and Web SQL Database. http://qrurl.it/r/3j

Slide 43

Slide 43 text

IndexedDB allows to create an index on a certain field stored in a standard key->value mapping.

Slide 44

Slide 44 text

IndexedDB is promoted by all browsers vendor, but is not yet fully supported by all Firefox 4, Chrome 11, have full implementation. Safari 5.1 and IE 10 will have

Slide 45

Slide 45 text

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction; Using IndexedDB/1

Slide 46

Slide 46 text

var dbVersion = 1; var request = indexedDB.open("MyDb", dbVersion); request.onsuccess = function (event) { console.log("creating/accessing IndexedDB db"); db = request.result; } Using IndexedDB/2

Slide 47

Slide 47 text

var transaction = db.transaction(["todo"], IDBTransaction.READ_WRITE); var store = transaction.objectStore("todo"); var data = { "text": “text to be saved”, "timeStamp": new Date().getTime() }; var put = store.put(data); Using IndexedDB/3

Slide 48

Slide 48 text

// Get everything in the store; var keyRange = IDBKeyRange.lowerBound(0); var cursorRequest=store.openCursor(keyRange); cursorRequest.onsuccess = function(e) { var results = e.target.result; if(!!results == false) return; /* DO SOMETHING */ results.continue(); }; Using IndexedDB/4

Slide 49

Slide 49 text

indexedDB runs in its own thread! No browser locking!

Slide 50

Slide 50 text

FileAPI allows to manipulate file objects, as well as programmatically select them and access their data. http://qrurl.it/r/3k

Slide 51

Slide 51 text

File API includes FileReader and FileWriter APIs. Actually is supported by Chrome, Firefox > 3.6, Safari > 5.1, Opera > 11.1.

Slide 52

Slide 52 text

filer.js http://qrurl.it/r/c3 webFS.js http://qrurl.it/r/c4

Slide 53

Slide 53 text

First steps on offline storage development. http://flic.kr/p/5PnRQr

Slide 54

Slide 54 text

Storages Status/1

Slide 55

Slide 55 text

Storages Status/2

Slide 56

Slide 56 text

Storages Status/3

Slide 57

Slide 57 text

Detect if the storing feature is supported by the browser (with modernizr), otherwise degradate to something else. (ie. dojox.storage)

Slide 58

Slide 58 text

Use libraries that manage data for you (ie. storagejs, lawnchair)

Slide 59

Slide 59 text

Protect against lost data, sync automatically. http://qrurl.it/r/3o

Slide 60

Slide 60 text

Automatically detect when users are online. http://qrurl.it/r/3p

Slide 61

Slide 61 text

Do not exceed in storing data, you can store binary data base64 encoded but remember the pitfalls in performance.

Slide 62

Slide 62 text

Avoid race conditions. If possible use WebSQL to use its transactions features.

Slide 63

Slide 63 text

use local storage to help your application to become faster.

Slide 64

Slide 64 text

basket.js http://qrurl.it/r/c2

Slide 65

Slide 65 text

basket .require('jquery.js') .require('underscore.js') .require('app.js').wait(function(){ • /* do something cool */ });

Slide 66

Slide 66 text

Slide 67

Slide 67 text

via Quinto Bucci 205 47023 Cesena (FC) info AT ideato.it www.ideato.it Francesco Fullone [email protected] @fullo