July 25, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Designing for Universal Portability

  • May 3, 2013
  • By David Talbot
  • Send Email »
  • More Articles »

From the moment the second operating system came into being, developers have been looking for a way to write their code once and have it run on every operating system in existence. When Java came into being, it did so with the hopeful promise of "write once, run everywhere." More than a decade later, Java has clearly not achieved this lofty goal and has failed to reach a critical mass of installed applications. Fast forward to the present day and there is only one platform on the planet that can run on Windows, Mac, Linux, iOS, Android, Windows Phone, and even Blackberry. That platform of course is installable HTML5.

Start with the Chrome Packaged App

Initiating your development of a highly portable HTML5 installed application as a Chrome Packaged App has a number of benefits. By starting your cross-platform app as a Chrome Packaged App your app will be more secure, better discipline will be enforced in your design and debugging will be backed by the best tools in the industry.

Adhering to tighter security restrictions from the beginning will insure a more secure application. Chrome Packaged Apps disallow multiple forms of potentially unsafe code from utilizing eval and other methods of loading dynamically unchecked code. PhoneGap doesn't enforce this restriction but complying with it from day one will insure that your app is ready to run everywhere.

Working within the sandbox model will enforce a greater discipline in the separation between your user interface tier and your application logic. JavaScript is a language that encourages a certain degree of sloppiness with its untyped variables, global scopes, and implicit creation of objects. By keeping your user interface inside of a Chrome sandbox, your UI code should stay well separated from your more portable JavaScript application code.

Rounding out the benefits are Chrome's excellent diagnostic and debugging tools that make developing complex HTML and JavaScript a breeze. Debugging apps in PhoneGap can be a painful and slow experience involving many builds to test each change in functionality. In a Chrome installed app, you can just right click your running app and choose "Reload App". Your app will instantly restart with all of the debugging tools right where you left them, with no waiting. If you had your DOM inspector open before the reload, it will be open after the reload. This kind of instant feedback is crucial for rapidly building and debugging an application.

Simple Responsive Design

A good, solid, modern responsive design is critical to creating a cross platform installed HTML5 app. If you want your UI to look great on any device and any screen size, start with simple, clean, structural HTML. Next, add CSS that can enhance your page to look great on small screens and older less capable browsers first. Then add sophisticated media queries to make your app look slicker and take advantage of bigger screens.

By targeting the least capable devices first with your CSS, you will be able to render on devices that don't understand media queries. By putting your more advanced CSS hidden carefully behind media queries you insure these instructions are only seen by more modern browsers that know how to read these rules.

Seperate Out the Platform Specific Pieces

HTML5 and JavaScript are mostly cross-platform capable when built to good "fail gracefully/responsive design" methodology that most developers have gotten pretty good at over the last decade. Where things turn into the wild west is accessing platform specific and "higher security" resources such as particular devices, non-sandboxed disk locations and some network capabilities.

In order to access these resources, it is recommended to create a separate JS file for each platform you want to target that provides a common interface to access these native resources.

Chrome Packaged Apps, Firefox Marketplace Apps, Windows Store Apps and PhoneGap all have different APIs for accessing native operating system resources past a certain line. All of these environments support the standard HTML5 API but have different APIs for requesting access to and getting a file handle pointing to non-sandboxed disk locations. This means you need to abstract out how the user picks a file outside of the sandbox but you can utilize the standard HTML5 file API to actually read, write and close the file.

Likewise the way you store key/value application data needs to be abstracted between platforms. Some support IndexDB, some support localStorage and Chrome supports chrome.storage.sync. They are both the same and different enough that you can interact with an abstraction layer but not so much the same that you can interact with them directly.

Conclusion

Chrome is the ideal platform to start building your cross platform installed HTML5 application. You can get up and running in minutes and get access to the Chrome Web Store. With careful planning, you can then take your app and recompile it to run on every kind of mobile device and operating system.

About the Author:

David Talbot has over 14 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at david@legendarycode.com


Tags: HTML5, Android, IOS, Chromebooks, Chrome Packaged Apps




Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel