Your SlideShare is downloading. ×
Client-side storage
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Client-side storage

835

Published on

An overview of client-side (browser) technologies

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
835
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Client-side StorageThe Little Book Of (Mostly) EverythingFriday, April 26, 13
  • 2. About meRuben TanVPE of OnApp CDN KLAspiring Javascript Samurai@roguejshttp://roguejs.comhttps://github.com/soggieFriday, April 26, 13
  • 3. CATS!!!!!Friday, April 26, 13
  • 4. About meFriday, April 26, 13
  • 5. About meWorked with Java 6+ yearsFriday, April 26, 13
  • 6. About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBFriday, April 26, 13
  • 7. About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBHuge fan of Javascript & related technologiesFriday, April 26, 13
  • 8. About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBHuge fan of Javascript & related technologiesOrganizer of NodeHackFriday, April 26, 13
  • 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. 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. 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. HTTP & Browser StateCookies inefficient and insecureSessions stored on server side became standardThen HTML5 came along...Friday, April 26, 13
  • 13. Case StudiesFriday, April 26, 13
  • 14. Case StudiesSynchronizing data across tabsFriday, April 26, 13
  • 15. Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingFriday, April 26, 13
  • 16. Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingHistoric immutable data (analytics, history, etc)Friday, April 26, 13
  • 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. 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. 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. Example:ServerTab 1 Tab 2Poll PollFriday, April 26, 13
  • 21. Example:ServerTab 1 Tab 2Update PushFriday, April 26, 13
  • 22. Example:ServerTab 1 Tab 2UpdateUpdateStoreRead/AutoSERVERBROWSERFriday, April 26, 13
  • 23. Client-side OverviewWeb StorageWeb SQL DatabaseIndexed DatabaseFile AccessFriday, April 26, 13
  • 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. Web Storage SupportFriday, April 26, 13
  • 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. Web SQL SupportFriday, April 26, 13
  • 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. Indexed Database SupportFriday, April 26, 13
  • 30. File APILet’s you save files in the browserFriday, April 26, 13
  • 31. File Access SupportFriday, April 26, 13
  • 32. Limitations of Client StorageFriday, April 26, 13
  • 33. Limitations of Client StorageCookies = 4kb eachFriday, April 26, 13
  • 34. Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageFriday, April 26, 13
  • 35. Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageIndexedDB = up to 20% of available spaceFriday, April 26, 13
  • 36. Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageIndexedDB = up to 20% of available spaceFileAPI = same as IndexedDBFriday, April 26, 13
  • 37. Moar Limitations!!Friday, April 26, 13
  • 38. Moar Limitations!!Data-types to store:Friday, April 26, 13
  • 39. Moar Limitations!!Data-types to store:Cookie: STRINGFriday, April 26, 13
  • 40. Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGFriday, April 26, 13
  • 41. Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGIndexed Database: JS OBJECTFriday, April 26, 13
  • 42. Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGIndexed Database: JS OBJECTFile: BINARYFriday, April 26, 13
  • 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. 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. Client-side Storage ChallengesFriday, April 26, 13
  • 46. Client-side Storage ChallengesLimited amount of resourcesFriday, April 26, 13
  • 47. Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFriday, April 26, 13
  • 48. Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFocuses more on querying of data vs. storagemechanismFriday, April 26, 13
  • 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. 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. What can we do?Friday, April 26, 13
  • 52. What can we do?Observe the scene (PouchDB & ydn-db)Friday, April 26, 13
  • 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. 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. 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. That’s all folks!Friday, April 26, 13

×