Anup Bishnoi

HTML5 is not ONE technology

It is a set of 3 technologies that are
undergoing an overhaul simultaneously.


Why HTML5?

It's not about what's
possible in the latest browsers.

It's not about impressive new features.

It's about making an App.

An App needs

  • Interactive User Interface
  • Rich Graphics
  • Offline Capability
  • Hardware Access
  • State Management
  • Realtime Communication
  • Multi-threading

Interactive User Input

Killing jQuery Plugins

DOM Access

  • document.getElementsByClassName
  • document.querySelector
  • document.querySelectorAll

  • element.className

  • element.classList.add
  • element.classList.remove
  • element.classList.toggle
  • element.classList.contains

Semantic Tags

  • header
  • footer
  • nav
  • section
  • article
  • aside
  • time
  • menu
  • meter
  • progress

Form Input

  • email
  • date
  • range
  • search
  • tel
  • color
  • number
  • x-webkit-speech

Drag and Drop

  • draggable
  • dragstart
  • dragend
  • drop

  • dataTransfer.getData
  • dataTransfer.setData
  • dataTransfer.effectAllowed

  • dataTransfer.files (drag to Desktop)

User Media (Webcam)

  • navigator.getUserMedia

  • capture=camera (for snapshot)
  • capture=camcorder (for video)

  • URL.createObjectURL(stream)
  • URL.revokeObjectURL(stream)

  • video.onloadedmetadata

User Media (Microphone)

  • navigator.getUserMedia({ audio: true })

  • new webkitAudioContext()
  • audioContext.createMediaStreamSource

  • audioContext.createAnalyser
  • audioContext.destination

  • Only on Chrome Canary

Rich Graphics

Sweeter than Desktop apps


  • transform
  • translate
  • transition
  • perspective
  • border-image
  • display: flex
  • gradient
  • text-shadow
  • box-shadow

Don't miss the CSS3 Talk

JS Animations

  • Recursive setTimeout
  • setInterval(1000 / 60)
  • window.requestAnimationFrame

Leave the best frame interval to the browser.

requestAnimationFrame provides access to
the actual browser paint cycle.

Automatically stops on inactive tabs.

Native Video

  • <video>
  • autoplay
  • controls
  • loop
  • poster

  • <track>
  • Subtitle vtt files
    (Web Video Text Track)

Native Audio

  • <audio>
    Same options as <video>
  • canPlayType
  • autobuffer
  • Multiple <source> support

  • audioContext.decodeAudioData
  • audioContext.createBuffer

Lyrics for the HTML5 song

Canvas 2D

  • canvas.getContext('2d')
  • context.drawImage
  • context.lineTo
  • context.stroke

  • canvas.toDataURL
    (to save as image)

There is no DOM inside canvas,
just the <canvas> element

All drawing actions on the canvas
overwrite the whole scene

Webgl (Canvas 3D)

  • Vertex Shaders
    (provide the clipspace coordinates)
  • Fragment Shaders
    (provide the colors)

Clipspace is simply the drawing boundaries

The API is actually a 2D API,
but the shaders allow you to do the math
and make it look like 3D

Learn about Typed Arrays first

Inline SVG

  • rect, path, line
  • linearGradient, animate, text, etc
  • SVG Elements become part of the DOM
  • Bind events normally
  • Apply CSS properties and transitions
  • textPath to wrap text along arbitrary paths

<img> src can simply be .svg files,
hence enabling SVG sprites

Canvas vs SVG

  • Raw performance: Canvas
  • Rich user interaction: SVG
  • Better mobile support: Canvas
  • Better desktop support: SVG
  • Constant memory with high complexity: Canvas
  • Easier to style and manage in DOM: SVG

Canvas for non-interactive animations / drawing

SVG for heavy user interaction (tapping, dragging)

Hybrid Approach: Implement interactive areas with SVG,
and animations with Canvas

Offline Capability

Work now, sync later

Online | Offline

  • navigator.onLine
  • online event on window
  • offline event on window

Two common approaches:

In absence of connection,
use localStorage and sync up later


Always use offline storage in running app,
sync up regularly with server

Web Storage

  • window.localStorage per domain
  • localStorage.getItem
  • localStorage.setItem

  • window.sessionStorage per session
  • sessionStorage.getItem
  • sessionStorage.setItem

This is a synchronous API.


  • window.openDatabase
  • database.transaction
  • transaction.executeSql

Asynchronous API

Storage Quota varies among browsers
Mobile Safari has a 50 MB hard limit

Available on Android and iPhone

See this tutorial by FT Labs

Indexed DB

  • window.indexedDB

  • db.createObjectStore
  • db.objectStoreNames.contains
  • db.deleteObjectStore

  • Asynchronous Key Value Store
  • Is supposed to replace Web SQL,
    but no support on mobile yet

Application Cache

  • <html manifest="html5-app.appcache">
  • window.applicationCache
  • applicationCache.status
  • applicationCache.update()
  • updateready event
  • applicationCache.swapCache()

  • Save application resources on the browser
  • Changing contents of manifest
    reloads all files in cache
  • Deleting manifest obsoletes cache

File System Access

  • requestFileSystem
  • fs.root.getFile
  • file.createWriter

  • writer.write
  • writer.onerror
  • Demo

A sandboxed file system is created for each domain.
The user's file system is not accessible

Hardware Access

The web is switching to Mobile


  • navigator.geolocation
  • geolocation.getCurrentPosition
  • geolocation.watchPosition
  • geolocation.clearWatch

  • position.coords
  • coords.latitude
  • coords.longitude

Phonegap's geolocation is essentially a polyfill,
implementing the same API for devices
that don't have it in HTML5

Device Orientation

  • deviceorientation event on window
  • event.alpha
    Rotation along Z Axis:
    Angle difference on the Compass
  • event.beta
    Rotation along X Axis:
    Front-to-back tilt angle
  • event.gamma
    Rotation along Y Axis:
    Left-to-right tilt angle

Works without Phonegap, all in HTML5!

Mozilla has a different implementation

Device Motion

  • devicemotion event on window
  • event.acceleration
    Separately provided along all 3 axes
  • event.accelerationIncludingGravity
    Some devices can only return this

Works without Phonegap, in pure HTML5!

Mozilla has a different implementation
which is expected to merge in the future

State Management

Remember your footsteps

History API

  • history.state contains the current state
  • history.pushState pushes a new state to stack
    (just like clicking a new url)
  • history.replaceState replaces the current state object
  • onpopstate fires on forward/back actions
  • No need to store trivial UI state in URL
  • Absolute-looking URLs, instead of hash-based
    Server component needed if URL can be bookmarked



Post-back is passe

Web Sockets

  • new WebSocket (ws://)
  • webSocket.onopen
  • webSocket.onmessage
  • webSocket.send
  • webSocket.onclose
  • WebSocket Secure (wss://)

Check out Socket.IO

This presentation's remote is
working on WebSocket


Web Workers

Multi-threading in JavaScript!

  • new Worker
  • message event on worker
  • worker.postMessage

  • Can only pass serializable data
  • No window in worker context, but self
  • Communication only by message events


Teach yourself some web


Learning Resources


Do we still have time?

One last fun thing

Screen Capturing!

Only on Chrome Canary


Slides | Download | Video