Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
HTML5: RECAP
 HTML5 ~= HTML + CSS3 + JavaScript API
 The ...
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
 sessionStora...
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
APPCACHE
 Create offline web applications
 Use a manifest...
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
INDEXEDDB
 Advanced key/value data
management
 Made of re...
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB APPLICATION APIS SUPPORT – WEB
STORAGE
http://caniuse.c...
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB APPLICATION APIS SUPPORT –
OFFLINE WEB APPLICATIONS
htt...
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’...
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
...
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
RESOURCES
 Session slide deck and demos –
http://sdrv.ms/1...
www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
THANK YOU
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfin...
Upcoming SlideShare
Loading in …5
×

Creating Data Driven HTML5 Applications

3,835 views

Published on

Creating Data Driven HTML5 Applications session was delivered in DevConnections 2013

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Creating Data Driven HTML5 Applications

  1. 1. Gil Fink Senior Architect SELA Creating Data- Driven HTML5 Applications
  2. 2. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS AGENDA  HTML5: Recap  Storing Data in the Client-Side  Q&A  Summary
  3. 3. 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
  4. 4. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS WHAT’S UNDER THE HTML5 UMBRELLA?
  5. 5. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS STORING DATA IN THE CLIENT-SIDE
  6. 6. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS DEMO Using HTML5 Storages and AppCache
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS WEB APPLICATION APIS SUPPORT – WEB STORAGE http://caniuse.com
  11. 11. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS WEB APPLICATION APIS SUPPORT – OFFLINE WEB APPLICATIONS http://caniuse.com
  12. 12. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS WEB APPLICATION APIS SUPPORT – INDEXEDDB http://caniuse.com
  13. 13. 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
  14. 14. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS QUESTIONS
  15. 15. 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
  16. 16. 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
  17. 17. www.devconnections.com CREATING DATA-DRIVEN HTML5 APPLICATIONS THANK YOU Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net

×