HTML5 Apps Write Once, Run Anywhere?

The growth in HTML5 enthusiasts, programmers, and content creators was fantastic and truly indicative of how much interest there is in HTML5.

First, let’s define HTML5 and native apps. I refer to HTML5 apps as either:

Web apps – Apps that use only HTML5 code (HTML, CSS, and Javascript) and no native device features or APIs. Web apps can run in a browser anywhere on any device, desktop, server, etc. Web apps may also be “packaged,” meaning the web-runtime environment is bundled with the app and thus can be distributed to a mobile device through app stores.

Hybrid apps – HTML5 apps that utilize native device features, such as a camera or accelerometer, and use device APIs such as Apache* Cordova (cordova.org). These apps are also “packaged” for distribution by the various app stores.

Native apps are typically written in the native language of the device/platform operating system: Android* Dalvik* Java, iOS Objective C, Windows* 8 Phone & Windows* Store C++ or C#. Each platform provides a different toolset for their native app developers including the materials needed for app store submission.

The biggest problem with native apps is making them available on many different platforms. Large portions of the app may need to be rewritten in the native language of each platform you are targeting. HTML5 runs everywhere a browser does and does not require downloading and learning a new toolset per platform. There is a slew of cross-platform tool options to help create HTML5 apps such as Intel® XDK, Telerik* Icenium, Sencha, Application Craft, Adobe Edge Tools, including PhoneGap Build* amongst others.

So the solution to creating a cross-platform, runs-anywhere app is to write it in HTML5? Well, possibly, and this is the daunting part. There are some caveats that need to be considered for an HTML5 app to really perform well. It is important to understand these to help ensure that standards, tools and developers’ experience with HTML5 continues to improve. Here are three factors to keep in mind to create great HTML5 apps:

Responsive design. HTML5 enables one to write truly “responsive” apps. This is an app that will automatically resize based on the browser and screen size; automatically detect and change the user interface (UI) to reflect that of the platform on which the app is running; and will change according to the orientation of the device. Creating apps that respond in this way is the essence of “responsive design.”

This can be enabled by using any number of open source UI frameworks such as Intel’s App Framework, Adobe’s TopCoat, jQuery Mobile, or Twitter Bootstrap. For tools that enable “responsive design,” use the App Designer UI layout tool in Intel® XDK or Adobe Edge* Reflow*. For more on what “responsive design” means, checkout

HTML5 app performance is much different within the confines of a mobile web view in comparison to a desktop browser. Too many DOM manipulations, memory leaks, poor choices in JavaScript libraries and other issues can drag your app to a crawl. HTML5 requires a different approach to programming compared to a desktop, where resources are plentiful and fast.

HTML5 app functionality will vary among devices. Successful developers tend to select a judicious subset of HTML5 features to provide the functionality they need.

Graphics and animation. Despite the many naysayers, implementing graphics and animation in an HTML5 mobile app is actually quite possible. If you stick with 2-D graphics and keep it simple, you can build animated apps. Reaching for the highest speed 3-D graphics is best left to the native app developer, however. Hybrid canvas solutions are available from several vendors that improve upon the default performance of the standard web view canvas: Intel XDK’s App Game Interfaces, Ludei* CocoonJS* and a game maker platform such as Scirra* Construct 2.

HTML5 is ready and able to help build amazing, responsive apps. Just keep in mind these few things to improve an app, and save the effort of having to rewrite it for multiple platforms. The HTML5 tools and app frameworks are evolving rapidly, continually improving the development experience to allow HTML5 to reach its run anywhere promise.