Web Apps
without
the Web
Remy Sharp / @rem
What's what.
HTML5   "HTML5"
"HTML5"

          Offline applications
HTML5
          Offline events
          Canvas
          Video
          Web Forms
MOAR!!!
"HTML5"




          Geolocation
          Web Workers
          Web Sockets
          Web SQL Databases
        ...
HTML5 Apps
"Offline Storage"
Offline cache

Data storage
1. Web Storage

2. Web SQL Databases

3. HTML5 offline applications

4. APIs of the future
Web Storage
(cookies on steroids)
Web Storage
(cookies on steroids)
Cookies Suck.
Two windows have
access to the same
 "session" cookie
Storage


window based    sessionStorage
                localStorage
Storage


window based    sessionStorage
domain based    localStorage
Setting

sessionStorage.setItem('version',5);
Setting

sessionStorage.setItem('version',5);

sessionStorage.version = 5;
Setting

sessionStorage.setItem('version',5);

sessionStorage.version = 5;

sessionStorage['version'] = 5;
Getting

sessionStorage.getItem('version');
Getting

sessionStorage.getItem('version');

sessionStorage.version;
Getting

sessionStorage.getItem('version');

sessionStorage.version;

sessionStorage['version'];
sessionStorage.version = 5;

typeof sessionStorage.version; // ?
sessionStorage.version = 5;

typeof sessionStorage.version; // ?
Values are strings
Values are strings

     Work around: JSON
(and http://www.json.org/json2.js)
Complex Objects
var ss = sessionStorage,
    user = { screen_name : ‘rem’,
             rating : 11 };
ss.setItem(‘user’, ...
There's no security
    protecting the API

// Safari debugger broken:
sessionStorage.setItem('setItem',12);
API
• setItem(key, value)
• getItem(key)
• removeItem(key)
• length
• key(index)
• clear()
What about
supporting old
  browsers?
Pollyfilling
Just make it work
Just make it work
if (!localStorage || !sessionStorage) (function () {

var Storage = function (type) {
   ...
};
if (!loc...
Chrome's native
Web Sockets &
Flash is used to
fill the holes
Web SQL Databases
(cookies on steroids on steroids)
Web SQL Databases
(cookies on steroids on steroids)
Web SQL Database API

1. openDatabase

2. db.transaction

3. transaction.executeSql
openDatabase

• Check for support
openDatabase

• Check for support
• Estimate db size
openDatabase

• Check for support
• Estimate db size
• Store return var
openDatabase

• Check for support
• Estimate db size
• Store return var
• Forget versioning for now
if (!window.openDatabase) {
  alert('No supported');
  return;
}
var db = openDatabase(
   'mydb', // name
   '1.0', // version
   'My First Database', // description
   2 * 1024 * 1024 /...
var db = openDatabase(
   'mydb', // name
   '1.0', // version
   'My First Database', // description
   2 * 1024 * 1024 /...
Question:
How do I open the
database without
knowing the version?
Question:
How do I open the
database without
knowing the version?
You can't.
transaction

• Container for running SQL
transaction

• Container for running SQL
• Queues executeSql
transaction

• Container for running SQL
• Queues executeSql
• Rolls back on error
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE foo (id unique, text)');
  tx.executeSql('INSERT INTO foo VAL...
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE foo (id unique, text)');
  tx.executeSql('INSERT INTO foo VAL...
3. select count(*)

Queue   2. drop table & (try) to insert

        1. create table & insert




                        ...
3. select count(*)

Queue          2. drop table & (try) to insert




1. create table & insert
                          ...
3. select count(*)

Queue   2. drop table & (try) to insert




                             Database
                    ...
3. select count(*)

Queue




2. drop table & (try) to insert
                                        Database
           ...
3. select count(*)

Queue




2. drop table & (try) to insert
                                        Database
           ...
3. select count(*)

Queue




                             Database
                       1. create table & insert
Queue




3. select count(*)
                          Database
                     1. create table & insert
Queue




             Database
        1. create table & insert

        3. select count(*)
executeSql

• Both for read & write
executeSql

• Both for read & write
• Injection protection
executeSql

• Both for read & write
• Injection protection
• Callback gives results
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM foo');
});
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM foo');
});
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM foo');
});
tx.executeSql(
   'INSERT INTO foo VALUES (1, "foo")'
);
tx.executeSql(
   'INSERT INTO foo VALUES (?, ?)',
   [id, userVariable]
);
tx.executeSql(
   'SELECT * FROM foo',
   [],
   function (tx, results) {
     var len = results.rows.length;
     for (va...
tx.executeSql(
   'SELECT * FROM foo',
   [],
   function (tx, results) {
     var len = results.rows.length;
     for (va...
tx.executeSql(
   'SELECT * FROM foo',
   [],
   function (tx, results) {
     var len = results.rows.length;
     for (va...
tx.executeSql(
   'SELECT * FROM foo',
   [],
   function (tx, results) {
     var len = results.rows.length;
     for (va...
Offline
Offline
Offline Apps

• Application cache / manifest
• Events: offline, online
• navigator.onLine property
navigator.onLine
http://icanhaz.com/rubiks
http://icanhaz.com/rubiks
Using a Manifest
<!DOCTYPE html>
<html manifest="my.manifest">
<body>
<!-- my page -->
</body>
</html>
my.manifest
CACHE MANIFEST
app.html
css/style.css
js/app.js
#version 13
The Manifest

1. Serve as text/manifest, by
   adding to mime.types:

text/cache-manifest manifest
The Manifest

2. First line must be:

    CACHE MANIFEST
The Manifest

3. Including page is implicitly
   included in the cache.
The Manifest

4. Two futher namespaces:
   NETWORK & FALLBACK

    FALLBACK:
    / offline.html
The Manifest

5. Include some versioning to
   cache bust your manifest

     # version 16
The process
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
Browser: request   Server: serve all   manifest, cache
                                            asset...
Browser: I have a
       Problem: serve all manifest, cache
Browser: request Server:
                             assets
 ...
document.body.onOnline =
function () {
   // fire an update to the cache
   applicationCache.update();
};
document.body.onOnline =
function () {
   // fire an update to the cache
   applicationCache.update();
};

applicationCach...
APIs of the Future
Notification API
if (webkitNotifications.checkPermission() == 0) {
  webkitNotifications.createNotification
  ➥ (profile_image_url, name, t...
File API
Device API
Very new, collection
 of specifications
Camera API
Message API




 Camera API
Message API


       PIM API
      (calendar, contacts, tasks)




 Camera API
Message API


                   PIM API
File System API   (calendar, contacts, tasks)




          Camera API
Message API
 App Launcher API
                   PIM API
File System API   (calendar, contacts, tasks)




          Camer...
Message API
 App Launcher API
                   PIM API
File System API   (calendar, contacts, tasks)




          Camer...
Message API
App Launcher API
                PIM API
File System API(calendar, contacts, tasks)


  Communication Log API
...
Message API
App Launcher API
                PIM API
              Gallery API
File System API(calendar, contacts, tasks)
...
Notifications API
        Message API
App Launcher API
                PIM API
              Gallery API
File System API(ca...
Notifications API


            -
        Message API

          I
       P c!
App Launcher API


     A ti
File System API...
html5demos.com
introducinghtml5.com




@rem
remy@leftlogic.com
Webapps without the web
Webapps without the web
Webapps without the web
Webapps without the web
Webapps without the web
Webapps without the web
Upcoming SlideShare
Loading in...5
×

Webapps without the web

3,406

Published on

We'll look at how the HTML5 and related specifications allow us to develop applications that can survive outside of the web. Browsers now offer us simple storage and more complicated SQL based storage and also full offline support which means we can build our apps to be self sufficient when the user is disconnected. This talk will take you through the technology and walk you though some practical code.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,406
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
73
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Webapps without the web

  1. 1. Web Apps without the Web Remy Sharp / @rem
  2. 2. What's what.
  3. 3. HTML5 "HTML5"
  4. 4. "HTML5" Offline applications HTML5 Offline events Canvas Video Web Forms
  5. 5. MOAR!!! "HTML5" Geolocation Web Workers Web Sockets Web SQL Databases Web Storage Offline applications HTML5 Offline events Canvas Video Web Forms
  6. 6. HTML5 Apps
  7. 7. "Offline Storage"
  8. 8. Offline cache Data storage
  9. 9. 1. Web Storage 2. Web SQL Databases 3. HTML5 offline applications 4. APIs of the future
  10. 10. Web Storage (cookies on steroids)
  11. 11. Web Storage (cookies on steroids)
  12. 12. Cookies Suck.
  13. 13. Two windows have access to the same "session" cookie
  14. 14. Storage window based sessionStorage localStorage
  15. 15. Storage window based sessionStorage domain based localStorage
  16. 16. Setting sessionStorage.setItem('version',5);
  17. 17. Setting sessionStorage.setItem('version',5); sessionStorage.version = 5;
  18. 18. Setting sessionStorage.setItem('version',5); sessionStorage.version = 5; sessionStorage['version'] = 5;
  19. 19. Getting sessionStorage.getItem('version');
  20. 20. Getting sessionStorage.getItem('version'); sessionStorage.version;
  21. 21. Getting sessionStorage.getItem('version'); sessionStorage.version; sessionStorage['version'];
  22. 22. sessionStorage.version = 5; typeof sessionStorage.version; // ?
  23. 23. sessionStorage.version = 5; typeof sessionStorage.version; // ?
  24. 24. Values are strings
  25. 25. Values are strings Work around: JSON (and http://www.json.org/json2.js)
  26. 26. Complex Objects var ss = sessionStorage, user = { screen_name : ‘rem’, rating : 11 }; ss.setItem(‘user’, JSON.stringify(user)); alert( JSON.parse(ss.getItem (‘user’)).screen_name );
  27. 27. There's no security protecting the API // Safari debugger broken: sessionStorage.setItem('setItem',12);
  28. 28. API • setItem(key, value) • getItem(key) • removeItem(key) • length • key(index) • clear()
  29. 29. What about supporting old browsers?
  30. 30. Pollyfilling
  31. 31. Just make it work
  32. 32. Just make it work if (!localStorage || !sessionStorage) (function () { var Storage = function (type) { ... }; if (!localStorage) localStorage = new Storage('local'); if (!sessionStorage) sessionStorage = new Storage('session'); )(); http://gist.github.com/350433
  33. 33. Chrome's native Web Sockets & Flash is used to fill the holes
  34. 34. Web SQL Databases (cookies on steroids on steroids)
  35. 35. Web SQL Databases (cookies on steroids on steroids)
  36. 36. Web SQL Database API 1. openDatabase 2. db.transaction 3. transaction.executeSql
  37. 37. openDatabase • Check for support
  38. 38. openDatabase • Check for support • Estimate db size
  39. 39. openDatabase • Check for support • Estimate db size • Store return var
  40. 40. openDatabase • Check for support • Estimate db size • Store return var • Forget versioning for now
  41. 41. if (!window.openDatabase) { alert('No supported'); return; }
  42. 42. var db = openDatabase( 'mydb', // name '1.0', // version 'My First Database', // description 2 * 1024 * 1024 // size, 2Mb );
  43. 43. var db = openDatabase( 'mydb', // name '1.0', // version 'My First Database', // description 2 * 1024 * 1024 // size, 2Mb );
  44. 44. Question: How do I open the database without knowing the version?
  45. 45. Question: How do I open the database without knowing the version? You can't.
  46. 46. transaction • Container for running SQL
  47. 47. transaction • Container for running SQL • Queues executeSql
  48. 48. transaction • Container for running SQL • Queues executeSql • Rolls back on error
  49. 49. db.transaction(function (tx) { tx.executeSql('CREATE TABLE foo (id unique, text)'); tx.executeSql('INSERT INTO foo VALUES (1, "foobar")'); });
  50. 50. db.transaction(function (tx) { tx.executeSql('CREATE TABLE foo (id unique, text)'); tx.executeSql('INSERT INTO foo VALUES (1, "foobar")'); });
  51. 51. 3. select count(*) Queue 2. drop table & (try) to insert 1. create table & insert Database
  52. 52. 3. select count(*) Queue 2. drop table & (try) to insert 1. create table & insert Database
  53. 53. 3. select count(*) Queue 2. drop table & (try) to insert Database 1. create table & insert
  54. 54. 3. select count(*) Queue 2. drop table & (try) to insert Database 1. create table & insert
  55. 55. 3. select count(*) Queue 2. drop table & (try) to insert Database 1. create table & insert
  56. 56. 3. select count(*) Queue Database 1. create table & insert
  57. 57. Queue 3. select count(*) Database 1. create table & insert
  58. 58. Queue Database 1. create table & insert 3. select count(*)
  59. 59. executeSql • Both for read & write
  60. 60. executeSql • Both for read & write • Injection protection
  61. 61. executeSql • Both for read & write • Injection protection • Callback gives results
  62. 62. db.transaction(function (tx) { tx.executeSql('SELECT * FROM foo'); });
  63. 63. db.transaction(function (tx) { tx.executeSql('SELECT * FROM foo'); });
  64. 64. db.transaction(function (tx) { tx.executeSql('SELECT * FROM foo'); });
  65. 65. tx.executeSql( 'INSERT INTO foo VALUES (1, "foo")' );
  66. 66. tx.executeSql( 'INSERT INTO foo VALUES (?, ?)', [id, userVariable] );
  67. 67. tx.executeSql( 'SELECT * FROM foo', [], function (tx, results) { var len = results.rows.length; for (var i = 0; i < len; i++) { alert(results.rows.item(i).text); } } );
  68. 68. tx.executeSql( 'SELECT * FROM foo', [], function (tx, results) { var len = results.rows.length; for (var i = 0; i < len; i++) { alert(results.rows.item(i).text); } } );
  69. 69. tx.executeSql( 'SELECT * FROM foo', [], function (tx, results) { var len = results.rows.length; for (var i = 0; i < len; i++) { alert(results.rows.item(i).text); } } );
  70. 70. tx.executeSql( 'SELECT * FROM foo', [], function (tx, results) { var len = results.rows.length; for (var i = 0; i < len; i++) { alert(results.rows.item(i).text); } } );
  71. 71. Offline
  72. 72. Offline
  73. 73. Offline Apps • Application cache / manifest • Events: offline, online • navigator.onLine property
  74. 74. navigator.onLine
  75. 75. http://icanhaz.com/rubiks
  76. 76. http://icanhaz.com/rubiks
  77. 77. Using a Manifest <!DOCTYPE html> <html manifest="my.manifest"> <body> <!-- my page --> </body> </html>
  78. 78. my.manifest CACHE MANIFEST app.html css/style.css js/app.js #version 13
  79. 79. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest manifest
  80. 80. The Manifest 2. First line must be: CACHE MANIFEST
  81. 81. The Manifest 3. Including page is implicitly included in the cache.
  82. 82. The Manifest 4. Two futher namespaces: NETWORK & FALLBACK FALLBACK: / offline.html
  83. 83. The Manifest 5. Include some versioning to cache bust your manifest # version 16
  84. 84. The process
  85. 85. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  86. 86. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  87. 87. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  88. 88. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  89. 89. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  90. 90. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  91. 91. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  92. 92. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  93. 93. Browser: I have a Browser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  94. 94. Browser: I have a Problem: serve all manifest, cache Browser: request Server: assets Change of content requires 2 refreshes Server: serve Browser: applicationCache Browser: reload manifest assets updated Browser: only Browser: serve Server: 304 Not request manifest locally Modified file
  95. 95. document.body.onOnline = function () { // fire an update to the cache applicationCache.update(); };
  96. 96. document.body.onOnline = function () { // fire an update to the cache applicationCache.update(); }; applicationCache.onUpdateReady = function () { applicationCache.swapCache(); notice('reload'); };
  97. 97. APIs of the Future
  98. 98. Notification API
  99. 99. if (webkitNotifications.checkPermission() == 0) { webkitNotifications.createNotification ➥ (profile_image_url, name, text).show(); }
  100. 100. File API
  101. 101. Device API
  102. 102. Very new, collection of specifications
  103. 103. Camera API
  104. 104. Message API Camera API
  105. 105. Message API PIM API (calendar, contacts, tasks) Camera API
  106. 106. Message API PIM API File System API (calendar, contacts, tasks) Camera API
  107. 107. Message API App Launcher API PIM API File System API (calendar, contacts, tasks) Camera API
  108. 108. Message API App Launcher API PIM API File System API (calendar, contacts, tasks) Camera API App Configuration API
  109. 109. Message API App Launcher API PIM API File System API(calendar, contacts, tasks) Communication Log API Camera API App Configuration API
  110. 110. Message API App Launcher API PIM API Gallery API File System API(calendar, contacts, tasks) Communication Log API Camera API App Configuration API
  111. 111. Notifications API Message API App Launcher API PIM API Gallery API File System API(calendar, contacts, tasks) Communication Log API Camera API App Configuration API
  112. 112. Notifications API - Message API I P c! App Launcher API A ti File System API PIM API Gallery API (calendar, contacts, tasks) s Communication Log API ta Camera API App Configuration API
  113. 113. html5demos.com introducinghtml5.com @rem remy@leftlogic.com
  1. A particular slide catching your eye?

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

×