November 23, 2014
Hot Topics:

Taming Android with HTML5: Why HTML5 is a Great Choice for Android Development

  • October 11, 2013
  • By David Talbot
  • Send Email »
  • More Articles »

Introduction

Intel Custom content

According to Gartner, Android is the most popular mobile operating system on the planet. It powers most smartphones and, according to Canalys, now enjoys a majority market share in tablets (53%). Part of what drives Android's popularity is its variety. There is an Android device in the size and form factor for almost every user. Want a giant 13–inch tablet with a detachable keyboard? Android has you covered. If a smart watch is more your speed, a Galaxy Gear smartwatch fits the bill.

While this diverse array of devices makes users happy, it can create many headaches for developers. The combination of screen sizes, resolutions, CPU architectures, and operating system versions creates a veritable gauntlet for the developer creating a native Android app. Fortunately, HTML5 makes working with the diverse Android army quick and easy.

Waiter, there are Jelly Beans in my Froyo

Android was first widely distributed in 2009. Manufacturers release devices and typically only update the operating system once or twice before the manufacturer abandons it to focus on newer hardware. As a result of this behavior, according to a survey by OpenSignal of over half a million Android Devices, the version called Gingerbread (2.3.x) still holds the largest market segment share (34.1%).

Android Fragmentation

This can pose a challenge for the typical Android developer as the Android SDK is operating system specific. This means that if you develop your app using the 4.0 SDK (Ice Cream Sandwich), your app won’t run on a 2.3 (Gingerbread) device. This can put a developer in an awkward position. On one hand, you want to use the latest and greatest SDK, on the other hand you want your app to get as many downloads as possible.

With HTML5, you don’t have to choose. You can build your application using powerful HTML5 regardless of the Android operating system version.

A Diverse Android Army

The differences in Android devices run more than skin deep. In the heart of any Android device is the CPU manufactured by Qualcomm, PowerVR, NVidia, MediaTek, Intel and more. Depending on which operating system features your application needs to use, the native Android SDK might not work with the particular device being targeted.

HTML5 provides APIs to do many things typically thought to be native operating system functions. HTML5 includes robust APIs for key/value storage, file system IO, and even GPS access through the geolocation API.

To access native operating system functions that don’t have a standard HTML5 interface, the Apache Cordova framework provides an interface for your app to access native operating system resources like the camera and accelerometer on any device.

All Shapes and Sizes

Android devices come in all sizes ranging from Samsung's new Gear smart watch up to the 13 inch and larger tablets. Adding to the complexity, resolutions range from the 2560x1600 Nexus 10 to 240x320 feature phones. The large variation in size and resolution can be difficult to address elegantly using the Android SDK, especially if compatibility with older devices is required.

To handle this using the Android SDK, you would probably use a Linear Layout or Grid View. These kinds of layouts work reasonably well if you are willing to view your application in terms of the user needing the scroll to see everything in the view.

Fortunately, HTML5 provides a better way of handling diverse screen sizes by using responsive design. Responsive design has taken both the Internet and HTML5 Apps by storm. Responsive design is the combination of simple structural HTML enhanced by CSS media queries to utilize more space on bigger screens while shrinking or eliminating less important elements on smaller screens.

When responsive design is done correctly the user has a fluid experience with the app across multiple devices even when they re-orient the screen. It is hands down the best way to address diverse screen size/resolutions on any operating system.

Portability to Other Platforms

The great promise of Java was "write once, run anywhere." Unfortunately, Java fell short of achieving this dream for a variety of reasons including Apple aggressively working to keep non-native runtimes like Flash and Java off of iOS. Some cross-compilers can allow the creation of application targeting both Android and iOS, but only HTML5 can run in mobile operating systems and on the Internet in browser.

On mobile operating systems like Android, iOS, Windows Phone and Blackberry, HTML5 applications are usually hosted inside Apache Cordova (aka PhoneGap). Apache Cordova fills the role of interfacing your HTML5 application to the native operating system. This includes defining your app’s icon, loading screen and providing JavaScript APIs to access native operating system hardware.

To create an application in Chrome’s Web Store or Windows 8’s Windows Store, you just need to create a manifest for the app store that defines your application’s name, icon and security requirements.

Rounding out cross-platform support, HTML5 apps can, of course, run on the Web. The first time you start a new project with HTML files instead of .ASPX or .PHP will require a minor leap of faith but rest assured your app will indeed work without server side generated HTML.

Designing an installable HTML5 app just requires you think about your app in a more client-server mentality. In an installable HTML5 world, your server-side language serves the role of providing REST APIs to your back-end instead of generating HTML.

A well-tooled machine

There are numerous mature tools and IDEs that can help you create your HTML5 app.

Microsoft-centric developers can use Visual Studio, which has, perhaps the strongest auto-completion support for JavaScript out there, including the ability to dynamically complete functions you’ve written. Visual Studio has the ability to connect to and debug Internet Explorer, but to debug other browsers you’ll need to use those browser’s integrated debugging tools outside of the IDE.

Adobe provides multiple products including Edge and DreamWeaver to create sophisticated HTML5 apps. Adobe also offers the PhoneGap variant of Apache Cordova integrated into a cloud-based build service.

Chrome sets the gold standard for browser debugging and profiling tools. To debug the HTML and CSS, you can right click elements in-browser to inspect and see exactly what CSS rules are being applied to that element. You can debug and step through JavaScript in the sources tab or profile the CPU and memory utilization in the Profiles tab.

The Intel XDK new IDE provides sophisticated HTML, CSS and JavaScript editing capability paired with full diagnostic features. It has a wide array of emulators for multiple iOS, Android and Windows 8 & Windows Phone 8 devices. On the build and deploy side, it has a cloud-based build services for more platforms than are available in Adobe’s PhoneGap build service.

When it comes to debugging multi-platform HTML5 apps, Intel XDK new is unmatched. It allows you to use Chrome’s amazing debugging tools inside of multiple emulated devices and even allows you to remotely connect to real hardware to debug it over Wi-Fi.

Gentlemen, Start Your Browsers

The performance of HTML5 applications can be very close to the speeds of native performance if they are crafted correctly.

The HTML5 application absolutely must be installed on the device. Apps built by just pointing Apache Cordova or an embedded WebView to a website hosted on the Internet consistently provide a poor user experience. If your app needs to download its user interface over the Internet every time the user clicks something it will not meet their expectation of a near-instant response. To gain near-native speeds, all of your HTML, JavaScript and CSS must be installed on the local device so it can be run as soon as the user clicks on it.

Most mobile apps load and save data from a server on the Internet. In order to keep your app as responsive as possible, you will want to store a cache of your data locally and refresh your data asynchronously. This will allow your app to render its UI immediately while asynchronously updating over the internet.

The complexity of the HTML makes a big difference in how many CPU cycles are necessary to render your user interface. It’s best to keep your HTML as structurally simple as possible with as few nested levels of tags as possible. Deeply nested HTML tables, for example, are notoriously poor performers.

If you are using Chrome or the Chrome tools leveraged in the Intel XDK new you can use the CPU profiling capability to identify performance issues in your JavaScript. To tune your HTML/CSS rendering performance, choose “Settings”->”General”->”Show Paint Rectangles.” With this option enabled, you will see red rectangles painted on the screen in areas as they are repainted. The smaller you can make those update rectangles, the more responsive your user interface will be.

What About Facebook?

Facebook made some waves last year when it publicly announced that it was switching from a HTML5/native hybrid approach to a pure native approach. The stated reasons were difficulty profiling/optimizing the JavaScript code and eking out the last bit of performance it could only get from a native application.

Although both of these points are valid, they are less relevant today than they were at the time that Facebook made the switch. Fresh tools like the Intel XDK new very effectively address the debugging and profiling issues. On the performance end, the typical device sold today is three times or more faster than when Facebook made the switch.

Conclusion

HTML5 allows you to write an application once and quickly deploy it to almost every operating system in existence. The responsive design capabilities of HTML5 are particularly well suited to the diverse screen sizes found on Android devices. With a variety of tools available, such as the Intel XDK new IDE, you can deliver a great experience on Android using the open standards of HTML, CSS and JavaScript!

Related Articles

 

This was independently written by the author; however, it is sponsored by Intel


Tags: HTML5, Android




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel