An Event Apart: HTML5 APIs

by Luke Wroblewski April 1, 2013

At An Event Apart in Seattle WA CA 2012, Jen Simmons walked through new capabilities coming to the Web and their impact in her presentation HTML5 APIs Will Change the Web: And Your Designs. Here's my notes from her talk:

  • HTML5 coverage tends to focus on new elements: articles, section, input types, etc. However, there’s a whole additional set of technologies coming that Web creators need to be aware of: HTML5 APIs and beyond.
  • These technologies are directly integrated into the browser, which means you don't need proprietary plug-ins that require your audience to download and install specific programs.
  • The Web is continually evolving and we need to evolve with it. Here's a few new realities redefining what the Web is today.

New Realities & New APIs

  • One of the big assumptions of the Web is that you have to be online to use it. In the future, though, more interactions will be possible offline. Cache manifest allows you to store assets and information on the client for offline access.
  • People can use your website to do work and have it saved locally without friction. Today its possible to set up a database on the client, not just on the server. Data can be saved to and read from these client-side databases. Local storage, session storage, and Index DB are early examples of local databases.
  • HTTP allows computers to connect to servers, which send files (HTML, CSS, images, etc.) down to clients. It’s a back and forth process. HTTP doesn’t natively support continuous connections. Once something is sent down, the client is no longer connected to the server so data and interactions can’t flow seamlessly. Servers traditionally store data for Web sites and applications. In order to read or write this data, clients need to connect to servers.
  • Web sites can update themselves automatically. Web Sockets can augment HTTP to create truly bi-directional connections that keep data flowing between a client and server. It also works with multiple clients (and/or devices) so you can enable real-time cross device interactions. HTTP is like using walkie-talkies for communication, Web sockets are like using phones.
  • One person can use your Web site while using two devices at the same time. Through Web sockets, you can split experiences across multiple devices.
  • Your interface can give helpful feedback for your interface on the Web.
  • Web audio allows you to play files in the browser but you can also make use of effects like reverb, echo, etc. through primitives. People can create and share these primitives. This allows your primitives to be applied to other people’s audio.
  • Your Web site can open files, understand the information inside, and do stuff with it. The files on your local system haven't integrated easily with Web browsers but now there are seven new APIs for dealing with file systems on the Web: file API, reader/writer/system, blob URLs & builder, drag and drop. Through these APIs files cannot only be used in the browser but they can be parsed, manipulated, written, and saved as well. Even information inside files can be extracted from in the client: metadata, file sizes.
  • Your Website can see your users and hear them. getUserMedia is a Javascript API that collects and creates audio and video media streams from peripherals (camera, microphone) in the Web browser. With media streams, you can display and manipulate real time feeds of video or audio in web pages.
  • With getUserMedia, you can create your own video chat and video in the browser feature
  • Speech input is a much less complete API but has interesting implications for all form elements. Just speak to input text into a field.
  • Your website can access superpowers in devices. Device APIs allow you to connect to device capabilities like vibration, battery status, contact lists, network information, calendars, tasks, and more in the Web browser.
  • Firefox OS is a complete Web-based operating system for phones. It taps into all these device capabilities through Javascript APIs.
  • But is it ready? While support is not perfect, APIs like appcache and Web sockets are actually well supported. Check out sites like caniuse and html5please for up to date information on what is possible in different browsers.
  • Using progressive enhancement allows you to start using these technologies today.
  • More changes are coming, new APIs and beyond. What will you do with this new power? An innovator is someone who wakes up to the constraints caused by false assumptions, and breaks out of them.