The State of HTML5 Apps

Jun 17 2010 by Alex Kessinger | 32 Comments

The State of HTML5 Apps

We’re at the brink of shifts in the way we do things. The monks who have been toiling away on these new pieces of machinery are coming out of the monolith and starting to spread the word to the people. You might have seen my tutorial on creating an HTML5 iPhone app, highlighting the possibilities of open standards, client-side applications that leverage technologies we’ve traditionally used for websites and web apps.

Recently, Apple announced its HTML5 expose (however failed). Respected web design consultant and author, Eric Meyer, has started talking about the concept of Web Stacks — and we’re in a situation not unlike the beginnings of Ajax: A few people are already doing it, but we haven’t fully put it out in the open yet, and we certainly don’t know what to call what we’re doing.

My own HTML5 projects have been presenting their own questions, and I felt like I needed to take a step back and set a stage so that I could make sure that I understand where all these disparate pieces fit.

Let’s Talk Terminology

We need to address terminology. We could even be in for a good, old glossary at this point, but for now let’s just define the essentials. These aren’t set in stone either, by the way. I think there is going to be some jockeying for position here among buzzwords.

HTML5

What is HTML5? HTML5 is pretty well summed up by Mark Pilgrim.

"HTML5 is the next generation of HTML, superseding HTML 4.01, XHTML 1.0, and XHTML 1.1."

- Dive Into HTML5 – Introduction

An interesting side note here is that we might see an "HTML6," but it sounds like they just want to drop the number idea, and instead, evolve the specs slowly over time. This will take a large reeducation, but makes sense.

One more from Pilgrim:

"The next version of HTML doesn’t have a name yet. In fact, it may never have a name because the working group is switching to an unversioned development model. Various parts of the specification will be at varying degrees of stability, as noted in each section. But if all goes according to plan, there will never be One Big Cutoff that is frozen in time and dubbed "HTML6." HTML is an unbroken line stretching back almost two decades, and version numbers are a vestige of an older development model for standards that never really matched reality very well anyway. HTML5 is so last week. Let’s talk about what’s next."

- The WHATWG Blog

Applications

While there are plenty of good definitions — and you probably know what an application is — I think it’s worth rehashing here.

"Application software is computer software designed to help the user perform a particular task. Such programs are also called software applications"

- Wikipedia

HTML5 Applications (HTML5 App)

What is an HTML5 App? They are applications that fit the definition above (from a user’s perspective). They may not be in parity with other applications right now, but they are close enough that users won’t care. Sooner rather than later, we will be looking at capability parity as well.

From a developer’s perspective, they are applications written using HTML, JS, and CSS. They are applications leveraging open technologies and the evolving specifications of HTML and CSS that allow us to create software that can be used offline; things that used to need (at the very least) platforms like Silverlight or Flash.

Really, an HTML5 App is just web standards stuff. I guess you could throw in images there too, but really, the same things you have been using to build web pages for years are now being used to build applications that are more similar to a desktop or smart phone app than a website.

Open Source Paradigm Shift

Tim O’Reilly, O’Reilly Media founder and open source proponent, was onto something:

"IBM’s commoditization of the basic design of the personal computer led to opportunities for attractive profits "up the stack" in software, new fortunes are being made up the stack from the commodity open source software that underlies the Internet."

- Open Source Paradigm Shift

Value moves up the stack, commoditization moves down the stack. I see HTML5 as a new, new layer.

The browser — even at this point — has become a commodity. As long as it adheres to a standard, I think it will do okay. People are going to be more worried about what HTML5 Apps they can run on their browser than what browser they are using.

People saw this early on too, and they thought, "Oh, so we can just put our OS into a browser!"

Well, no.

If we have learned anything, it’s that you can’t copy-paste from old mediums into new ones. Think about going from radio to TV. You can’t just point a camera at a man reading the news into a microphone. While there was an initial wow factor, I don’t think the full OS on the web thing will ever fully translate as much as HTML5 apps will translate into offline device use.

The Importance of Distribution Channels

No distribution channels like the Apple App Store and Android app store dominate. Then there are novel uses like Valve, the video game development and digital distribution company, is doing with game distribution, as well as Netflix with movies.

These distribution channels seem to be how users will organize themselves. Just like the OS was the binding piece of software for the desktop era, distribution channels will be the binding software for the "cloud" era.

How Did We Get Here?

There were — and still are — two big choke points.

Thank You, Web Standards

As much as we complain about fragmentation in the browser market, it’s not that bad. It can be better, but it’s not the end of the world. They all run HTML, JS, and CSS. Though each browser has its own things going on, by-and-large, we are doing okay. For example, you can always put some content on a webpage and have it delivered to the user and know that — in some fashion — the user will be able to see it.

Can you imagine if a company starts to think they are going to redefine the web from the bottom up and have complete control of the standards? "We’re not going to use HTTP, were not going to use HTML." It would be crazy! This fact gave standards bodies like W3C immense power to get browsers to stay on the same path.

There Aren’t a Lot of Layout Engines

The second part is that browsers are hard to make. Billions of web pages — lots with really bad markup. An individual developer isn’t going to stand a chance. Even past just parsing HTML: HTML moves fast — not fast for the majority of us — but fast for an individual developer.

Also, we choose to use HTML in new ways (like microformats) so even conventions can change midstream on browsers.

Then add on top of all that, the diverse ecosystem of computers and operating systems that a browser vendor has to keep up with, and it’s a recipe for a small club.

A small club is exactly what we have today. There are only four major layout engines that are the core of the market: Trident (IE), Gecko (Mozilla, Firefox), WebKit (Chrome, Safari), and Presto (Opera). Tons of browsers are built on top of those engines.

With such a small club, it’s easier to keep things inline and to keep track of what the other guy is doing. As much as people complain about IE, as far as I can tell, everyone talks to one another nowadays and IE9 looks like it’s going to be an upstanding member of this small club.

So here we are: Standards and browser vendors have created a choke point where pretty much anything you want to do one the web has to flow through them.

But, this also means that if you have a browser on a device, you have an HTML5 App environment. There is always going to be fragmentation, but that is just the way it’s going to be, and we can live with that for now.

Where Are We in Standardization?

There is an infamous estimate from Ian Hixie, the HTML5 editor:

"It is estimated, again by the editor, that HTML5 will reach a W3C recommendation in the year 2022 or later."

- whatwg.org wiki

This freaks a lot of people out, but what I think it means is that finalizing the standards take a really long time. Browser vendors are free to start implementing this stuff now — and they have been (most everyone except Internet Explorer).

Feature Detection versus Browser Sniffing

This is where the feature detection (detecting what the user’s browser can do) versus browser sniffing (what browser the user is using) debate is coming from.

If you are an application developer, you are free to target "advanced functionality," but you should be doing feature detection and progressive enhancement.

This seems like a completely reasonable way to develop. It allows for the standards process to make sure it does the right thing while not holding up developers from fulfilling their users’ needs.

At any given time, there is going to be a hugely varied crop of browsers out there. (Using sites like caniuse and QuirksMode will help.)

Along with that, there are great feature detection libraries like Modernizer.

Then there is this Mark Pilgrim list as well: The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything.

Offline APIs

These, I really think, were the first step in the HTML5 App movement, and they’re more then just storing data offline. What’s lost on many developers is that it’s great that we have localStorage, but how do we allow apps to do a fully offline boot? The Application Cache, of course.

Without the ability to store the source files and data offline, we wouldn’t have offline HTML5 Apps.

Like I said, we have a couple of offline storage mechanisms: a simple key/value storage system called localStorage and a SQL storage engine, which a few browsers support (but the SQL idea seems to be falling out of vogue).

The new hotness is Indexed Database — it has support from all major browser vendors.

Storing the app and the data offline are the baseline needs for any HTML5 App environment. Thankfully, we have support for these standards in WebKit browsers, Firefox, and it should be coming in IE9.

Even though IE support may not be all the way there, think about offline use: Where do we most need offline capabilities? When we’re on our mobile phone or netbook. Smart phones are leaning towards WebKit and many of the smart phones sold these days run WebKit.

So, the places where we need offline experiences the most does support offline experiences — and it doesn’t matter as much that IE doesn’t currently support offline storage.

W3C WebApps Working Group: The Next Step in HTML5 Apps

The W3C WebApps standards is another major area of work. Lots of APIs and other specifications around client-side HTML5 Apps are being developed.

Deployment and Packaging for Distribution

"For local/offline HTML5 Apps, W3C Widget packaging and configuration is the deployment mechanism of choice. It will become the standard because it’s already there, it makes sense, and it’s close to becoming a formal specification. Besides, many vendors are already hard at work implementing it.

W3C Widgets work on Vodafone S60 and Samsung phones, Opera desktop and mobile on any platform, the Bolt browser (a thin-client solution like Opera Mini), and Windows Mobile 6.5. While BlackBerry also supports them, right now they need a special Java wrapper as an interface to the BlackBerry OS. There’s no reason to assume that the W3C Widget march will stop here."

- HTML5 apps – QuirksBlog

These are standards, just like any other. Essentially, if you have an HTML5 App, it’s going to contain some HTML, CSS, and JS (and maybe images and other media). The standard is just a way to help developers package their apps in such a way that they can be distributed in one whole package consistently and interoperably. If you’re familiar with PEAR, it’s a very similar concept (but for HTML5 offline apps instead of PHP classes).

You will probably need to fill out some extra metadata to explain how your app is put together. Then — in a platform that supports the standard — you can be sure that a user will be able to install your app. This starts to get interesting when start talking about "app stores," – we’ll get to that topic in a bit.

And the Rest of It

HTML5 has a bouquet of other cool APIs that HTML5 Apps can take advantage of. These APIs are going to give the app access to things like files, webcams, two-way communication with the server, and hardware-accelerated animations.

These APIs are going to get better, but they are just the icing on the cake when talking about HTML5 Apps.

And HTML5 Apps Can Be Used Where?

We have HTML5 Apps, they can live offline, they can deliver unique experiences, but where can they live?

Well, in the browser, duh.

HTML5 Apps can live in many places, but the first question is, "Does the device have a browser or a layout engine of some kind?" If it does, and the engine is modern, you can probably run an HTML5 App on it. But, essentially, I think this breaks out into three major areas of operation: desktop, mobile/small screen, and fuzzy.

Desktops

If you have a modern browser, you are good to go. If you’re using IE, you’ll need to pick up a modern browser like Google Chrome or Mozilla Firefox, or at least, chrome frame.

Also, desktops are still really important. If you really want to piss some people off, start talking about how HTML5 Apps can target the desktop just like any other stack (e.g. Flash, Flex, and Objective-C) — HTML5 Apps are right there with you, with a little help.

Site-Specific Browsers

Site-Specific Browsers (SSB) take one site or app (like Gmail) and just turn it into an app. There’s no URL bar or other  distractions. Some SSBs allow you to build a self-contained installable bundle and distribute it. This opens up the desktop app field immensely. Some things to check out: Prism, Fluid/Fluidium and NativeHost.

Mobile

Yes, this is the hotspot for HTML5 Apps. The iPhone has very sweet integration and your app can live on the home screen among all the other apps (see my tutorial on how to do this). The Android has support for the HTML5 APIs required, but not as nice of an integration.

Over the next few years, the number of devices that are running HTML5-capable browsers is going to skyrocket. Besides just the amount of devices, the different types of phones and phone OSs you might have to develop for, will also increase.

It is going to make a lot of sense for a portion of app developers to target HTML5 because it will be able to run on all of these devices, and you won’t need to worry about all the underlying disparate technologies.

Fuzzy Space

We already have two companies that will launch TV platforms: Google TV and (possibly) Apple TV. Google, during the Google TV keynote, said they would be support HTML5. We don’t know what Apple TV will support, but based on the recent HTML5 buzz it has been putting out, it’s likely they’ll also support it.

Even if they don’t support HTML5 Apps, other TV box people (like Boxee) already do. While roundabout, you can leverage HTML5 to make a Boxee app instead of needing to develop something specifically for Boxee.

Fuzzy spaces are the most open field right now and they offer a lot of playroom. TVs connected to computers are increasing in numbers, and there are full screen browsers for watching YouTube on your TV. The popular video gaming console, Wii, has a version of Opera on it.

The sky is the limit here. What matters is that "playing" in these spaces doesn’t require anything more than HTML, CSS, and JS.

HTML5 App Stores

Eric Meyer wrote about how we have the ability to make HTML5 Apps; he calls them Web Stack Apps (and we have for a while now) but the Apple App Store darling gets all the attention.

One thought is that for HTML5 Apps to get more press, their needs to be a HTML5 App store.

I think this idea has some merit, and I think someone is on the way with at least one. Chrome is planning one and Palm has one.

Any day now, we are going to see a fully independent app store spring up for HTML5 Apps. (Maybe I should save that idea for myself.)

Stores are great: Developers can get paid in ways other than displaying ads. This has always been hard on the web. Second, users now have a place where they can go and find apps regardless of what device they own.

It’s a distribution channel, which leads me to my wrap up.

Where to Put Your Money

If I were a business analyst, this is where I would put my buy/sell recommendations.

HTML5 is rapidly advancing. It will continue to evolve. It’s something everyone needs to keep a close eye on. Companies are going to start moving into this space in a big way this year and in the coming years. We are going to see some big numbers from the Chrome App Store. I also hope that we will see an app store on the Google TV, and Apple TV.

I started out thinking that HTML5 was the grand unifying theory, a culmination of my professional work that will take over everything, but what I have realized is that HTML5 is a player in the same ecosystem as traditional development stacks for applications like Flash, Flex, Silverlight, and Objective-C.

Not only is it a player, but it’s going to be competitive.

Flash, Flex, Silverlight and Objective-C can’t say they’re everywhere. Flash, for example, has just been unsupported on a very popular device, the iPhone.

On the other hand, HTML5 seems to be working its way into everything. This means that if I were a company looking at the long-term, I would be investing in HTML5.

Even if I couldn’t create as intense and as immersive experiences in HTML5 as in other platforms right now — Flash has been used on TV and in 3D animation before — I would still buy stock in it. The sheer number of audiences I would have access to with the least amount of development would make it easy on any company’s balance sheet.

We are always going to hear people say, "Well yeah, you can do that, but it won’t be an amazing experience on [device X]," and they are right, but that isn’t the goal for everyone, and I am not sure if that’s a bad thing.

For the young developers coming up right now: HTML5 is an A-level skill that needs to be developed into your skill set. It’s going to be marketable and it’s going to be in demand; it can be everywhere you want to go, and so companies will need to have some HTML5 App ninjas in their pockets.

I am recommending buying into HTML5 Apps. Buy big. Buy now.

Related Content

About the Author

Alex Kessinger works for Yahoo! as a front-end engineer. Elsewhere, he likes to curate great stuff from the web on his blog, alexkessinger.net. He is also a founding member of the Tastestalkr Network, a brand group. When not working, Alex lives in the bay area and enjoys really good food.

32 Comments

Scott Corgan

June 17th, 2010

What’s interesting, is that all this education on HTML doesn’t matter because the W3C needs to be replaced first. HTML5 is just a symptom of the problem. Oh, and IE too…

Melissa joyce

June 17th, 2010

I am proud you Alex. Great Work Thanks for the posting…

Alex Kessinger

June 17th, 2010

@Scott Corgan what should replace the w3c? The whatwg was an offshoot, that then got absorbed back by the w3c, so in essence HTML5 was built outside of the w3c.

wildanr05

June 17th, 2010

hope the “hotspot” doesn’t become “the only spot” for html5 in the future.

Tanya

June 17th, 2010

Great Article Alex. Thnx for sharing your knowledge with us :)

David Kaneda

June 17th, 2010

Great article and couldn’t agree more :) We just launched our own HTML5/CSS/JS mobile framework: http://www.sencha.com

manny

June 17th, 2010

great article
for an open web and standards!

adatapost

June 18th, 2010

Thank Alex. Excellent work, indeed.

Ted Thompson

June 18th, 2010

Great article Alex, very informative. Thanks

Jordan Walker

June 18th, 2010

It would be nice after 12 some odd years if they finally nailed down the standard.

Emanuele

June 18th, 2010

Hi, I suggest this link
http://www.vsizer.com/index.php?action=show&idComparison=16913
where you can vote, comment and find out what the web thinks about Mozilla Firefox vs Google Chrome

Beben

June 19th, 2010

all developer talked about it…awesome
:-bd

Jean-Philippe

June 19th, 2010

Thanks Alex,
Once again, i’m glad to read someone who shares my thoughts about the future of applications !
And +100 for web stores !

Alex Gibson

June 19th, 2010

I have some open source examples of HTML5 apps for mobile devices here: http://miniapps.co.uk

Mahmut Volkan UÇAK

June 19th, 2010

HTML5 web browsers, such as competition will increase further.

bruce

June 20th, 2010

“The new hotness is Indexed Database — it has support from all major browser vendors.”

well, Mozilla and Microsoft. Opera and the WebKits (sounds like a band name) use the W3C Web Database specification http://dev.w3.org/html5/webdatabase/

Matt Kreiling

June 20th, 2010

Thanks for advising new developers to put HTML5 in their toolbelt.

Great article.

One thing that occurs to me about html5 is that non-programmers, who have been using html a little, will feel that writing an app is in their reach.

When you put html5 next to Flash, Flex, Silverlight and Objective-C – it doesn’t seem to have all the baggage ie expertise needed to start playing around.

jeeremie

June 21st, 2010

Any day now, we are going to see a fully independent app store spring up for HTML5 Apps. (Maybe I should save that idea for myself.)

I think this year and the next we are going to see a lot of companies that will create web apps stores but I believe only one will stand out from crowd (Google?) and that one is going to make a lot of money.

Artyom Shalkhakov

June 21st, 2010

Sorry, I don’t share your opionion.

Does HTML5 bring anything new to the table? I guess not.

Developing a web app requires plenty of tinkering. What do we have right now, as web developers? Inextensible standards and buggy implementations.

I think “newer” doesn’t imply “better”, especially in this case.

James Pearce

June 21st, 2010

My goal with http://whitherapps.com is to show that some native iPad client apps can be pixel-perfectly indistinguishable from a web-based equivalent.

(Confident so far ;-) )

Hello

June 21st, 2010

“Flash, Flex, Silverlight and Objective-C can’t say they’re everywhere. Flash, for example, has just been unsupported on a very popular device, the iPhone.

“On the other hand, HTML5 seems to be working its way into everything. This means that if I were a company looking at the long-term, I would be investing in HTML5.”

This is very simply not even close to true. Flash is supported by 99% of internet-connected devices, and C (which is not, by itself, a web language) is supported on every computer. C web languages (like PHP) are used on the vast majority of websites. HTML5 is growing because — guess what — the internet is in HTML. But it’s still a tiny, tiny, tiny minority of sites using it — and most of those exist to showcase it. Modern browser support is also extremely limited at this point.

Not that HTML5 isn’t great, it’s just not as prevalent as you suggest.

James Williamson

June 21st, 2010

Good article, very thorough. My main concern is that the “open” standards have a chance to be standards. Seems like right now Apple and Google are in a WebKit race for adding their own proprietary elements and calling it HTML5.

Not cool.

yulianti

June 21st, 2010

great article :D

Michael Carr

June 22nd, 2010

Thanks for your insight Alex!

Ibrahim

June 24th, 2010

Great article. I was beginning to assume Html 5 was just a Video tag

arieff

June 27th, 2010

Great article Alex, very informative. Thanks

tee are

July 8th, 2010

Thanks for advising new developers to put HTML5 in their toolbelt.

Great article.

Steam

July 15th, 2010

Very good. Now that HTML 5 is here, we really need to start seeing what is possible with it. I am sure that there will be some great HTML 5 apps and website developed in the near future and taking the web to its new limits

AndoDev

July 16th, 2010

Great informative article. I’m sorry but it has to be said HTML5 will never have the capability of Flash. To look forward to HTML5 apps is nice, there will be room for developers which is great. But these apps will never be as fast, or a powerful as the similar apps made in Flash.

Its weird because HTML5 is getting pushed hard from Apple since it is manufacturing devices (iphone and ipad) that are incapable of Flash. Did you know that virtually every other device created that connects to the internet is capable of running Flash?

Kent Brewster

July 21st, 2010

The definition of HTML5 is: “does not run under IE6.” :)

Mitchell Davis

September 11th, 2011

Fantastic and informative article. And Blog. Thanks

Leave a Comment

Subscribe to the comments on this article.