SlideShare a Scribd company logo
Gil Fink
Senior Architect
SELA
Creating Data-
Driven HTML5
Applications
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
AGENDA
 HTML5: Recap
 Storing Data in the Client-Side
 Q&A
 Summary
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
HTML5: RECAP
 HTML5 ~= HTML + CSS3 + JavaScript API
 The future of the web
 Still under development
 Supposed to be ready at ~2014
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WHAT’S UNDER THE HTML5 UMBRELLA?
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
STORING DATA IN THE CLIENT-SIDE
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
DEMO
Using HTML5 Storages and AppCache
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB STORAGE
 Key/value storage
 Simple API
 sessionStorage
 Data is accessible to any page from the
same site opened in that window
 localStorage
 Data spans multiple windows and lasts
beyond the current session
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
APPCACHE
 Create offline web applications
 Use a manifest file to configure the
cache
 Introduces API to interact with cache
events and the navigator.onLine
property
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
INDEXEDDB
 Advanced key/value data
management
 Made of records holding simple values
and hierarchical objects
 Enables
 Storage of large numbers of objects locally in
the browser
 Fast insertion and extraction from the store
 Asynchronous/Synchronous API
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB APPLICATION APIS SUPPORT – WEB
STORAGE
http://caniuse.com
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB APPLICATION APIS SUPPORT –
OFFLINE WEB APPLICATIONS
http://caniuse.com
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB APPLICATION APIS SUPPORT –
INDEXEDDB
http://caniuse.com
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WHAT WE SAW
 Web Storage
 AppCache
 IndexedDB
 We didn’t cover other storage APIs such as
 File API
 FileSystem API
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
QUESTIONS
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
SUMMARY
 You can start depending on client-side
storages
 Will help you:
 To decrease the load on server-side and
databases
 To create offline web apps
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
RESOURCES
 Session slide deck and demos –
http://sdrv.ms/1ekp929
 API specs –
http://www.w3.org/TR/webstorage/
http://www.w3.org/TR/IndexedDB/
http://dev.w3.org/html5/spec/offline.html
 My Website – http://www.gilfink.net
 Follow me on Twitter – @gilfink
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
THANK YOU
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net

More Related Content

Creating Data Driven HTML5 Applications