F**get the Web            http://flic.kr/p/8JS7km
http://flic.kr/p/8Tsj3N
http://flic.kr/p/a25FHi
http://ftw.nodester.com
Change this to your            Twitter username              This is live nowhttp://ftw.nodester.com
http://ftw.nodester.com
http://flic.kr/p/5rTP9f
•Web Storage• IndexedDB (where available)• Web SQL Databases• History API• Offline manifest                         http:/...
http://flic.kr/p/4HYNgX
๏ Web Storage simple, and  well supported IE8+๏ Web SQL has good mobile  support, but no Firefox๏ IndexedDB gives us  cove...
Web Storage
Cookiessuck.
Not the edible kind, duh!Cookiessuck.
1. Code for cookies difficult2. Date format is fugly3. Limitations in size and number4. Deleting doesnt really delete5. Se...
http://flic.kr/p/5irsCGFuck cookies.
Sexy Storage FTW              http://flic.kr/p/3pBDzf
•   localStorage no expiry    required & persists•   sessionStorage doesnt leak• Applied to document origin, i.e.    schem...
setItem(key, value)removeItem(key)lengthkey(index)clear()
var store = localStorage;store.name = remy;
var store = localStorage;store.name = remy;delete store.name;
Values are coerced    in to strings
Values are coerced    in to strings       Work around: JSON  (and http://www.json.org/json2.js)
Events Too
Gotcha The API isnt protected, you can, if  you want to mess things up, do:localStorage.key = foo; Now the key method is a...
Web SQL Databases               http://flic.kr/p/drmCJ
๏ SQLite based๏ No longer actively maintained๏ Good Safari support - i.e. iOS๏ Fully featured debuggers available
db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) {  tx.executeSql(CREATE TABLE IF NOT EXISTS  +  ...
db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) {  tx.executeSql(CREATE TABLE IF NOT EXISTS  +  ...
db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) {  tx.executeSql(CREATE TABLE IF NOT EXISTS  +  ...
db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) {  tx.executeSql(CREATE TABLE IF NOT EXISTS  +  ...
db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) {  tx.executeSql(CREATE TABLE IF NOT EXISTS  +  ...
db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) {  tx.executeSql(CREATE TABLE IF NOT EXISTS  +  ...
๏ Atomic transactions๏ Queues every request๏ Good Safari support - i.e. iOS๏ Fully featured debuggers available
IndexedDB            http://flic.kr/p/5KXFwB
• Still very new• Support will be further reaching  than Web SQL (but unsure about  Safari)• Very, very difficult to debug...
var request = indexedDB.open(notes);request.onerror = fail;request.onsuccess = function (e) {     db = e.target.result;}; ...
var setVRequest = db.setVersion(v);setVRequest.onsuccess = function () {     var store = db.createObjectStore(            ...
var RW = IDBTransaction.READ_WRITE;var transaction = db.transaction([notes], RW, 0),    store = transaction.objectStore(no...
var RW = IDBTransaction.READ_WRITE;var transaction = db.transaction([notes], RW, 0),       store = transaction.objectStore...
Lawnchairhttp://westcoastlogic.com/lawnchair/
History API       http://flic.kr/p/a42tLM
function router(path) {  if (path.indexOf(/conf) === 0) {    showConferenceDetails(path.substr(5));  } else if (path === /...
function router(path) {  if (path.indexOf(/conf) === 0) {    showConferenceDetails(path.substr(5));  } else if (path === /...
router(location.pathname);
History APIhistory.pushState(state,title,url);window.onpopstate = fn;
link.onclick = function (event) {   event.preventDefault();   showConferenceDetails(this.path);   history.pushState(, , th...
link.onclick = function (event) {   event.preventDefault();   showConferenceDetails(this.path);   history.pushState(, , th...
link.onclick = function (event) {   event.preventDefault();   showConferenceDetails(this.path);   history.pushState(, , th...
link.onclick = function (event) {   event.preventDefault();   showConferenceDetails(this.path);   history.pushState(, , th...
link.onclick = function (event) {   event.preventDefault();   showConferenceDetails(this.path);   history.pushState(, , th...
link.onclick = function (event) {   event.preventDefault();   showConferenceDetails(this.path);   history.pushState(, , th...
window.onpopstate = function () {   router(location.pathname);};
URLs FTW!      http://flic.kr/p/a42tLM
What about when they request a URL that doesnt exist???
http://flic.kr/p/8zrMy8Offline
<html manifest="myapp.appcache">
<html manifest="myapp.appcache">Serve with text/manifest
<html manifest="myapp.appcache">Serve with text/manifestSet header cache-control: no-cache
<html manifest="myapp.appcache">Serve with text/manifestSet header cache-control: no-cachestarts with CACHE   MANIFEST
CACHE MANIFEST/range.jsdatastore.js
chrome://appcache-internals
CACHE MANIFEST/index.htmlrange.jsdatastore.jsFALLBACK:# force everything through# the index url/ /# this wont match# anyth...
CACHE MANIFEST                    /                    index.htmlServed from cache   range.js                    datastore...
CACHE MANIFEST                          /                          index.html                          range.jsRequests fo...
CACHE MANIFEST                       /                       index.html                       range.js                    ...
CACHE MANIFEST                       /                       index.html                       range.js                    ...
CACHE MANIFEST                       /                       index.html                       range.js                    ...
/future     /And let the router code   handle the path
CACHE MANIFEST                          /                          index.html                          range.jsRequests fo...
http://flic.kr/p/5rTP9f
• Web Storage for simple data• Larger data in IndexedDB & Web SQL• History for back button and url• Offline to support our...
http://ftw.nodester.com
Thank you.             http://flic.kr/p/8JS7km
Forget the Web
Forget the Web
Forget the Web
Forget the Web
Forget the Web
Upcoming SlideShare
Loading in...5
×

Forget the Web

2,093

Published on

Using the la

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,093
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Forget the Web

  1. 1. F**get the Web http://flic.kr/p/8JS7km
  2. 2. http://flic.kr/p/8Tsj3N
  3. 3. http://flic.kr/p/a25FHi
  4. 4. http://ftw.nodester.com
  5. 5. Change this to your Twitter username This is live nowhttp://ftw.nodester.com
  6. 6. http://ftw.nodester.com
  7. 7. http://flic.kr/p/5rTP9f
  8. 8. •Web Storage• IndexedDB (where available)• Web SQL Databases• History API• Offline manifest http://flic.kr/p/5rTP9f
  9. 9. http://flic.kr/p/4HYNgX
  10. 10. ๏ Web Storage simple, and well supported IE8+๏ Web SQL has good mobile support, but no Firefox๏ IndexedDB gives us coverage http://flic.kr/p/4HYNgX
  11. 11. Web Storage
  12. 12. Cookiessuck.
  13. 13. Not the edible kind, duh!Cookiessuck.
  14. 14. 1. Code for cookies difficult2. Date format is fugly3. Limitations in size and number4. Deleting doesnt really delete5. Sessions leak...but not always!
  15. 15. http://flic.kr/p/5irsCGFuck cookies.
  16. 16. Sexy Storage FTW http://flic.kr/p/3pBDzf
  17. 17. • localStorage no expiry required & persists• sessionStorage doesnt leak• Applied to document origin, i.e. scheme/host/port tuple• Insanely simple API
  18. 18. setItem(key, value)removeItem(key)lengthkey(index)clear()
  19. 19. var store = localStorage;store.name = remy;
  20. 20. var store = localStorage;store.name = remy;delete store.name;
  21. 21. Values are coerced in to strings
  22. 22. Values are coerced in to strings Work around: JSON (and http://www.json.org/json2.js)
  23. 23. Events Too
  24. 24. Gotcha The API isnt protected, you can, if you want to mess things up, do:localStorage.key = foo; Now the key method is a string :(
  25. 25. Web SQL Databases http://flic.kr/p/drmCJ
  26. 26. ๏ SQLite based๏ No longer actively maintained๏ Good Safari support - i.e. iOS๏ Fully featured debuggers available
  27. 27. db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS + notes(id TEXT PRIMARY KEY ASC, title TEXT, + rating INTEGER, date DATE, notes TEXT, + updated DATE, url TEXT UNIQUE), [], // fields success, error);});
  28. 28. db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS + notes(id TEXT PRIMARY KEY ASC, title TEXT, + rating INTEGER, date DATE, notes TEXT, + updated DATE, url TEXT UNIQUE), [], // fields success, error);});
  29. 29. db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS + notes(id TEXT PRIMARY KEY ASC, title TEXT, + rating INTEGER, date DATE, notes TEXT, + updated DATE, url TEXT UNIQUE), [], // fields success, error);});
  30. 30. db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS + notes(id TEXT PRIMARY KEY ASC, title TEXT, + rating INTEGER, date DATE, notes TEXT, + updated DATE, url TEXT UNIQUE), [], // fields success, error);});
  31. 31. db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS + notes(id TEXT PRIMARY KEY ASC, title TEXT, + rating INTEGER, date DATE, notes TEXT, + updated DATE, url TEXT UNIQUE), [], // fields success, error); Field values map to}); ? values in the SQL
  32. 32. db = openDatabase(Notes, 1.0, notes, 5242880);db.transaction(function(tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS + notes(id TEXT PRIMARY KEY ASC, title TEXT, + rating INTEGER, date DATE, notes TEXT, + updated DATE, url TEXT UNIQUE), [], // fields success, error);});
  33. 33. ๏ Atomic transactions๏ Queues every request๏ Good Safari support - i.e. iOS๏ Fully featured debuggers available
  34. 34. IndexedDB http://flic.kr/p/5KXFwB
  35. 35. • Still very new• Support will be further reaching than Web SQL (but unsure about Safari)• Very, very difficult to debug atm.
  36. 36. var request = indexedDB.open(notes);request.onerror = fail;request.onsuccess = function (e) { db = e.target.result;}; Very, very object event based.
  37. 37. var setVRequest = db.setVersion(v);setVRequest.onsuccess = function () { var store = db.createObjectStore( notes, {keyPath: id}); success(); // your callback}; Now create the actual data store
  38. 38. var RW = IDBTransaction.READ_WRITE;var transaction = db.transaction([notes], RW, 0), store = transaction.objectStore(notes), request = store.put(data); Get the object store and put in it
  39. 39. var RW = IDBTransaction.READ_WRITE;var transaction = db.transaction([notes], RW, 0), store = transaction.objectStore(notes), request = store.get(id);request.onsuccess = function (event) { callback(event.target.result);}; On success, result is in event.target
  40. 40. Lawnchairhttp://westcoastlogic.com/lawnchair/
  41. 41. History API http://flic.kr/p/a42tLM
  42. 42. function router(path) { if (path.indexOf(/conf) === 0) { showConferenceDetails(path.substr(5)); } else if (path === /about) { body.id = ; body.className = about; } else if (path === /) { showConferences(next); } else { showConferences(path.substr(1)); }}
  43. 43. function router(path) { if (path.indexOf(/conf) === 0) { showConferenceDetails(path.substr(5)); } else if (path === /about) { body.id = ; body.className = about; } else if (path === /) { showConferences(next); } else { showConferences(path.substr(1)); }}
  44. 44. router(location.pathname);
  45. 45. History APIhistory.pushState(state,title,url);window.onpopstate = fn;
  46. 46. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  47. 47. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  48. 48. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  49. 49. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  50. 50. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  51. 51. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);}; Now our url matches the page
  52. 52. window.onpopstate = function () { router(location.pathname);};
  53. 53. URLs FTW! http://flic.kr/p/a42tLM
  54. 54. What about when they request a URL that doesnt exist???
  55. 55. http://flic.kr/p/8zrMy8Offline
  56. 56. <html manifest="myapp.appcache">
  57. 57. <html manifest="myapp.appcache">Serve with text/manifest
  58. 58. <html manifest="myapp.appcache">Serve with text/manifestSet header cache-control: no-cache
  59. 59. <html manifest="myapp.appcache">Serve with text/manifestSet header cache-control: no-cachestarts with CACHE MANIFEST
  60. 60. CACHE MANIFEST/range.jsdatastore.js
  61. 61. chrome://appcache-internals
  62. 62. CACHE MANIFEST/index.htmlrange.jsdatastore.jsFALLBACK:# force everything through# the index url/ /# this wont match# anything unless its on# another domainNETWORK:*# v4
  63. 63. CACHE MANIFEST / index.htmlServed from cache range.js datastore.js FALLBACK: # force everything through # the index url / / # this wont match # anything unless its on # another domain NETWORK: * # v4
  64. 64. CACHE MANIFEST / index.html range.jsRequests for files not datastore.jsfound in the cache, are FALLBACK: # force everything through directed to / # the index url / / i.e. index.html # this wont match (when offline). # anything unless its on # another domain NETWORK: * # v4
  65. 65. CACHE MANIFEST / index.html range.js datastore.jsAny requests to urls FALLBACK:that dont match / - # force everything through # the index url i.e. on another / / domain, will be # this wont match # anything unless its onserved through the # another domain NETWORK: web. * # v4
  66. 66. CACHE MANIFEST / index.html range.js datastore.js FALLBACK: # force everything through # the index url / / Also ensures # this wont match browser even # anything unless its on # another domainattempts to load the NETWORK: * asset # v4
  67. 67. CACHE MANIFEST / index.html range.js datastore.js FALLBACK: # force everything through # the index url / /The contents of the # this wont match manifest must # anything unless its on # another domainchange to trigger an NETWORK: * update # v4
  68. 68. /future /And let the router code handle the path
  69. 69. CACHE MANIFEST / index.html range.jsRequests for files not datastore.jsfound in the cache, are FALLBACK: # force everything through directed to / # the index url / / i.e. index.html # this wont match (when offline). # anything unless its on # another domain NETWORK: * # v4
  70. 70. http://flic.kr/p/5rTP9f
  71. 71. • Web Storage for simple data• Larger data in IndexedDB & Web SQL• History for back button and url• Offline to support our fake urls http://flic.kr/p/5rTP9f
  72. 72. http://ftw.nodester.com
  73. 73. Thank you. http://flic.kr/p/8JS7km
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×