Understanding HTML5 mobile application development

What is an HTML5 app?

HTML5 apps offer write once, run anywhere mobile app development. They are a collection of webpages optimized for mobile devices that bring advanced capabilities for streaming video and audio data, handling graphics and animation and providing offline support. They also add semantic elements, form controls and multimedia components, as well as a number of new APIs that support Geolocation services, drag-and-drop operations, local application caching and more.

HTML5 seldom works alone. Most HTML5 apps integrate Cascading Style Sheets (CSS), which define how the HTML components render within a browser, and JavaScript, which includes the APIs for working with text, objects and arrays. All major browsers support these technologies, making it possible to implement Web-based apps across a wide range of devices.

How HTML5 mobile application development works

HTML5 mobile application development framework toolkits contain libraries of CSS and JavaScript files that developers can include in the HTML. Frameworks handle many of the issues that arise with building HTML5 apps.

Any organization faced with implementing mobile apps across multiple platforms should at least consider HTML5.

For example, a good framework can manipulate and recycle Document Object Model (DOM) elements to help improve performance. Frameworks also make it easier to implement behavior that relies on JavaScript, such as screen transitions or list scrolling. As a result it is easier for novices to create HTML5 apps, because a lot of the subtleties of development are already taken care of.

All frameworks are not the same, and IT admins must do their homework before committing to one. Each framework brings its own limitations and issues, which often appear as an application becomes more complex.

Slight differences in devices and browsers do affect how an application works in one environment over the other. As a result, developers sometimes build apps based on the lowest common denominator to ensure they function across all environments, which can hurt user experience (UX). Despite the potential issues, developers with proper training and experience should have no problem delivering secure, high-performance Web-based apps.

What to keep in mind when building HTML5 apps

Memory and performance limitations are key considerations for HTML5 mobile application development. Not only should developers carefully control page flow, but also how the DOM is implemented. The more complex the object model, the longer it takes to navigate.

Above all, developers should keep UX in mind. To ensure quality UX, HTML5 mobile apps should be lightweight so performance doesn't lag. In addition, admins should test the app on various platforms to account for different device types, screen sizes, browsers and operating systems. Most apps also need to support offline operations to account for disruptions in connectivity.

HTML5 apps vs. native apps

Unlike HTML5 apps, native apps are based on the native language of the platform the app runs on. And therein lies the challenge with native apps -- each platform requires its own app, and some platforms require different versions of an app to support different devices on that platform.

HTML5 is platform agnostic. As long as users access the app through a browser that supports each language's capabilities, the app should perform the same across platforms. In addition, administrators have only one code base to maintain and one package to deploy with HTML5. They can deliver bug fixes and updates whenever necessary and even perform live testing with their users without the distribution headaches of native apps.

Although HTML5 has come a long way, it cannot compete with all native capabilities, such as multi-touch gestures and seamless integration with built-in device components, such as GPS. Native apps usually win out when it comes to performance too, because they're part of the machine code. HTML5 apps can experience lengthy load times if they have not been carefully designed.

In addition, HTML5 apps are subject to the same risks as any Web app. Developers must guard against cyberattacks, improper API usage and malicious code accessing the device through Wi-Fi, Bluetooth or text messages.

Bringing HTML5 and native apps together

A hybrid mobile app is an HTML5 app that runs inside a native container. The app uses the device's browser to render locally hosted HTML pages, while connecting to device functions just like a native app. Hybrid apps can access features such as the calendar and contacts, as well as benefit from a single code base that spans multiple platforms.

In fact, hybrid apps can do just about anything a native app can, including support offline operations and multi-touch gestures. A hybrid app can even emulate the look and feel of a native app. However, hybrid apps still cannot perform as well as native apps because of the extra layers of abstraction.

Platforms such as PhoneGap have emerged for implementing hybrid mobile apps. The framework makes it possible to develop mobile apps using HTML, CSS and JavaScript, while taking care of the implementation details involved with delivering hybrid apps across multiple platforms.