An Introduction to Some HTML5 APIs

-or- another ADM Presentation by Dave

September 18, 2015

What is HTML5?

  • A markup language?
  • A series of javascript APIs?
  • I don't really know
  • A meaningless catch-all for ongoing developments of modern web browser or javascript technologies
  • Worthwhile because it allows the creation of platform-independent applications

Overview

  • Web browsers have been evolving very quickly in recent years in an effort to match "native" applications
  • This has given rise to many new standards
  • The standards are often collectively referred as "HTML5"
  • Which standards people consider "HTML5" is always changing
  • I'll be providing a non-exhaustive list of what I think some of the most important ones are today
  • The goal is to know what exists so you can look into them when you need them

HTML5 Tags

  • Series of more semantic tags to mark up documents
  • Evolution of HTML markup language
  • (ie. <article>, <section>, <navlist>, <video>, <input type="date">, etc)
  • Indisputably HTML5
  • Probably the least important thing under the "HTML5" umbrella

History Lesson

  • At one point, the W3C was pushing the XHTML 2.0 specification as the future of HTML
  • Many people were unhappy with the way it was going (citing ideology over practicality), and an unofficial group called "Web Hypertext Application Technology Working Group" (WhatWG) began working on their own specification called HTML5
  • As it evolved, they declared HTML5 a "living standard" and people began using "HTML5" to refer to both the markup language, and the evolving javascript standards that evolved in concert with them

History Lesson Part 2

  • At some point, it became clear that HTML5 won out over XHTML 2.0 since the XHTML group didn't have the backing of implementors or users
  • W3C adopted HTML5 (the markup language spec) and "finalized" it as the successor to HTML4
  • The term HTML5 is still more widely used to refer to the constantly evolving "living standard" including all related specs used to write modern web applications

data- attributes

  • Way to attach arbitrary data to a DOM object (ie. <span data-candid="342343">)
  • Easily accessible and modifiable through javascript (ie. element.dataset.candid)
  • Can store complex data (ie. objects), not just strings
  • Avoids needing to use hacks like adding data into an element's class or id attribute

Cross Origin Resource Sharing (CORS)

  • Way to allow cross-domain communication securely
  • Allows you to specify what hosts can bypass same origin security policy via HTTP headers
  • Many HTML5 APIs depend on it since most have a same origin request security policy as part of specification
  • The idea is that a server provides a whitelist of other domains that it considers safe, and the client will not allow requests to any except those
  • Prevents XSS attacks (though not for legacy specs such as the <img> tag)

WebWorkers

  • Workaround for javascript's single-threaded model
  • Allows you to create a new thread and communicate via messages
  • (New thread does not have access to certain features such as the DOM, but is still debuggable via browser dev tools)

IndexedDB (but not WebSQL)

"IndexedDB is a low-level API for client-side storage of significant amounts of structured data, which also enables high performance searches of this data using indexes. While DOM Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data" -- Mozilla
  • Persistent NoSQL database in a web browser
  • Provides async access to a key/value store

Not WebSQL

  • WebSQL was an attempt to standardize SQL in javascript
  • It was abandoned because all implementations used SQLite
  • Standards committee decided it wasn't standardizing anything, but just documenting SQLite
  • (Its deprecation is still fairly controversial)

History API

  • Provide a way to manage the web browser history and URL of an application
  • Can replace the URL shown to the user in the web browser, or add to history, and invoke code when the user pushes the back button
  • Intended to permit javascript applications that use AJAX to use back/forward buttons in a way that doesn't surprise the user
  • (Need to be careful that the URL you show the user is valid, otherwise page reload will fail.)

DOM Storage

  • Another persistent key-value store on the client side
  • Synchronous API for storing small amounts of data that must persist
  • Like cookies without a server
  • (localStorage persists, sessionStorage lasts for the web browser session)

Application Cache

  • A method of defining what resources your application depends on, so that a web browser can pre-cache them
  • Permits the creation of a web application that still works while offline (especially combined with the preceeding browser side storage APIs)
  • (Note the browser will prefer resources from its cache even when there's an active internet connection.)

WebGL

  • A javascript OpenGL ES 2.0 API for 3D graphics
  • Allows creation of applications like BrainBrowser

WebSockets

"WebSocket is a protocol providing full-duplex communication channels over a single TCP connection." -- Wikipedia
  • A javascript API for creating lower-level network sockets
  • WebSocket is negotiated over HTTP, and then switches to WebSocket protocol using Upgrade header
  • Does not directly connect to a port, uses same connection as HTTP connection for stream
  • Provides full-duplex data stream between client and server

asm.js

  • A subset of javascript that can be optimized or easily compiled to machine code
  • Allows the compilation of C or C++ code to javascript so that web browsers can execute it
  • (ie. minc.js?)

WebRTC

  • An API for peer-to-peer connection/data streams
  • Enables data streams between users (WebSockets is based on a client/server model)
  • Allow the creation of applications like Torrents or VoIP applications in the browser without plugins
  • Some concern about security and leaking of IP addresses in browsers that support it

Pointer Events

  • A specification for unifying mouse/stylus/touch events into a single API instead of having to handle each separately
  • Simplifies handling of user input
  • (Note: Apple refuses to support it despite W3C standardization, making it questionable if it will take off.)
  • (Note 2: There is a different, unrelated, and mostly unimportant CSS spec called "Pointer Events")

Summary

  • Web technologies have evolved significantly in the past few years
  • Many web technologies are still being created and/or standardized
  • The combination of all these technologies means we can now do almost anything in a browser that used to require native applications or plugins
  • Keeping up to date is difficult, but worthwhile

The end

Thanks for your time

(Presentations on the internet need kittens)