Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Offline Web Applications

11,325 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

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>

×