An introduction to WebSQL and IndexedDB with libraries and if they can be used today - star wars style. Session at HTML5Dev Conference - http://html5devconf.com/

1. Client Side Storage
Star wars style

WebSQL and
IndexedDB

2. Long time ago, in a galaxy far
far away …

4. … days of the old republic …
• Cookies –
– Limited storage, key value pairs
• Local/Session Storage
– Store {Key,Value} pairs
– Iterate over values
– Synchronous, no transactions
– Not a database, don‟t fake it

5. ... restoring balance to the force ...
• Google Gears:Database module
– First release: 2007-05-31
– Database API based on SQLite – built in DB
• Web Database API
– Dialect of SQLite 3 (ref)
– Deprecated (ref)

6. ... WebSql refresher...
IndexedDB Example
http://yourwebpage.com search
Database Database
Transactions Transactions
Create table bookShop (key
varchar(255), value varchar(255))
Insert into bookShop values (“name”,
“desc”)
Drop table bookShop
SQLite Dialect
Select * from bookShop where name =
„name‟;

7. ... an apprentice to a master ...

8. ... an apprentice to a master ...
• Powerful query capabilities
• Familiar SQL syntax, easy for developers
• Already supported by browsers, no better
alternative.
“User agents must implement the SQL
dialect supported by Sqlite 3.6.19”

9. ... Denying the destiny ...

10. ... Denying the destiny ...

11. Come over to the dark side*

12. … the birth of a hero …
• WebSimpleDB
– ISAM based store – influenced by Berkley DB
– Concepts of ObjectStores, Indexes, Cursors
– Most APIs were synchronous
– Async models – function callbacks
– No SQL

13. … the force is strong with this one.…
• Mozilla, Microsoft Bless youngling
– Implemented in Chrome 12, Firefox 4.0, IE10
• Simple implementation for browsers
– Basic concepts like transactions
– Async and Sync APIs
– Libraries to enhance capabilities

14. ... IndexedDB refresher...
IndexedDB Example
http://yourwebpage.com search
Database Database
Object Store Object Store
key : value Index key : value Index
key : value key : value
Cursor on Cursor on
key : value Index key : value Index
Cursor on Cursor on
Object Store Object Store

15. Demo time

16. … what a piece of junk! …
• Specification still evolving
– setVersion vs onupgradeneeded
– IDBTransaction.READ_ONLY vs “readonly”
– Mostly done, now the browsers need to catch
up
• No SQL
• Verbose syntax – requests vs promises

17. … the alliance …
• https://github.com/axemclion/jquery-
indexeddb
• http://linq2indexeddb.codeplex.com/
• https://github.com/superfeedr/indexeddb-
backbonejs-adapter
• https://github.com/philikon/queryIndexedD
B
• http://gazeljs.org/
• http://aaronpowell.github.com/db.js/

18. … for the rest of us …

19. … for the rest of us …

20. ... The grand plan …

21. … The grand plan …
- IndexedDB Shim over WebSql
- http://nparashuram.com/IndexedDB/polyfill
- WebSql shims over Flash, etc.
- Or use the libraries

22. … the alliance …

23. … the alliance …
• Lawnchair
• persistence.js
• persistJS
• amplify.store
• localStorageDB
• realStorage
• YUI3 CacheOffline
• dojox.storage
• DomSQL
• Impel
• ActiveJS ActiveRecord
• JazzRecord
• picnet.data.DataManager
• ShinyCar
• Lscache
• Kizzy
• Artemia
• microcache.js
• Store.js

24. … always in motion is the future …
• Impact of ECMA.Next
– IndexedDB module
– Promises
– Iterators, Generators, Yield support
– Save binary blobs
– De-structuring assignments [x,y] = [1,2]
– Classes as Object Schema

25. http://nparashuram.com/IndexedDB
May the force be with you
@
http://nparashuram.com