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,652 views

Published on

Creating Data Driven HTML5 Applications session was delivered in DevConnections 2013

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,652
On SlideShare
0
From Embeds
0
Number of Embeds
623
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×