HTML5
Features

Revisited



Anup Bishnoi

anup.bishnoi@nagarro.com

HTML5 is not ONE technology

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



HTML5 ~= HTML + JS + CSS

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

CSS3!

  • 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

OR

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.


Web SQL

  • 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
  • indexedDB.open

  • 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

Geo-Location

  • 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


Demo

Realtime

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

Multi-threading

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

Resources

Teach yourself some web

Demos

Learning Resources

Questions?

Do we still have time?

One last fun thing

Screen Capturing!

Only on Chrome Canary

THE END


Slides | Download | Video