deck.cc

Native vs Html5 Mobile Applications

It seems like everyone is doing native apps now. Many people I know ponder about whether to learn Objective-C on the one hand or dive into the Android platform on the other hand.

A tough choice as both of them already gained a significant smartphone market share and are growing fast. Clients actually demand native apps even while most of them could easily be implemented using html5.

Html5 to the Rescue

As my background is in web application engineering, this breaks my heart. We've got more advanced browsers than ever before. They support offline asset caching using manifests, a relational database, key-value storage, fancy CSS effects, geolocation, touch events, web workers et al.

This is not only an amazing development environment but also a set of cross platform standards backed by several highly commited companies. All of which compete on things like JavaScript performance, implementation quality and developer relations (documentation, tools, libraries).

I think the choice to invest time into web application engineering in general and especially for mobile devices is a no-brainer.

Take a look at the recent Google I/O session "html5 status update" to see what is coming in the near future (camera access, voice recognition, microphone access, positional audio, WebGL, …).

While there are quite some remarkable native apps (especially on iOS), well executed html5 mobile apps are somewhat rare. Still there are some good examples that I would like to show you.

Facebook

Facebook's native iPhone and Android apps often are cited as the best applications on the platform but lately I find myself preferring their mobile web app more and more.

It feels more responsive because of the loading indicator. You don't have to take annyoing roundtrips to the dashboard as it offers a global navigation. Since it is running in the browser it allows copy and pasting of text anywhere and opens external links in another tab rather than in a dumbed-down in-app-browser. I also like the consistent experience when I switch between iPhone and Android as the web based version works on both. Did I mention that you don't have to worry about app updates at all?

Interestingly it uses almost none of the html5 specific features like geolocation or the relational database for offline storage so I wouldn't be surprised if it improves even further.

Facebook Touch

Gmail

Gmail is a great web-based desktop email client but Google also managed to create an impressive mobile version . Search is much faster compared to search through Microsoft Exchange or IMAP in iPhone's mail app. Labels are a great way to organize your mail in a non-hierarchical manner. It supported threaded conversations months before iOS 4 was even on the horizon and in my opinion Gmail's implementation is still more usable because you can fold and unfold messages instead of having to navigate back and forth. Offline support (try it in Airplane Mode), smart address autocompletion and integration with Google Tasks provide the icing on the cake. Well executed.

Of course many other Google Apps also come with good mobile support such as Reader, Buzz, Translate and Calendar just to name a few.

Gmail Mobile

Glyphboard & Harmony

A rather simple but useful app is Glyphboard . It provides a palette of Unicode glyphs like arrows, an umbrella and the famous snowman for easy copy and pasting so you don't have to miss them while typing on the iPhone.

Harmony is an html5 drawing tool that supports several interesting brushes like "web", "fur", "ribbon" and a fancy colour wheel. It uses the canvas element and supports exporting to image files.

Glyphboard and Harmony

Nextstop

Nextstop is a crowd sourced travel guide which also comes with a great mobile web app . It uses the geolocation API and caches assets like JavaScript, stylesheets and some images using a manifest file. To avoid network latency they use the key-value store and do aggressive content prefetching. Back in december Robert Scoble interviewed them about why they opted to build an html5 app instead of going native. They blog about their experiences on inside.nextstop.com .

Nextstop

Pie Guy

Neven Mrgan from Panic Inc created a Pac-Man inspired game called Pie Guy . Pie Guy supports highscores, swipe gestures and works offline. Neven also collects interesting html5 examples on HTML5 Watch which you might want to subscribe to.

Pie Guy

Everytimezone

Ever cursed because timezone calculations made your head explode and websites that claimed to help you made it even worse? It appears like Amy Hoy was not only in a similar situation but she even built something to make our lives easier. Everytimezone is a slick html5 iPad app that makes it dead-simple to figure out when the upcoming Steve Jobs keynote will start or when to call your friends overseas. It comes with offline support and since it is web based it also works with your desktop browser. Wouldn't it be great if we could say that about more applications?

Everytimezone

Trade-Offs

Of course right now it is not possible to write every native app as an html5 app, but a very high percentage already is. With more performant devices, faster JavaScript engines and hardware accelerated graphics it is just a matter of time until virtually all of them could be created as cross platform html5 applications. Tight integration with the app stores is definitely an advantage of native apps but there are frameworks like PhoneGap which help in building hybrid apps. This way you can have the best of both worlds.

Frameworks

Unfortunately there aren't that many html5 mobile frameworks yet but the creator of jQTouch recently announced Sencha Touch which looks quite promising and wrote a blog post in which he compares these two.

More to come

I hope these apps are just the beginning and we will see more and even better ones in the near future. I think we can learn quite something by studying them and I plan to write about some of their design decisions in more detail. If you don't want to miss that you can subscribe to our newsfeed . Last but not least, thanks to the following people who submitted app recommendations for this article: