+ All Categories
Home > Technology > Creating Data Driven HTML5 Applications

Creating Data Driven HTML5 Applications

Date post: 08-May-2015
Category:
Upload: gil-fink
View: 2,547 times
Download: 0 times
Share this document with a friend
Description:
Creating Data Driven HTML5 Applications session was delivered in DevConnections 2013
17
Gil Fink Senior Architect SELA Creating Data- Driven HTML5 Applications
Transcript
Page 1: Creating Data Driven HTML5 Applications

Gil FinkSenior Architect

SELA

Creating Data-Driven HTML5

Applications

Page 2: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

AGENDA

HTML5: Recap Storing Data in the Client-Side Q&A Summary

Page 3: Creating Data Driven HTML5 Applications

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

Page 4: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

WHAT’S UNDER THE HTML5 UMBRELLA?

Page 5: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

STORING DATA IN THE CLIENT-SIDE

Page 6: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

DEMO

Using HTML5 Storages and AppCache

Page 7: Creating Data Driven HTML5 Applications

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

Page 8: Creating Data Driven HTML5 Applications

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

Page 9: Creating Data Driven HTML5 Applications

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

Page 10: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

WEB APPLICATION APIS SUPPORT – WEB STORAGE

http://caniuse.com

Page 11: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

WEB APPLICATION APIS SUPPORT – OFFLINE WEB APPLICATIONS

http://caniuse.com

Page 12: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

WEB APPLICATION APIS SUPPORT – INDEXEDDB

http://caniuse.com

Page 13: Creating Data Driven HTML5 Applications

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

Page 14: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

QUESTIONS

Page 15: Creating Data Driven HTML5 Applications

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

Page 16: Creating Data Driven HTML5 Applications

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

Page 17: Creating Data Driven HTML5 Applications

www.devconnections.com

CREATING DATA-DRIVEN HTML5 APPLICATIONS

THANK YOUGil FinkSenior Architect [email protected]@gilfinkhttp://www.gilfink.net


Recommended