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 available in modern browsers

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 that window

localStorage

Data spans multiple windows and lasts beyond the current session

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

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

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

To create offline web apps

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

Thank You Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net