• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Client-side storage
 

Client-side storage

on

  • 955 views

An overview of client-side (browser) technologies

An overview of client-side (browser) technologies

Statistics

Views

Total Views
955
Views on SlideShare
747
Embed Views
208

Actions

Likes
3
Downloads
14
Comments
0

3 Embeds 208

http://nosqlasia.org 174
http://localhost 32
http://www.nosqlasia.org 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Client-side storage Client-side storage Presentation Transcript

    • Client-side StorageThe Little Book Of (Mostly) EverythingFriday, April 26, 13
    • About meRuben TanVPE of OnApp CDN KLAspiring Javascript Samurai@roguejshttp://roguejs.comhttps://github.com/soggieFriday, April 26, 13
    • CATS!!!!!Friday, April 26, 13
    • About meFriday, April 26, 13
    • About meWorked with Java 6+ yearsFriday, April 26, 13
    • About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBFriday, April 26, 13
    • About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBHuge fan of Javascript & related technologiesFriday, April 26, 13
    • About meWorked with Java 6+ yearsAdopted node.js, redis & CouchDBHuge fan of Javascript & related technologiesOrganizer of NodeHackFriday, April 26, 13
    • 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
    • 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
    • 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
    • HTTP & Browser StateCookies inefficient and insecureSessions stored on server side became standardThen HTML5 came along...Friday, April 26, 13
    • Case StudiesFriday, April 26, 13
    • Case StudiesSynchronizing data across tabsFriday, April 26, 13
    • Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingFriday, April 26, 13
    • Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingHistoric immutable data (analytics, history, etc)Friday, April 26, 13
    • Case StudiesSynchronizing data across tabsReduce server load by minimizing pollingHistoric immutable data (analytics, history, etc)Simplify data sync between frontend & backendFriday, April 26, 13
    • 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
    • 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
    • Example:ServerTab 1 Tab 2Poll PollFriday, April 26, 13
    • Example:ServerTab 1 Tab 2Update PushFriday, April 26, 13
    • Example:ServerTab 1 Tab 2UpdateUpdateStoreRead/AutoSERVERBROWSERFriday, April 26, 13
    • Client-side OverviewWeb StorageWeb SQL DatabaseIndexed DatabaseFile AccessFriday, April 26, 13
    • 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
    • Web Storage SupportFriday, April 26, 13
    • Web SQL DatabaseBringing SQL to client-side storage, based onsqliteDevelopers love itBrowser makers hated itW3C abandoned it in November 2010Friday, April 26, 13
    • Web SQL SupportFriday, April 26, 13
    • Indexed DatabaseProposed by Oracle in 2009Web Storage on steroidsAssumes data stored is an object, with an indexAllows queries via the indicesFriday, April 26, 13
    • Indexed Database SupportFriday, April 26, 13
    • File APILet’s you save files in the browserFriday, April 26, 13
    • File Access SupportFriday, April 26, 13
    • Limitations of Client StorageFriday, April 26, 13
    • Limitations of Client StorageCookies = 4kb eachFriday, April 26, 13
    • Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageFriday, April 26, 13
    • Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageIndexedDB = up to 20% of available spaceFriday, April 26, 13
    • Limitations of Client StorageCookies = 4kb eachlocalStorage = 2.5 ~ 5MB averageIndexedDB = up to 20% of available spaceFileAPI = same as IndexedDBFriday, April 26, 13
    • Moar Limitations!!Friday, April 26, 13
    • Moar Limitations!!Data-types to store:Friday, April 26, 13
    • Moar Limitations!!Data-types to store:Cookie: STRINGFriday, April 26, 13
    • Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGFriday, April 26, 13
    • Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGIndexed Database: JS OBJECTFriday, April 26, 13
    • Moar Limitations!!Data-types to store:Cookie: STRINGWeb Storage: STRINGIndexed Database: JS OBJECTFile: BINARYFriday, April 26, 13
    • 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
    • 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
    • Client-side Storage ChallengesFriday, April 26, 13
    • Client-side Storage ChallengesLimited amount of resourcesFriday, April 26, 13
    • Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFriday, April 26, 13
    • Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFocuses more on querying of data vs. storagemechanismFriday, April 26, 13
    • Client-side Storage ChallengesLimited amount of resourcesMust be as lightweight as possibleFocuses more on querying of data vs. storagemechanismSecurity, consistency, performanceFriday, April 26, 13
    • 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
    • What can we do?Friday, April 26, 13
    • What can we do?Observe the scene (PouchDB & ydn-db)Friday, April 26, 13
    • What can we do?Observe the scene (PouchDB & ydn-db)Incorporate into major frameworks (backbone,ember, angular, KO, etc)Friday, April 26, 13
    • 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
    • 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
    • That’s all folks!Friday, April 26, 13