Date post: | 08-May-2015 |
Category: |
Technology |
Upload: | gil-fink |
View: | 2,547 times |
Download: | 0 times |
Gil FinkSenior 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 YOUGil FinkSenior Architect [email protected]@gilfinkhttp://www.gilfink.net