At the HTML5 DevCon in San Francisco, the enthusiasm toward HTML5 as a development platform was both fantastic and daunting. The growth in HTML5 enthusiasts, programmers and content creators was fantastic and truly indicative of how much interest there is in HTML5.
The daunting part, however, is recognizing how much there is to learn about HTML5 to truly realize its “write once, run everywhere” promise. In particular, how does the HTML5 community (tools vendors, standards bodies, experienced developers) help these new HTML5 app developers have a great experience and make it equal to, if not better, than native application development experiences? Here are some thoughts about it.
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 are 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 continue 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 http://alistapart.com/article/responsive-web-design. For a quick video on one way to implement media query using the App Designer UI layout tool, visit: http://software.intel.com/en-us/html5/articles/xdkdocs/app-designer-index.
- Performance. HTML5 app performance is much different within the confines of a mobile webview 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. A few resources for understanding these issues are available here: http://floatlearning.com/2011/06/the-cost-of-reflows-on-a-web-app/ and http://maxogden.com/fast-webview-applications.html. HTML5 app functionality will vary among devices. Please refer to http://caniuse.com to understand the level of support among the 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 webview 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.
Now, the only question is: where is anywhere? Is it a phone, tablet or Ultrabook? Those are obvious. What about a television, a car’s infotainment system or the Internet of Things?
Joe Wolf is the Product Manager for the Intel XDK.
