An overview of client-side (browser) technologies

1. Client-side Storage
The Little Book Of (Mostly) Everything
Friday, April 26, 13

2. About me
Ruben Tan
VPE of OnApp CDN KL
Aspiring Javascript Samurai
@roguejs
http://roguejs.com
https://github.com/soggie
Friday, April 26, 13

3. CATS!!!!!
Friday, April 26, 13

4. About me
Friday, April 26, 13

5. About me
Worked with Java 6+ years
Friday, April 26, 13

6. About me
Worked with Java 6+ years
Adopted node.js, redis & CouchDB
Friday, April 26, 13

7. About me
Worked with Java 6+ years
Adopted node.js, redis & CouchDB
Huge fan of Javascript & related technologies
Friday, April 26, 13

8. About me
Worked with Java 6+ years
Adopted node.js, redis & CouchDB
Huge fan of Javascript & related technologies
Organizer of NodeHack
Friday, April 26, 13

9. About me
Worked with Java 6+ years
Adopted node.js, redis & CouchDB
Huge fan of Javascript & related technologies
Organizer of NodeHack
Dabbled in 0MQ and various messaging techs
Friday, April 26, 13

10. About me
Worked with Java 6+ years
Adopted node.js, redis & CouchDB
Huge fan of Javascript & related technologies
Organizer of NodeHack
Dabbled in 0MQ and various messaging techs
Working on a auto-devenv provisioner with vagrant
and puppet
Friday, April 26, 13

11. HTTP & Browser State
COOKIES:
HTTP by nature is stateless
1994 - web cookies created (in Netscape) for e-
commerce (carts)
Cookies became de-facto browser-side store
Inefficient because cookies are included in every
request
Friday, April 26, 13

12. HTTP & Browser State
Cookies inefficient and insecure
Sessions stored on server side became standard
Then HTML5 came along...
Friday, April 26, 13

13. Case Studies
Friday, April 26, 13

14. Case Studies
Synchronizing data across tabs
Friday, April 26, 13

15. Case Studies
Synchronizing data across tabs
Reduce server load by minimizing polling
Friday, April 26, 13

16. Case Studies
Synchronizing data across tabs
Reduce server load by minimizing polling
Historic immutable data (analytics, history, etc)
Friday, April 26, 13

17. Case Studies
Synchronizing data across tabs
Reduce server load by minimizing polling
Historic immutable data (analytics, history, etc)
Simplify data sync between frontend & backend
Friday, April 26, 13

18. Case Studies
Synchronizing data across tabs
Reduce server load by minimizing polling
Historic immutable data (analytics, history, etc)
Simplify data sync between frontend & backend
Persisting form data in complex forms
Friday, April 26, 13

19. Case Studies
Synchronizing data across tabs
Reduce server load by minimizing polling
Historic immutable data (analytics, history, etc)
Simplify data sync between frontend & backend
Persisting form data in complex forms
etc
Friday, April 26, 13

20. Example:
Server
Tab 1 Tab 2
Poll Poll
Friday, April 26, 13

21. Example:
Server
Tab 1 Tab 2
Update Push
Friday, April 26, 13

22. Example:
Server
Tab 1 Tab 2
Update
Update
Store
Read/Auto
SERVER
BROWSER
Friday, April 26, 13

23. Client-side Overview
Web Storage
Web SQL Database
Indexed Database
File Access
Friday, April 26, 13

24. Web Storage
http://dev.w3.org/html5/webstorage/
Protocol to store data in browser across tabs
Improvement on cookies
Comes in two flavors:
localStorage - forever
sessionStorage - until end of browser session
No support for transactions
Friday, April 26, 13

25. Web Storage Support
Friday, April 26, 13

26. Web SQL Database
Bringing SQL to client-side storage, based on
sqlite
Developers love it
Browser makers hated it
W3C abandoned it in November 2010
Friday, April 26, 13

27. Web SQL Support
Friday, April 26, 13

28. Indexed Database
Proposed by Oracle in 2009
Web Storage on steroids
Assumes data stored is an object, with an index
Allows queries via the indices
Friday, April 26, 13

29. Indexed Database Support
Friday, April 26, 13

30. File API
Let’s you save files in the browser
Friday, April 26, 13

31. File Access Support
Friday, April 26, 13

32. Limitations of Client Storage
Friday, April 26, 13

33. Limitations of Client Storage
Cookies = 4kb each
Friday, April 26, 13

34. Limitations of Client Storage
Cookies = 4kb each
localStorage = 2.5 ~ 5MB average
Friday, April 26, 13

35. Limitations of Client Storage
Cookies = 4kb each
localStorage = 2.5 ~ 5MB average
IndexedDB = up to 20% of available space
Friday, April 26, 13

36. Limitations of Client Storage
Cookies = 4kb each
localStorage = 2.5 ~ 5MB average
IndexedDB = up to 20% of available space
FileAPI = same as IndexedDB
Friday, 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: STRING
Friday, April 26, 13

40. Moar Limitations!!
Data-types to store:
Cookie: STRING
Web Storage: STRING
Friday, April 26, 13

41. Moar Limitations!!
Data-types to store:
Cookie: STRING
Web Storage: STRING
Indexed Database: JS OBJECT
Friday, April 26, 13

42. Moar Limitations!!
Data-types to store:
Cookie: STRING
Web Storage: STRING
Indexed Database: JS OBJECT
File: BINARY
Friday, April 26, 13

43. Moving on...
Browsers and W3C sees the need for client-side
storage
Web Store + IndexedDB + File API = an almost
complete solution
Where does this leave us?
Friday, April 26, 13

44. The Emerging Scene
Google Gears (sadly, is dead)
Synckit
Store.js
Garlic.js - form persistence
PouchDB (based on CouchDB) - auto-sync with couchDB
jQuery plugins
db.js
LocalStorageDB
Lawnchair
ydn-db - unifying indexedDB, webSQL and webStorage
Friday, April 26, 13

45. Client-side Storage Challenges
Friday, April 26, 13

46. Client-side Storage Challenges
Limited amount of resources
Friday, April 26, 13

47. Client-side Storage Challenges
Limited amount of resources
Must be as lightweight as possible
Friday, April 26, 13

48. Client-side Storage Challenges
Limited amount of resources
Must be as lightweight as possible
Focuses more on querying of data vs. storage
mechanism
Friday, April 26, 13

49. Client-side Storage Challenges
Limited amount of resources
Must be as lightweight as possible
Focuses more on querying of data vs. storage
mechanism
Security, consistency, performance
Friday, April 26, 13

50. Client-side Storage Challenges
Limited amount of resources
Must be as lightweight as possible
Focuses more on querying of data vs. storage
mechanism
Security, consistency, performance
Javascript. 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 API
Friday, 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 API
Understanding the power of client-side
offloading
Friday, April 26, 13

56. That’s all folks!
Friday, April 26, 13