Taming Android with HTML5: Why HTML5 is a Great Choice for Android Development
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%).
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.
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.
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.
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.
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.
What About Facebook?
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.
- Leverage Your HTML5 Savvy to Build Commercial, Cross Platform Apps and Games
- Supercharge Your Slow Android Emulator
This was independently written by the author; however, it is sponsored by Intel