Client-side storage

1,352 views

Published on

An overview of client-side (browser) technologies

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,352
On SlideShare
0
From Embeds
0
Number of Embeds
190
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Client-side storage

  1. 1. Client-side StorageThe Little Book Of (Mostly) EverythingFriday, April 26, 13
  2. 2. About meRuben TanVPE of OnApp CDN KLAspiring Javascript Samurai@roguejshttp://roguejs.comhttps://github.com/soggieFriday, April 26, 13
  3. 3. CATS!!!!!Friday, April 26, 13
  4. 4. About meFriday, April 26, 13
  5. 5. About meWorked with Java 6+ yearsFriday, April 26, 13
  6. 6. About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBFriday, April 26, 13
  7. 7. About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBHuge fan of Javascript & related technologiesFriday, April 26, 13
  8. 8. About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBHuge fan of Javascript & related technologiesOrganizer of NodeHackFriday, April 26, 13
  9. 9. About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBHuge fan of Javascript & related technologiesOrganizer of NodeHackDabbled in 0MQ and various messaging techsFriday, April 26, 13
  10. 10. About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBHuge fan of Javascript & related technologiesOrganizer of NodeHackDabbled in 0MQ and various messaging techsWorking on a auto-devenv provisioner with vagrantand puppetFriday, April 26, 13
  11. 11. HTTP & Browser StateCOOKIES:HTTP by nature is stateless1994 - web cookies created (in Netscape) for e-commerce (carts)Cookies became de-facto browser-side storeInefficient because cookies are included in everyrequestFriday, April 26, 13
  12. 12. HTTP & Browser StateCookies inefficient and insecureSessions stored on server side became standardThen HTML5 came along...Friday, April 26, 13
  13. 13. Case StudiesFriday, April 26, 13
  14. 14. Case StudiesSynchronizing data across tabsFriday, April 26, 13
  15. 15. Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingFriday, April 26, 13
  16. 16. Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingHistoric immutable data (analytics, history, etc)Friday, April 26, 13
  17. 17. Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingHistoric immutable data (analytics, history, etc)Simplify data sync between frontend & backendFriday, April 26, 13
  18. 18. Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingHistoric immutable data (analytics, history, etc)Simplify data sync between frontend & backendPersisting form data in complex formsFriday, April 26, 13
  19. 19. Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingHistoric immutable data (analytics, history, etc)Simplify data sync between frontend & backendPersisting form data in complex formsetcFriday, April 26, 13
  20. 20. Example:ServerTab 1 Tab 2Poll PollFriday, April 26, 13
  21. 21. Example:ServerTab 1 Tab 2Update PushFriday, April 26, 13
  22. 22. Example:ServerTab 1 Tab 2UpdateUpdateStoreRead/AutoSERVERBROWSERFriday, April 26, 13
  23. 23. Client-side OverviewWeb StorageWeb SQL DatabaseIndexed DatabaseFile AccessFriday, April 26, 13
  24. 24. Web Storagehttp://dev.w3.org/html5/webstorage/Protocol to store data in browser across tabsImprovement on cookiesComes in two flavors:localStorage - foreversessionStorage - until end of browser sessionNo support for transactionsFriday, April 26, 13
  25. 25. Web Storage SupportFriday, April 26, 13
  26. 26. Web SQL DatabaseBringing SQL to client-side storage, based onsqliteDevelopers love itBrowser makers hated itW3C abandoned it in November 2010Friday, April 26, 13
  27. 27. Web SQL SupportFriday, April 26, 13
  28. 28. Indexed DatabaseProposed by Oracle in 2009Web Storage on steroidsAssumes data stored is an object, with an indexAllows queries via the indicesFriday, April 26, 13
  29. 29. Indexed Database SupportFriday, April 26, 13
  30. 30. File APILet’s you save files in the browserFriday, April 26, 13
  31. 31. File Access SupportFriday, April 26, 13
  32. 32. Limitations of Client StorageFriday, April 26, 13
  33. 33. Limitations of Client StorageCookies = 4kb eachFriday, April 26, 13
  34. 34. Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageFriday, April 26, 13
  35. 35. Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageIndexedDB = up to 20% of available spaceFriday, April 26, 13
  36. 36. Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageIndexedDB = up to 20% of available spaceFileAPI = same as IndexedDBFriday, April 26, 13
  37. 37. Moar Limitations!!Friday, April 26, 13
  38. 38. Moar Limitations!!Data-types to store:Friday, April 26, 13
  39. 39. Moar Limitations!!Data-types to store:Cookie: STRINGFriday, April 26, 13
  40. 40. Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGFriday, April 26, 13
  41. 41. Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGIndexed Database: JS OBJECTFriday, April 26, 13
  42. 42. Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGIndexed Database: JS OBJECTFile: BINARYFriday, April 26, 13
  43. 43. Moving on...Browsers and W3C sees the need for client-sidestorageWeb Store + IndexedDB + File API = an almostcomplete solutionWhere does this leave us?Friday, April 26, 13
  44. 44. The Emerging SceneGoogle Gears (sadly, is dead)SynckitStore.jsGarlic.js - form persistencePouchDB (based on CouchDB) - auto-sync with couchDBjQuery pluginsdb.jsLocalStorageDBLawnchairydn-db - unifying indexedDB, webSQL and webStorageFriday, April 26, 13
  45. 45. Client-side Storage ChallengesFriday, April 26, 13
  46. 46. Client-side Storage ChallengesLimited amount of resourcesFriday, April 26, 13
  47. 47. Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFriday, April 26, 13
  48. 48. Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFocuses more on querying of data vs. storagemechanismFriday, April 26, 13
  49. 49. Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFocuses more on querying of data vs. storagemechanismSecurity, consistency, performanceFriday, April 26, 13
  50. 50. Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFocuses more on querying of data vs. storagemechanismSecurity, consistency, performanceJavascript. Duuuddeeeee....Friday, April 26, 13
  51. 51. What can we do?Friday, April 26, 13
  52. 52. What can we do?Observe the scene (PouchDB & ydn-db)Friday, April 26, 13
  53. 53. What can we do?Observe the scene (PouchDB & ydn-db)Incorporate into major frameworks (backbone,ember, angular, KO, etc)Friday, April 26, 13
  54. 54. What can we do?Observe the scene (PouchDB & ydn-db)Incorporate into major frameworks (backbone,ember, angular, KO, etc)Simplify and standardize APIFriday, April 26, 13
  55. 55. What can we do?Observe the scene (PouchDB & ydn-db)Incorporate into major frameworks (backbone,ember, angular, KO, etc)Simplify and standardize APIUnderstanding the power of client-sideoffloadingFriday, April 26, 13
  56. 56. That’s all folks!Friday, April 26, 13

×