HTML5 app myth – "build once, works everywhere"

There are a number of reasons why building a hybrid app with HTML5 and Javascript is potentially a good idea. “Build once, works everywhere” is not one of them.

A major problem with mobile development is fragmentation. In the old days, before the rise of the smart, touch screen, device, life for those developing an online presence was simple. Web content was consumed on a PC or a Mac and for all intents and purposes, in the online world, they were the same thing. However, in the mobile area you have four major players to contend with; Apple’s iOS, Google’s Android, RIM’s Blackberry, and Microsoft’s Windows Mobile. Each of these platforms uses a different native toolset which to create your apps (Obj C, Java, C#). But it doesn’t stop there. Even within ecosystems life is fragmented. Smartphones and Tablet devices all have different hardware, features, and screen sizes. Custom building solutions specific to each environment is prohibitively expensive to all but the craziest start-ups swimming in Californian money. So what are we to do?

HTML5 is the battle cry!

The web is build once works everywhere

Of course, those of us who have been working with the web for many years are well used to the luxury of ‘build once, works everywhere.’ HTML, CSS, and even Javascript are cross platform technologies. However, we know from bitter experience that there is a catch. While the very first website ever built, whatever that may be, would be accessible on the very latest machine and web browser. And, the newest website on the internet today could be accessed on an archaic machine / browser combination the adage of ‘build once, works everywhere’ doesn’t quite ring true.

The truth of the matter is that while websites should work on any browser / machine combination; past, present or future, a lot of optimisation needs to take place to make it behave as you would like it to, cross browser and cross device. Over the last few years, how many hours have you spent trying to get your creations to work nicely with IE6?

…the adage of ‘build once, works everywhere’ doesn’t quite ring true.

It has always been true that ‘build once, works badly everywhere’ was closer to the real life situation in the world of web. IE6, IE7, IE8, IE9, FF3, FF4+, Safari, Chrome, Opera and others, in both their PC and Mac variants have always required a degree of optimisation. The web has always been build once, yes, but optimise, rather than works, everywhere is closer to the truth.

And then we looked at IE6

When thinking in terms of website projects, where you spent your optimisation resources varies from project to project. If you are a public sector organisation in the U.K. then you may well still be running Windows XP with IE6 and it is unlikely that you can skimp on the IE6 fixing. However, if your user base is younger and using modern technology you may be able to ignore anything below IE9, but the mobile browser experience becomes important.

What does this have to do with mobile and apps you ask? Well, as I’m sure you’ve guessed, the principle is the same. There are a number of reasons why building a hybrid app with HTML5 and Javascript is potentially a good idea. You can read about some of them in a recent post of mine. However, doing so because it automatically makes your app cross platform and work everywhere is not one of them. At least, it’s not the whole story.

Build once, works badly everywhere is not an option in the mobile world.

Each platform has it’s own flavour. Apps running each environment feel and behave in a certain way. These expectations have been set by venders and if your app does not meet the users, often unrealistic, expectations it can have far reaching negative consequences for reasons that I have discussed before. As such, the same optimisation process, for each platform, is a vital part of any hybrid app project. Build once, works badly everywhere is not an option in the mobile world.

Build once optimise everywhere

It’s important to put this into context. In much the same way as a standard web project, your user base will favour some platforms over others. There is no point in optimising for RIM, for example, if none of your users have a Blackberry device. Those of us who have bug fixed ourselves into oblivion over IE6 in the past know how easy it can be to use up a lot of time in optimisation.

Make sure that you know your audience before you start the process. Make sure you have good stats on who they are, and what platforms they use so that you can make informed decisions about how to prioritise your optimisation budget. In many cases, while mobile access to services is growing at a phenomenal rate, it’s still a relatively small part of an organisations online engagement. This will change over time, but, at the moment, there is an opportunity to focus on key platforms before taking the time to optimise for edge cases.

Those of us who have bug fixed ourselves into oblivion over IE6 in the past know how easy it can be to use up a lot of time in optimisation.

HTML5 offers a fantastic opportunity to reduce your development budget if you are looking at pushing apps to multiple platforms. However, be aware, ‘build once, works everywhere’ is misleading at best. ‘Build once, optimise everywhere‘ is what to have in mind.

Get in touch

If you would like to discuss this further get in touch with Rob via email or Twitter.

  • Mike Hopley

    This is a good article, and Rob clearly knows his stuff. However, I found it difficult to read in places. For example, take this paragraph:

    “Of course, those of us who have been working with the web for many years are well used to the luxury of ‘build once, works everywhere.’ HTML, CSS, and even Javascript are cross platform technologies. However, we know from bitter experience that there is a catch. While the very first website ever built, whatever that may be, would be accessible on the very latest machine and web browser. And, the newest website on the internet today could be accessed on an archaic machine / browser combination the adage of ‘build once, works everywhere’ doesn’t quite ring true.”

    I had to read this paragraph several times before I could work out what Rob intended. The sentence and paragraph structure is confusing; the crucial contrast (“the adage…”) sneaks in at the end, with no punctuation or conjuction to signal it (you need to look all the way back to “While” in the previous sentence). A little copy-editing could help; for example:

    “Experienced developers are used to the luxury of ‘build once, works everywhere’. HTML, CSS, and Javascript are cross-platform technologies. You can use the latest browser to access the first website ever built, or use an ancient browser to access a brand-new website. However, we know from bitter experience that there is a catch.”

    This writing is clearer, for several reasons:

    — It uses fewer words.
    — The sentences are shorter.
    — It makes only one contrast (“However…”), whereas the original changes direction three times.
    — The sentence structure and punctuation reinforce the intended meaning, rather than undermining it.

    It might even be better to move the last sentence (“However…”) to the start of the next paragraph. That way each paragraph expresses a single main idea.

    I’m sorry if this comes across as bitchy and grammar-nazi-esque! That’s not what I intend. I do like reading these articles, and I think they contain wise advice; I just find them heavy-going as a reader, and thought the feedback might be useful.

    More feedback: the comment forms on this website (including forums) are really hard to use. The formatting is constantly messing up (this time when I logged into Google+ to post, it removed all line breaks). I basically don’t trust it, and copy-and-paste out into Notepad to reduce editing headaches.

  • http://twitter.com/thekodkod Etai Koren

    I don’t completely agree.. I think that being an experience developer using feature detection libraries you can achieve “Build once, Work everywhere” IE6 have nothing to do with the mobile experience. It all depends on the project, a lot of things will still work more smooth when coded natively and this is in my eyes the main issue. The concept of having a standard (HTML5, CSS3) is to make this work. Developing up to standard code should work seamlessly across all the different browsers (should! :))

  • http://www.facebook.com/profile.php?id=502696989 Roy Smith

    Of course, it’s never quite as easy as “works everywhere”, but we’ve actually built and deployed a game using a single HTML5 codebase and built it for iOS phones, iOS tabs, Android Phones, Android tabs, and desktop(Facebook) – deployed to Apple, Google Play, Amazon, Barnes&Noble, Facebook, Mozilla app stores. Here’s a video about it. http://youtu.be/_ZkbUX72s_Q

    Check out the game on any of those stores – it’s called “Boom Town” and it’s free.

    • http://www.dootrix.com Rob Borley

      Hi Roy,

      Games are one of those fully immersive environments that are ripe for HTML5 magic. But as you pointed out, even in your scenario it’s not as simple as just “works everywhere”.

      Can you share some insight into the level of optimisation that was required for each platform?

  • 吉森

    很对啊

  • http://twitter.com/stiri9 stiri9

    HTML5 is the future

Headscape

Boagworld