Twenty One HTML5 features that every web app developer should know

What is the unique value that HTML5 brings to the world of multi-platform mobile apps? In this article, I will highlight 21 features of the HTML5 spec that every web developer should know about.

HTML5 comes with a pretty big bag of goodies that include:

  • More than 2 dozen new tags, Several new attributes,
  • Major enhancements to HTML forms via the addition of new attributes to the html ‘input’ tag (effectively, new kinds of form fields),
  • Several new kinds of events,
  • Support for Scalable Vector Graphics (SVG) & MathML,
  • Support for Offline access (through associated APIs)
  • New DOM objects and associated JavaScript methods
  • Security enhancements (through associated APIs)
  • Performance enhancements
  • …and many more things

Of this giant set of new features, there is a smaller subset that is particularly relevant to the development of multi-platform mobile apps.

What I will focus on in this article is this much smaller subset that mobile web app developers should care about.

Let’s begin with multimedia capabilities.

Support for audio and video tags:
The HTML5 <audio> and <video> tags let you embed audio and video content into your HTML pages without resorting to a native browser plugin such as Flash or Quicktime. The HTML5 audio and video tags bring multimedia capabilities to your mobile web app. The audio tag comes with many capabilities such as auto-looping the audio and auto-preload of media in the background. The video tag supports subtitles, track selection, setting of a poster image and automatic detection of the codec.

Web Audio JavaScript API
The Web Audio JavaScript API provides support for several advanced audio capabilities that are not possible with the HTML5 tag. These include support for multi-channel playback, channel splitting & merging, precise starting and stopping of sounds, dynamic volume control, application of special effects such as fade-in/fade-out of sounds, cross-fading of two sound clips, applying various kinds of sound filters to sound clips, 3-D spatialization of sounds so a sto create immersive effects and much, much more. The Web Audio API enhances the media capabilities of your web app to levels that were until recently possible only in native mobile applications via the use of specialized audio natively developed APIs such as OpenAL (Open Audio Library) and OpenSL ES (Open Sound Library for Embedded Systems). The W3C Web Audio API is considered to be an associated API. It is not part of W3C’s base HTML5 recommendation.

The Canvas tag, and support for WebGL graphics
The <canvas> tag lets you draw arbitrarily complex vector graphics and place raster images at arbitrary points on the screen. It also lets you render individual pixels.
The WebGL (Web Graphics Library) is a JavaScript library for rendering very sophisticated and highly interactive 2-d and 3-d graphics directly inside the web browser without making use of any native plugin. WebGL graphics make full use of the Graphics Processing Unit (GPU) provided acceleration to enable the rendering of highly realistic graphics experiences, that were until recently possible only in native applications. WebGL 1.0 is based on the OpenGL ES standard. WebGL is not part of the W3C HTML5 specification. However, it has been developed so as to be accessible via the HTML5 canvas.element. i.e. you first gets a handle on the canvas element via the document object, then you get a handle on WebGL context object from the canvas object, and you are all set to begin using WebGL.

In-built support for smooth, CPU optimized animations
Up through HTML4, animations done using JavaScript relied on the JavaScript functions window.setTimeout and window.setInterval timer to periodically refresh an animation frame. However, with these timer functions, it’s very difficult to determine the optimal refresh rate for an animation. Higher rates will put unnecessary load on the CPU, and make the page sluggish, while setting a lower than required refresh rate will make the animation jittery. Moreover, the animation may continue to run even if the browser window or tab is in the background or minimized. HTML5 provides an answer to these worries via the newly introduced method window.requestAnimationFrame. This method acts as a direct substitute for setTimeout or setInterval and allows the web browser to automatically adjust frame refresh rates for all the animations running on the page so that they are optimized based on current CPU load, other user interactions taking place on the page, and whether the page is minimized or backgrounded. The requestAnimationFrame feature is actually part of a W3C candidate recommendation that is distinct from the main HTML5 specification. However, it’s closely connected with HTML5 since it depends on the HTML5 version of the window object.

Full screen support
HTML5 lets you specify that the content of a tag needs to be shown in full screen mode via the element.requestFullScreen() function. This is especially useful for video and image tags to display a video or an image in full screen mode on the device. The requestFullScreen feature is being maintained in a separate specification by WHATWG.

srcset attribute in img tag
Being able to dynamically control how content is shown to make optimal use of the available screen resolution and size is one of the hallmarks of responsive web apps. HTML5 introduces a new attribute in the img tag called srcset which lets you set different images for different viewport widths and dpi. With srcset, you can tell your web app to show a smaller image on a low resolution 4.x inch screen phone and a larger, higher resolution version of the same image on something like iPad Air 2.

Support for device sensors

  • Geo location: HTML5 provides in-built support for getting the GPS or closet cell tower based location of the device by calling navigator.geolocation.getCurrentPosition
  • Device orientation event: HTML5 lets you fetch the angle of tilt of the device around the X, Y and Z axes by registering a listener on the window object for listening to deviceorientation events.
  • Device motion event: Similar to the deviceorientation event, you can register a listener on the window object for listening to devicemotion events. This event lets you fetch the acceleration of the device along the X, Y and Z axes.

HTML5’s support for device’s sensors such as accelerometer, compass and the gyroscope opens up a class of applications to the mobile app developer that were hitherto in the domain of native apps. These applications include gesture recognition such as a tap, shake etc, controlling games via hand movements, and geo-location based applications such as mapping, showing nearby places of interest and turn by turn navigation.

Enhancements to forms.
HTML5 adds support for a number of new form input types:

  1. number: Opens the numeric keyboard
  2. range: Displays a slider control
  3. date: Opens the date selector widget
  4. color: Opens a color picker
  5. datalist: displays an auto-complete suggestion list. Usually used with the text or search input types
  6. email: Opens the keyboard with the @ button
  7. url: Opens the keyboard with the .com button
  8. telSupported on iOS. Brings up the telephone dialer keyboard.
  9. search: Opens the keyboard with the Search button instead of the Go button

The type of the form input field automatically controls the type of widget displayed for data entry into the field. For e.g. Setting input type=date will let you enter the date via a date selector widget. Setting input type= number will pop-up a numeric keyboard on the device etc. This also minimizes the possibility of entering incorrectly formatted values into the input field. Overall these enhancements generate a more native app like experience to data input screen in your web app.

Server-Side Events
Server side events is a mechanism provided by HTML5, for a server to push data to the browser. To understand the concept, think about how push notifications work in iOS or the Google’s Cloud Messaging service. Server side events provides a similar means to do this kind of one-way push from a server to a HTML5 Web app. So far push messaging was the exclusive domain of native apps. With server-side events, this capability is also available just as easily in mobile web apps. Isn’t that neat? And while iOS or Android push notifications severely limit the type and length of the payload in the pushed message, in server-side events, there are no such restrictions. You can send plain text, XML, JSON, whatever you want in the pushed event as long as it is human readable.

Web Sockets
The HTML5 WebSockets API brings to the web realm the capacity to do full-duplex i.e. simulataneous both ways communication between clients and servers. Technologies such as Server Side Events and Comet (i.e. long polling HTTP connections) provide the means to keep an always connection open between the server and client. However, data can be transferred (pushed) in only one direction i.e. from server to client. With Web Sockets, the web app client and the server can simultaneously communicate with each other in realtime, in a way that akin to old style TCP sockets. By opening a Websocket connection from the web app to the server, you can exchange pretty much any type of data, text or binary. You also don’t need to worry about cross-domain restrictions. However you do need to make sure you trust the server you are talking to. The server code also needs to be written so as to identify and trust the origin url of the web app from which the web socket connection has been made to it.

Enhancements to XMLHttpRequest
Although strictly not part of the HTML5 spec, the enhancements made to the workhorse of AJAX, namely XmlHttpRequest, a.k.a. XHR seemed to have co-evolved with the HTML5 spec. Here are three enhancements to XHR that make life easier for mobile web app developers:

  • Support for cross domain requests: With this enhancement, a web app client can now make AJAX requests to domains other than the domain from which it was accessed. This capability os known as Cross Domain Resource Sharing or CORS. The client should of course trust the other domains that it wants to talk to as non-malicious servers. On the server-side, it is good security practice to test whether incoming requests are coming from origins that the server trusts.
  • Support for additional request and response types: XMLHttpRequest Level 1 limited you to set the Content-Type of the request and response to text/xml, application/xml or something ending in +xml. XMLHttpRequest Level 2 expands the possible Content-Types that can be sent and received to “text/html””arraybuffer”, “blob”, “document”, “json”, and “text”.
  • Support for additional events: The original XMLHttpRequest object supported only the readystatechange event. The latest version of XMLHttpRequest supports a plethora of events which give you, the developer, a much finer level of control over how you wish to react to the state changes. Additionally events supported are loadstart (data fetch has been initiated), progress (connection is transmitting data: can be used to show a progress bar on the app), abort (data fetch has been intentionally aborted by you), error (fetch failed), load (fetch succeeded), timeout (the timeout you had specified has expired) and loadend (the data fetch was completed with success or failure). In each case a new ProgressEvent object will provide you detailed information about the current state.

Interestingly, work on the XMLHttpRequest is being done in parallel by W3C and WHATWG. W3C has declared its intention to actively pursue the “convergence of XMLHttpRequest specification with the WHATWG”.

Web workers
Let’s say you want to render the beautiful Mandelbrot set in one area of the screen. Depending on what size pixels (points) you want to show, you may need to do a lot of computation to determine whether a point lies inside or outside the set. Experienced developers would perform this computation in a background thread so that the main UI thread won’t be kept waiting until the computation finishes. Once completed, a callback is invoked on the UI thread to render the inside v/s outside status of all pixels in one swoop. With HTML4, you simply couldn’t do such a background-foreground division of work in your web app without a lot of JavaScript headaches and kludges. The HTML5 Web worker specification solves this problem by letting you run a long running JavaScript method in the background, and then invoke a callback once the method finishes. In the case of our Mandelbrot set example, you would perform the set inclusion computation in the worker thread for all pixels on the canvas, and perform the task of rendering the inside-outside status of each pixel on the canvas in the callback when it is invoked.

[Offline] Storage
There are several kinds of storage mechanisms available in HTML5. Here is a concise description of each type:

  • Application Cache: This cache is not directly accessible to the web app developer for storing and retrieving data. Instead, access to it is controlled via a manifest file which helps you specify which HTML pages, images, media and scripts you wish to cache in the Application Cache when the page loads, so that next time the user views the page or runs a script, all these resources are quickly picked up from the cache instead of being downloaded from the server. The app cache object exposes a small number of methods (update, abort, swapCache) which let you have a small degree of control over its operation. Importantly, the app cache exposes a large number of events (onchecking, onerror, onnoupdate, ondownloading, onprogress, onupdateready, oncached, onobsolete) that tell you exactly what state the cache is in when your web app loads and the cache syncs.
  • LocalStorage: This is simple key-value storage that is useful for storing text strings or text serialized version of binary data.
  • SessionStorage: This is basically same as LocalStorage except that the life span of the stored key value pairs is limited to that of a web session. When the web session expires or is destroyed, so are the key-value pairs stored during that session.
  • WebSQL database: This is actually a full-fledged SQL database operating in the offline mode. In most browsers, it’s implementation is based on SQLite. Since 2010, W3C has stopped maintaining WebSQL standard. However, many mainstream browsers continue to support it since it’s so incredibly useful for supporting large quantities of structured information in the offline mode using the familiar syntax of SQL.
  • IndexedDB: The Indexed Database API, or IndexedDB in short is a W3C standard for storing large quantities of objects in the offline mode (i.e. on disk or native device storage). Objects are hashed using unique keys. Additionally, you can define one or more indexes on the fields of an object. This enables fast retrieval of the object from the hashtable by supplying the indexed value as a search parameter. For e.g. if your IndexedDB stores Person objects where each Person has the following fields: {ssn, firstname, lastname, gender, occupation, maritalstatus}, you can define ssn (social security number) as the unique key to store all Persons in your IndexedDB database. additionally, you can define an index on firstname, another index on lastname, yet another one on maritalstatus etc. Now you can quickly get the list of all Persons with firstname “Bub”, or lastname “Doodlebrain”, or all married Persons etc. from your DB.
  • The File System API: This JavaScript API lets your web app access a sandboxed version of the device’s local file system. It builds on File API. Presently it is supported only in Chrome. In fact, what you should know about this API is that W3C has officially discontinued support for it!

Web cryptography API
This API is being designed to provide out-of-the-box support via JavaScript for performing a number of cryptological operations such as hashing, signature generation and verification and encryption and description using a variety of algorithms. Instead of relying on third-party JavaScript libraries to perform these operations in the web client app, or having the server perform them, the thought is to provide in-built support within the HTML5 standard supported by browsers. As per W3C, this API is presently in a state of flux and it hasn’t yet reached an official recommendation stage.

So there you have it. These are the 21 features of HTML5 (and associated APIs) that will let your mobile web apps take head-on their native counterparts on a feature-by-feature bake-off. Happy developing!

Advertisements

One thought on “Twenty One HTML5 features that every web app developer should know

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s