Building Cross-Platform Apps with HTML5

Tweet Like

What is a cross-platform app? An application that reaches your customers through whatever device they have in front of them, wherever they are: while using a Windows* PC at work, an Apple* iPad* at the local coffee shop or an Android* phone on the go.

Why HTML5? Rather than becoming an expert in a deluge of programming technologies—C# and Windows APIs and Visual Studio*; Objective-C and iOS* APIs and Xcode*; Java* and Android APIs and Eclipse*; and so forth—you can take advantage of cross-platform HTML5 languages, APIs, and tools. Rather than porting code needlessly, you can focus your efforts on the things that really matter: developing the right features for your app and perfecting the user experience. Plus, because your code is written using HTML5, your app works on new devices as they hit the market.

If you’re using HTML5 today to build rich, interactive web pages (or web apps) then you’re already familiar with the benefits of using HTML5 as a tool to deploy across multiple browser and OS platforms. Cross-platform apps built on HTML5 are a logical extension to this model, where the platform is not a browser (such as Chrome*, Safari* or Firefox*) but the internal web runtime (aka webview) on the target platform.

Today’s cross-platform apps face opportunities and challenges. The multitude of device form factors continues to expand, with the display screen being one of the key components. Today’s cross-platform apps need to adapt to varying screen sizes, resolutions, aspect ratios and orientations. Today’s devices also offer many new capabilities, such as camera, accelerometer and GPS. Cross-platform apps should be able to take advantage of these capabilities in a portable manner and still deliver a rich and contextual user experiences across a wide range of devices.

HTML5 apps are not limited to web pages viewed in a browser. You can also package your HTML5 code and deploy it as a locally installed hybrid web app. This enables use of the same distribution and monetization channels as native apps, as well as the same installation and launch experience. Rather than running within a sandboxed browser window frame, your app runs in a full-screen webview, with full control over screen real estate and device capabilities.

This article will explain the following best practices for building cross-platform HTML5 apps in this new device-centric world:

Avoiding Platform-Specific APIs

Your HTML5 app is only cross-platform when each of your target platforms support all the APIs used by your app. This is important in practice for two main reasons:

  • First, just because an API is written in JavaScript does not mean it is cross-platform. JavaScript is no longer a tool solely for use by standards-based HTML5 browsers; it is a first-class programming language supported by some of the latest development tools, including Microsoft* Visual Studio*, Appcelerator* Titanium* and Node.js. Apps that use a platform-specific API, such as the JavaScript Windows Runtime APIs in WinJS or the Chrome* APIs found in Google Chrome Extensions, cease to be cross-platform applications.
     
  • Second, as those of you coming from the web world already know, the evolution of web standards is driven through experimental runtime implementations. This means that the HTML5 runtimes implemented on your target platforms will always support slightly different APIs. Popular and mature features converge over time with new features arriving continuously. This is great for innovation of the HTML5 programming platform, but a nuisance for app development. Therefore, HTML5 apps frequently need to utilize cross-platform JavaScript library APIs to mask the runtime implementation differences, and to fill in missing features.

One important cross-platform library API in the new device-centric world is Apache Cordova*1. Cordova enables access to device capabilities—such as camera, accelerometer and geolocation—for access in a consistent manner across multiple device platforms. Using Cordova, you can develop one HTML5 code base that runs everywhere, taking advantage of device capabilities to deliver rich and contextual user experiences, even though device capabilities are not yet available through the standard HTML5 APIs. Cordova provides access to native implementations for each target OS platform, taking care of the details of how to interface with that OS to gain access the device capabilities you want. Apps that use Cordova must be packaged as a hybrid web app (or hybrid HTML5 app); although the code that you develop is portable, your packaged app is device-specific. You can use tools, such as Adobe PhoneGap Build* and the Intel XDK, to package for multiple platforms simultaneously with a few clicks of a button. Plus, Cordova is implemented using web standards, so that it can serve as a migration path to the ultimate standardization of device APIs for HTML5 platform runtimes.

1 Earlier versions of the Cordova API and libraries were known as PhoneGap*. The name PhoneGap is now used for Adobe’s distribution of Apache Cordova.

Dynamically Adapting to Screen Parameters

To be truly cross-platform, your app should also provide a good user experience across a variety of screen sizes, resolutions, aspect ratios and orientations. There are many techniques available to help you adapt your HTML5 code to various displays.

Scaling

At the simplest, you can scale your UI components and fonts according to the screen dimensions and, optionally, adjust padding around the UI components to better accommodate various aspect ratios. You'd usually want to design for mobile first, then scale up from there to ensure usability on the small screens. Also remember that every device really has two sets of dimensions to design to: portrait and landscape. To achieve scaling you can use CSS relative units or rely on a responsive UI framework like jQuery Mobile or Sencha Touch to do the heavy lifting for you.

Responsive Images

Images may require more than simple scaling, as you may want to crop an image differently or load a different image asset optimized for a different resolution. Please see this guide to select the right responsive image solution for you, and this overview describing some proposed web standards for support of responsive images.

Responsive Layout

If your app's UI is made up of multiple sections you may want to consider a fluid layout, in which you rearrange (and even selectively hide) the sections based on the available screen real estate. Please see these responsive layout patterns and responsive navigation patterns for ideas on how to design your own responsive UI. To achieve fluidity, you can apply the responsive web design technique, or utilize one of many fluid grid systems to do the heavy lifting for you.

Managing “Quirks”

Despite best efforts—using cross-platform device APIs and employing responsive UI design techniques—differences in the behavior of platform runtimes will complicate cross-platform development. The fast evolution of the HTML5 standard means that not only are there differences in the level of implementation of HTML tags, CSS attributes and JavaScript APIs, but some of those features behave differently as a function of the target platform.

For example, a common complaint leveled at the Android platform is the inconsistent behavior of audio and video playback across various manufacturer implementations. Another example is the behavior of the HTML form input field of type=“datetime” which triggers the use of a native date picker on an iOS5 device but shows a simple soft keyboard on Android and older versions of iOS.

Some of these differences can be easily overcome by the use of cross-platform JavaScript library APIs that mask runtime implementation differences, such as Modernizr. Some CSS inconsistencies can be addressed through tools like Normalize.css or by using CSS preprocessors like LESS and SASS. However, some issues must be dealt with by writing platform-specific code, in which case you will need to detect the underlying platform. One way to accomplish this is via the device.name property provided by Apache Cordova.

Conclusion

What can we expect in the future for HTML5 development tools and resources from Intel? Intel is committed to bringing the best experience possible for developing cross platform HTML5 applications on Intel Architecture. We will offer tools and resources to educate, train and support developers through the HTML5 Portal of the Intel Developer Zone.

HTML5 technology applied to building device applications is new to many developers. Intel offers one of the world’s largest software developer programs and by channeling resources through our HTML5 portal we hope to provide access to the resources you need to develop and deliver applications that can run across platform boundaries. As an OS-neutral advisor, Intel can offer important HTML5 technical resources that will help you to write once and deploy across multiple platforms.

Legal Information

如需更全面地了解编译器优化,请参阅优化注意事项