Your SlideShare is downloading. ×
Creating Data Driven HTML5 Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Creating Data Driven HTML5 Applications

2,536
views

Published on

Creating Data Driven HTML5 Applications session was delivered in DevConnections 2013

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
2,536
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×