1 of 24

HTML5 Hacks

OWP

​

Afshin Mehrabani

2 of 24

So, what’s HTML5?

a markup language used for structuring content for the Web.

3 of 24

​

​

​

​

Storage

4 of 24

Local Storage

​

It’s a way to store named key/value pairs locally.

​

  • Synonym: DOM Storage, Web Storage, …
  • 5 MB per origin in Google Chrome, Mozilla Firefox and Opera
  • 10 MB per storage area in Internet Explorer
  • 25 MB per origin on BlackBerry 10 devices
  • Can be customized by the user
  • W3C: 5 megabytes per origin is suggested
  • Only string data-type

5 of 24

Local Storage

​

{

‘key1’: ‘val1’,

‘key2’: ‘val2’,

‘key3’: ‘255’,

‘key4’: ‘<img src=”...” />’,

/* … */

}

6 of 24

Session Storage

​

It’s a way to store named key/value pairs locally.

​

  • localStorage and sessionStorage both extend Storage
  • Same as localStorage
  • Accessible while the window that created it is open
  • Alive while window variable is exist

​

​

7 of 24

Usage of Local/Session Storage?

​

​

  • Storing user’s data after signup (e.g. Name or Email)
  • For saving the state of a process (e.g. buying a ticket)
  • To prevent data lost in forms
  • To prevent multi access to a single form (e.g. by setting a boolean flag)
  • WideArea to save writer data
  • ...

8 of 24

Can I Use?

​

~91% total support

9 of 24

Why not using Cookies?

​

LocalStorage is not a replacement for Cookie.

​

  • Cookies are included with every HTTP request
  • Sending data unencrypted over the internet (without SSL)
  • Limited to about 4 KB of data

​

Client

Server

cookies

localStorage

GET /index.php 200

10 of 24

IndexedDB

​

Provides a way to store large amounts of data on user’s browser.

​

  • Synonym: WebSimpleDB, idb, ...
  • Using Indexes, Storing structured data
  • Built on a transactional database model
  • API is mostly asynchronous
  • Does not use SQL
  • There isn't any limit on a single database item's size
  • Unlimited size in Firefox, Chrome and Opera
  • 50 MB in Safari, 250 MB in Internet Explorer

​

11 of 24

IndexedDB vs. LocalStorage

​

IndexedDB is more powerful than LocalStorage

​

  • Local Storage is useful for storing smaller amounts of data
  • Can’t search in Local Storage keys
  • Local Storage does not support indexes
  • ...

​

12 of 24

Can I Use?

​

~59% total support

13 of 24

Web SQL

​

Basically sqlite embedded into the browser.

​

  • Fast and pretty feature-rich sql implementation
  • Based on SQL
  • select/insert/update/delete, you can do joins, inner selects, etc.

​

14 of 24

Can I Use?

​

~52% total support. Deprecated.

​

​

15 of 24

​

Performance

16 of 24

Why Web Worker?

​

Unresponsive JavaScript.

​

17 of 24

Web Worker

​

A JavaScript running in the background.

​

  • Performing an expensive task without interrupting the user interface
  • Web workers are able to utilize multi-core CPUs
  • Concurrent execution of the browser threads
  • Communication with postMessage between threads
  • They do not have direct access to the DOM (even console.log)
  • Two types of workers, shared and dedicated

​

18 of 24

Worker

Main

Worker

Worker

Worker

Worker

postMessage

19 of 24

Shared Worker

Main

Worker

Worker

Worker

Worker

postMessage

20 of 24

How to use Web Worker?

index.html (the main page):

var w = new Worker("worker.js");

​

w.onmessage = function (event) {

console.log("A new message: " + event.data);

};

​

worker.js (the worker):

postMessage("Hi, I’m a worker.");

​

onmessage = function (event) {

postMessage("A new message from main thread: " + event.data);

};

​

21 of 24

50K Array Bubble Sort

​

https://github.com/afshinm/50k

22 of 24

Can I Use?

​

~72% total support

​

​

​

23 of 24

return;

24 of 24

afshinm.name�

​

@afshinmeh

?