Your SlideShare is downloading. ×
Make web apps work offline Offline and Desktop Web Applications www.web2os.com Rhys Jones Barcamp London 2 February 17th 2...
Why? <ul><li>6:00am Wales - London Train journeys </li></ul><ul><li>No Wifi </li></ul><ul><li>Patchy 3G </li></ul><ul><li>...
Can’t you already do this? <ul><li>iCal + Google Calendar </li></ul><ul><li>iMail + Gmail POP3 </li></ul><ul><li>MS Office...
I want.. <ul><li>Desktop Rich Internet Applications </li></ul><ul><ul><li>Web application </li></ul></ul><ul><ul><li>Work ...
Many options.. <ul><li>File->Work Offline ….? </li></ul><ul><li>Dojo Storage, Dojo Offline Toolkit </li></ul><ul><li>Firef...
Dojo <ul><li>Dojo Storage </li></ul><ul><ul><li>Flash </li></ul></ul><ul><ul><li>DOM Storage </li></ul></ul><ul><li>Dojo O...
Firefox 3 <ul><li>DOM Storage  </li></ul><ul><li>No need for proxy </li></ul><ul><li>Pin pages in cache </li></ul>
Adobe Apollo <ul><li>Cross platform runtime </li></ul><ul><li>Flash / Flex / Actionscript </li></ul><ul><li>HTML / Javascr...
Adobe Apollo <ul><li>File I/O </li></ul><ul><li>Online / Offline support </li></ul><ul><li>Http / REST / Sockets </li></ul...
Adobe Apollo http://labs.adobe.com/wiki/index.php/Apollo
Adobe Apollo http://labs.adobe.com/wiki/index.php/Apollo
How do we get there? <ul><li>Application reengineering </li></ul><ul><li>Google Calendar in </li></ul><ul><ul><li>Dojo ? <...
Hack it <ul><li>Take the Greasemonkey approach? </li></ul>server Browser HTML, CSS, JS Grease monkey Userscripts
Current Web Applications
Intermediate
Intermediate
Work offline
Synchronise later
_web2os_ <ul><li>Only proxy defined URLs </li></ul><ul><li>www.google.com/calendar/.* </li></ul><ul><li>SQLite database fo...
 
 
 
 
 
 
 
 
Javascript MVC <ul><li>Create the Model </li></ul>
Javascript MVC <ul><li>Create the controller </li></ul>
Javascript MVC <ul><li>Create the Views </li></ul>
Hook the Proxy <ul><li>Tell the proxy what to look for </li></ul>
A real example <ul><li>Map Google Calendar API </li></ul>
Other possibilities… <ul><li>Cross domain xmlhttprequest </li></ul><ul><li>Google office on the Intranet </li></ul><ul><li...
Beta + Opensource soon at: <ul><li>www.web2os.com </li></ul>
Upcoming SlideShare
Loading in...5
×

Offline Web Applications

10,471

Published on

My Barcamp presentation showing how current Web Applications, such as Google Calendar, can be made offline capable through the use of web2os.

Published in: Technology, Art & Photos
2 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,471
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
2
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Offline Web Applications"

  1. 1. Make web apps work offline Offline and Desktop Web Applications www.web2os.com Rhys Jones Barcamp London 2 February 17th 2007
  2. 2. Why? <ul><li>6:00am Wales - London Train journeys </li></ul><ul><li>No Wifi </li></ul><ul><li>Patchy 3G </li></ul><ul><li>I use Google Office Web Apps </li></ul><ul><ul><li>mail, calendar, docs & spreadsheets </li></ul></ul><ul><ul><li>no use when offline… </li></ul></ul><ul><ul><li>what are my options? </li></ul></ul>
  3. 3. Can’t you already do this? <ul><li>iCal + Google Calendar </li></ul><ul><li>iMail + Gmail POP3 </li></ul><ul><li>MS Office + ? </li></ul>
  4. 4. I want.. <ul><li>Desktop Rich Internet Applications </li></ul><ul><ul><li>Web application </li></ul></ul><ul><ul><li>Work offline </li></ul></ul><ul><ul><li>Keep a local copy of my data </li></ul></ul><ul><ul><li>Interact with my desktop resources </li></ul></ul>
  5. 5. Many options.. <ul><li>File->Work Offline ….? </li></ul><ul><li>Dojo Storage, Dojo Offline Toolkit </li></ul><ul><li>Firefox 3 </li></ul><ul><li>WPF/E </li></ul><ul><li>Adobe Apollo </li></ul><ul><li>web2os.com </li></ul>
  6. 6. Dojo <ul><li>Dojo Storage </li></ul><ul><ul><li>Flash </li></ul></ul><ul><ul><li>DOM Storage </li></ul></ul><ul><li>Dojo Offline Toolkit </li></ul><ul><ul><li>Small http proxy </li></ul></ul><ul><ul><li>Library for synchronisation </li></ul></ul><ul><ul><li>More at http://labs.sitepen.com/dot/ </li></ul></ul>
  7. 7. Firefox 3 <ul><li>DOM Storage </li></ul><ul><li>No need for proxy </li></ul><ul><li>Pin pages in cache </li></ul>
  8. 8. Adobe Apollo <ul><li>Cross platform runtime </li></ul><ul><li>Flash / Flex / Actionscript </li></ul><ul><li>HTML / Javascript / CSS / AJAX </li></ul><ul><li>PDF </li></ul>labs.adobe.com/wiki/index.php/Apollo
  9. 9. Adobe Apollo <ul><li>File I/O </li></ul><ul><li>Online / Offline support </li></ul><ul><li>Http / REST / Sockets </li></ul><ul><li>Custom Chrome </li></ul>
  10. 10. Adobe Apollo http://labs.adobe.com/wiki/index.php/Apollo
  11. 11. Adobe Apollo http://labs.adobe.com/wiki/index.php/Apollo
  12. 12. How do we get there? <ul><li>Application reengineering </li></ul><ul><li>Google Calendar in </li></ul><ul><ul><li>Dojo ? </li></ul></ul><ul><ul><li>WPF/E ? </li></ul></ul><ul><ul><li>Adobe Apollo ? </li></ul></ul><ul><ul><li>Firefox 3… </li></ul></ul>
  13. 13. Hack it <ul><li>Take the Greasemonkey approach? </li></ul>server Browser HTML, CSS, JS Grease monkey Userscripts
  14. 14. Current Web Applications
  15. 15. Intermediate
  16. 16. Intermediate
  17. 17. Work offline
  18. 18. Synchronise later
  19. 19. _web2os_ <ul><li>Only proxy defined URLs </li></ul><ul><li>www.google.com/calendar/.* </li></ul><ul><li>SQLite database for each ‘app’ </li></ul><ul><li>Sandboxed Javascript </li></ul><ul><li>Local file, Applescript, COM access </li></ul><ul><li>Use Javascript MVC for proxy apps </li></ul>
  20. 28. Javascript MVC <ul><li>Create the Model </li></ul>
  21. 29. Javascript MVC <ul><li>Create the controller </li></ul>
  22. 30. Javascript MVC <ul><li>Create the Views </li></ul>
  23. 31. Hook the Proxy <ul><li>Tell the proxy what to look for </li></ul>
  24. 32. A real example <ul><li>Map Google Calendar API </li></ul>
  25. 33. Other possibilities… <ul><li>Cross domain xmlhttprequest </li></ul><ul><li>Google office on the Intranet </li></ul><ul><li>Local mashups </li></ul><ul><ul><li>iTunes + Flickr mashup </li></ul></ul>
  26. 34. Beta + Opensource soon at: <ul><li>www.web2os.com </li></ul>

×