Offline Web Applications

11,244 views

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
11,244
On SlideShare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
0
Comments
2
Likes
11
Embeds 0
No embeds

No notes for slide

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>

×