SELA DEVELOPER PRACTICE
December 20-25, 2013
Gil Fink
Creating Data-Driven HTML5
Applications
Agenda
HTML5: Recap
Storing Data in the Client-Side
Q&A
Summary
HTML5: Recap
HTML5 ~= HTML + CSS3 + JavaScript API
The future of the web
Still under development
But a lot of features are...
What’s Under the HTML5 Umbrella?
Storing Data in the Client-Side
Demo
Using HTML5 Storages and AppCache
Web Storage
Key/value string storage
Simple API
sessionStorage
Data is accessible to any page from the same site
opened in...
AppCache
Create offline web applications
Uses a manifest file to configure the cache
Introduces API to interact with cache...
IndexedDB
Advanced key/value data management
Made of records holding simple values and
hierarchical objects
Enables
Storag...
Web Application APIs Support – Web
Storage
http://caniuse.com
Web Application APIs Support – Offline
Web Applications
http://caniuse.com
Web Application APIs Support –
IndexedDB
http://caniuse.com
What We Saw
Web Storage
AppCache
IndexedDB
We didn’t cover other storage APIs such as
File API
FileSystem API
Questions
Summary
You can start depending on client-side storages
Will help you:
To decrease the load on server-side and databases
T...
Resources
Session slide deck and demos –
API specs – http://www.w3.org/TR/webstorage/
http://www.w3.org/TR/IndexedDB/
http...
Thank You
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net
Upcoming SlideShare
Loading in...5
×

Creating Data Driven HTML5 Applications

768

Published on

My DevWeek 2014 session about storages options in HTML5.

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

No Downloads
Views
Total Views
768
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Creating Data Driven HTML5 Applications"

  1. 1. SELA DEVELOPER PRACTICE December 20-25, 2013 Gil Fink Creating Data-Driven HTML5 Applications
  2. 2. Agenda HTML5: Recap Storing Data in the Client-Side Q&A Summary
  3. 3. HTML5: Recap HTML5 ~= HTML + CSS3 + JavaScript API The future of the web Still under development But a lot of features are available in modern browsers
  4. 4. What’s Under the HTML5 Umbrella?
  5. 5. Storing Data in the Client-Side
  6. 6. Demo Using HTML5 Storages and AppCache
  7. 7. Web Storage Key/value string 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. AppCache Create offline web applications Uses a manifest file to configure the cache Introduces API to interact with cache events and the navigator.onLine property
  9. 9. 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. Web Application APIs Support – Web Storage http://caniuse.com
  11. 11. Web Application APIs Support – Offline Web Applications http://caniuse.com
  12. 12. Web Application APIs Support – IndexedDB http://caniuse.com
  13. 13. What We Saw Web Storage AppCache IndexedDB We didn’t cover other storage APIs such as File API FileSystem API
  14. 14. Questions
  15. 15. 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. Resources Session slide deck and demos – 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. Thank You Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×