Forget the Web

  • 1,916 views
Uploaded on

Using the la

Using the la

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,916
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. F**get the Web http://flic.kr/p/8JS7km
  • 2. http://flic.kr/p/8Tsj3N
  • 3. http://flic.kr/p/a25FHi
  • 4. http://ftw.nodester.com
  • 5. Change this to your Twitter username This is live nowhttp://ftw.nodester.com
  • 6. http://ftw.nodester.com
  • 7. http://flic.kr/p/5rTP9f
  • 8. •Web Storage• IndexedDB (where available)• Web SQL Databases• History API• Offline manifest http://flic.kr/p/5rTP9f
  • 9. http://flic.kr/p/4HYNgX
  • 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. Web Storage
  • 12. Cookiessuck.
  • 13. Not the edible kind, duh!Cookiessuck.
  • 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. http://flic.kr/p/5irsCGFuck cookies.
  • 16. Sexy Storage FTW http://flic.kr/p/3pBDzf
  • 17. • localStorage no expiry required & persists• sessionStorage doesnt leak• Applied to document origin, i.e. scheme/host/port tuple• Insanely simple API
  • 18. setItem(key, value)removeItem(key)lengthkey(index)clear()
  • 19. var store = localStorage;store.name = remy;
  • 20. var store = localStorage;store.name = remy;delete store.name;
  • 21. Values are coerced in to strings
  • 22. Values are coerced in to strings Work around: JSON (and http://www.json.org/json2.js)
  • 23. Events Too
  • 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. Web SQL Databases http://flic.kr/p/drmCJ
  • 26. ๏ SQLite based๏ No longer actively maintained๏ Good Safari support - i.e. iOS๏ Fully featured debuggers available
  • 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. 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. 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. 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. 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. 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. ๏ Atomic transactions๏ Queues every request๏ Good Safari support - i.e. iOS๏ Fully featured debuggers available
  • 34. IndexedDB http://flic.kr/p/5KXFwB
  • 35. • Still very new• Support will be further reaching than Web SQL (but unsure about Safari)• Very, very difficult to debug atm.
  • 36. var request = indexedDB.open(notes);request.onerror = fail;request.onsuccess = function (e) { db = e.target.result;}; Very, very object event based.
  • 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. 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. 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. Lawnchairhttp://westcoastlogic.com/lawnchair/
  • 41. History API http://flic.kr/p/a42tLM
  • 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. 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. router(location.pathname);
  • 45. History APIhistory.pushState(state,title,url);window.onpopstate = fn;
  • 46. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  • 47. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  • 48. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  • 49. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  • 50. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);};
  • 51. link.onclick = function (event) { event.preventDefault(); showConferenceDetails(this.path); history.pushState(, , this.path);}; Now our url matches the page
  • 52. window.onpopstate = function () { router(location.pathname);};
  • 53. URLs FTW! http://flic.kr/p/a42tLM
  • 54. What about when they request a URL that doesnt exist???
  • 55. http://flic.kr/p/8zrMy8Offline
  • 56. <html manifest="myapp.appcache">
  • 57. <html manifest="myapp.appcache">Serve with text/manifest
  • 58. <html manifest="myapp.appcache">Serve with text/manifestSet header cache-control: no-cache
  • 59. <html manifest="myapp.appcache">Serve with text/manifestSet header cache-control: no-cachestarts with CACHE MANIFEST
  • 60. CACHE MANIFEST/range.jsdatastore.js
  • 61. chrome://appcache-internals
  • 62. CACHE MANIFEST/index.htmlrange.jsdatastore.jsFALLBACK:# force everything through# the index url/ /# this wont match# anything unless its on# another domainNETWORK:*# v4
  • 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. 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. 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. 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. 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. /future /And let the router code handle the path
  • 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. http://flic.kr/p/5rTP9f
  • 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. http://ftw.nodester.com
  • 73. Thank you. http://flic.kr/p/8JS7km