Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Offline capable web applications with Google Gears and Dojo Offline

5 697 vues

Publié le

Offline capable web applications with Dojo Offline and Google Gears. And a short introduction to Comet. By Tobias Günther / puremedia.

  • Soyez le premier à commenter

Offline capable web applications with Google Gears and Dojo Offline

  1. 1. Offline Web Applications with Dojo Offline & Google Gears quot;Hello? No... I'm sorry... I'm offline at the moment...!quot;
  2. 2. www.puremedia-online.de • Internet-only company in Stuttgart • AJAX / JavaScript • Ruby on Rails • TYPO3 incl. extension development puremedia t 0700 / 0078 0079 info@puremedia-online.de Reinsburgstr. 37 m 0179 / 90 16 016 www.puremedia-online.de 70178 Stuttgart f 0700 / 0078 0079
  3. 3. www.puremedia-online.de • Internet-only company in Stuttgart • AJAX / JavaScript • Ruby on Rails • TYPO3 incl. extension development Customers include...
  4. 4. Contents • Offline??? Browser based Applications! • Use Cases / Examples • Offline Tools • Google Gears • Architecture • Components • Dojo Offline • Comet
  5. 5. quot;User interface and usability in the browser are bad.quot;
  6. 6. Offline??? Browser based Applications! AJAX.
  7. 7. quot;You can only really use the browser when you're connected to the internet.quot;
  8. 8. Offline??? Browser based Applications! Offline capable Web Applications.
  9. 9. Offline??? Browser based Applications! Offline closes one of the last gaps between web and desktop apps!
  10. 10. Use Cases / Examples Use Cases • Internet connection is... • spotty / unstable / slow • not existing • on the road • airplane / train / bus • at the customer's
  11. 11. Use Cases / Examples Examples • Offline News Reader [Google Reader] • Notepad [GearPad] • Task list [Remember The Milk] • Email Client • CRM • Projectmanagement-Tools • Calendar • .........
  12. 12. Offline Tools Tools [in the past] - (Offline is not brand new) • Dojo Storage • Derby / JavaDB • Zimbra (Derby-based)
  13. 13. Offline Tools Tools [today] • Adobe AIR (früher: Apollo) • Joyent Slingshot (Ruby on Rails) • Google Gears
  14. 14. Offline Tools Tools [coming soon] • Firefox 3 • Webkit (Safari) • HTML5 Working Draft of the WHATWG (quot;Client-side database storagequot;)
  15. 15. Google Gears - Basics What is Google Gears? • Browser-Plugin • Firefox • Internet Explorer • maybe soon: Opera and Safari
  16. 16. Google Gears - Basics What does it cost? Under which license? • License • OpenSource (New BSD license)
  17. 17. Google Gears - Differences What distinguishes Gears from other offline tools? • App stays completely in the browser (no extra app / start up) • Google's AJAX background -- developers use well-known technologies (JS / CSS / HTML), extended by a few now JS-API-calls • lightweight / hardly no installation necessary • open framework • quot;offline onlyquot; (no goodies) • ...it's from Google!
  18. 18. Google Gears - Components LocalServer Local URL- / resource-cache Database Local relational DB (SQLite) Workerpool puts time-intensive processes in the background
  19. 19. Google Gears Flow in ONLINE mode Client Server Internet Webserver LocalServer Webserver Localserver DB DB (SQLite)
  20. 20. Google Gears Flow in ONLINE mode Client Server Internet Webserver LocalServer Webserver Localserver DB DB (SQLite)
  21. 21. Google Gears Flow in OFFLINE mode Client Server Internet Webserver LocalServer Webserver Localserver DB DB (SQLite)
  22. 22. Google Gears Flow in OFFLINE mode Client Server Internet Webserver LocalServer Webserver Localserver DB DB (SQLite)
  23. 23. Google Gears - Local Server Local Server • Intercepts requests to previously defined resources (CSS, HTML, JS...)... • ...and serves them from the local cache (quot;Resource Storequot;)... • ...regardless of offline/online mode. • Resources are kept in a quot;Resource Storequot; (quot;URL-Containerquot;) • Resource Store (manual update) • Managed Resource Store (automatic update)
  24. 24. Google Gears - Database SQLite • complete relational DB (Transactions, Primary keys, Views, Full-text search...) • multiple DBs per App possible • sandbox / same origin policy • ATTACH / DETACH not available • bind parameter • execute() with bind parameters protects from SQL Injections
  25. 25. Google Gears Local data storage
  26. 26. Google Gears - Workerpool JavaScript in the background • time-intensive processes can be run in the background • UI stays responsive / browser doesn't block • no warning dialog quot;Unresponsive Scriptquot; • Restrictions: • no access to the DOM • no access to XMLHttpRequest (see Gears 0.2) • Use case: Synchronization
  27. 27. Google Gears - Security Security in Gears • same-origin policy • access only your own DB • LocalServer can only cache resources in its own origin • User opt-in before Gears can run • Data is stored in user profile of OS • Bind parameter protects from SQL-Injection attacks
  28. 28. Google Gears - Architecture Architecture - modal • online? Communication with the server • offline? Communication with local Gears components • Pros • easy to implement • Cons • User must explicitly and manually change modes (Button quot;Go offlinequot;) • If user forgets to click quot;take me offlinequot;...
  29. 29. Google Gears - Architecture Architecture - modeless • online? Almost only for syncing (continuously) • offline? Always being assumed • Pros • User doesn't have to switch modes by hand • Data is always available • Performance is better • Cons • more difficult to implement... • ...mostly because of sync in background
  30. 30. quot;How do I know if the user is currently online or offline?quot;
  31. 31. quot;How can I do easy synchronization without reinventing the wheel?quot;
  32. 32. Dojo Offline JavaScript toolbox for Gears • quot;Offline Widgetquot; (on/offline detection) • slurp() finds used resources • Data storage + • encryption • alternative storage • Sync framework
  33. 33. Dojo Offline Data storage • Dojo SQL • sits on top of Gears' SQLite-implementation • pro: query-results directly available als JS-objects! • encryption • Dojo Storage • simple Hash-Table (key/value-pairs) • pros: quick & easy
  34. 34. Dojo Offline Synchronization • automatic syncing when... • ...app starts / reloads • ...when going back online • manual sync possible
  35. 35. Offline Resume • Offline closes one of the last gaps between web and desktop apps • Use cases are limited - but in some cases very interesting • Offline capability is not a byproduct
  36. 36. C: quot;What's the news?quot; - S: quot;Nothing.quot; C: quot;What's the news?quot; - S: quot;Nothing!quot; C: quot;What's the news?quot; - S: quot;Nothing!!!quot; C: quot;What's the news?quot; - S: quot;NOTHING!!!quot; C: quot;What's the news?quot; - S: quot;Data. Listen!quot;
  37. 37. Comet Polling • Using polling in AJAX means: • quot;The client (JavaScript / AJAX) asks... • the server... • in certain intervals... • if there's new data.quot;
  38. 38. Comet The problem with polling a) intervals are too short most of the request are useless wasted bandwidth / high server load b) intervals are too long UI gets out of date displayed data is out-dated
  39. 39. Comet The bottom line • why not let the server inform the client [PUSH] instead of • having the client permanently ask [PULL]
  40. 40. Comet How does a traditional request work? [simplified...]
  41. 41. Comet How does a traditional request work? 1. Client makes a request to the server. A connection is opened. Server Webserver Client / Browser Localserver
  42. 42. Comet How does a traditional request work? 1. Client makes a request to the server. A connection is opened. 2. Server answers. Server Webserver Client / Browser Localserver
  43. 43. Comet How does a traditional request work? 1. Client makes a request to the server. A connection is opened. 2. Server answers. 3. Connection is closed. Server Webserver Client / Browser Localserver
  44. 44. Comet How does a traditional request work? 1. Client makes a request to the server. A connection is opened. 2. Server answers. 3. Connection is closed. Server Webserver Client / Browser Localserver
  45. 45. Comet How does a Comet request work? 1. Client makes a request to the server. A connection is opened. Server Webserver Client / Browser Localserver
  46. 46. Comet How does a Comet request work? 1. Client makes a request to the server. A connection is opened. 2. Maybe there's no new data yet, but the connection is kept open! Server Webserver Client / Browser Localserver
  47. 47. Comet How does a Comet request work? 1. Client makes a request to the server. A connection is opened. 2. Maybe there's no new data yet, but the connection is kept open! 3. The connection is kept open... Server Webserver Client / Browser Localserver
  48. 48. Comet How does a Comet request work? 1. Client makes a request to the server. A connection is opened. 2. Maybe there's no new data yet, but the connection is kept open! 3. The connection is kept open... 4. News on the server! The server answers! The connection is closed or is even kept open! Server Webserver Client / Browser Localserver
  49. 49. Comet Central idea with Comet • quot;long-lived HTTP-Connectionsquot;
  50. 50. Comet Comet • PUSH instead of PULL • Low Latency • Low Bandwidth • UI not getting out-dated / always up-to-date
  51. 51. quot;Is Comet »Web 3.0«??quot;
  52. 52. Comet 1. Problems with Comet one thread on the server per connection... • long-lived connection = many threads many threads = many resources (limited number of threads!) no more resources / threads allowed = no more new connections Firewalls: close connections that are open for quot;too longquot; • Proxies: can buffer pushed data - and therefore deliver late • Browser: one browser can only open 2 connections to the same server •
  53. 53. Comet 1. Problems with Comet Solutions are on the way: • Jetty Continuations • Cometd • different Hostnames
  54. 54. Comet 2. Is Comet necessary??? For the majority of use cases AJAX / polling is sufficient! • Use Cases for Comet • • multi-user / collaborative applications • e.g. collaboratively working on a document; chatting • applications with real-time data • e.g. stock prices, chats
  55. 55. Offline Web Applications with Dojo Offline & Google Gears puremedia t 0700 / 0078 0079 info@puremedia-online.de Reinsburgstr. 37 m 0179 / 90 16 016 www.puremedia-online.de 70178 Stuttgart f 0700 / 0078 0079

×