Native, Hybrid or Web Apps?

Tweet

Navigating the Mobile App Development Landscape

You keep hearing about user trends towards mobile devices; your 10-year old knows your iPad better than you, and so you figure that your business should also get on board and have its own mobile app. Of course, if your company primarily interacts with a niche audience mostly offline, it’s quite possible that you don’t really need a mobile app. If you make the caps that go on toothpaste tubes, I’m not sure an app would do all that much for you.

As more and more people start to access the internet from their mobile devices, many businesses find that having a mobile app is a great way of connecting them with their audience.

Case in point – when I make a reservation at my favorite restaurant, do I look up their number and call? Nope, I hop on their mobile app, see what times are available, and book my table. I can also see how many people they have on their wait-list. Now, if only the app allowed me to pre-order a glass of Merlot to be ready for me when I got there!

As a business considering hiring a company to build a mobile app, the landscape can be confusing, and sometimes even scary – it can often mean a huge investment of time and money. You hear talk of iOS, Android, Symbian, webOS, and people ask you if you’re going native or with a Web App. Going native? No, it doesn’t mean sporting a loincloth, facepaint, and a spear… it refers, rather, to a fundamental decision on which direction to take your mobile app development. And there is no right answer – rather pros and cons to each path which you will need to evaluate against your specific business needs.

Let Me Count the Ways…

It is often assumed that there are two ways to build for mobile devices: web apps or native apps. In fact there are more like four:

Native Apps

Native refers to building an app in a device’s native programming language. For iOS devices this means Objective-C, and for Android it’s Java. Native apps are typically fast, reliable, and can access all the the device’s hardware (camera, accelerometer, compass, etc). Because of this increased performance, mobile games are usually built as native apps. It also means, though, that your app is tied to the platform it is built for. An iOS app, for example, won’t run on an Android device without first re-coding the entire app to Java.

Web Apps

A web app is a website that you access from your device’s browser, but the site is made to resemble an application rather than a traditional website. It’s purpose is also more functional – it offers a utility or service rather than a straight-up website which is often more informational. A web app can be accessed by any mobile device that has a browser. Though being browser-based, it’s typical that not all of the device’s hardware features can be tapped into. To produce a more engaging and interactive experience. HTML5, CSS3 and JavaScript are increasing being used to take advantage of the advanced features offered by this new specification.

Platform-specific Web App

This is a web app which is specifically designed for certain mobile devices, such as smartphones running iOS or Android. Less focus is placed on how the app looks on all mobile devices, and emphasis is placed on making the web app look like a native app as much as possible.

Hybrid App

Some argue that a hybrid app is a native app, but it’s important to make a distinction. A hybrid app is built using web technologies, and then wrapped in a platform-specific shell that allows the it to be installed just like a native app. Thus it is sold/accessed through the device’s app store.

PhoneGap is an example of a framework that allows you take a web app and turn it into a native app for iOS, Android, BlackBerry, Windows 7, WebOS, Symbian and more. The hybrid frameworks typically have APIs as well, that allow you to access the device’s hardware and features that are locked out from the browser.

A No-Brainer?

At first glance you might be thinking hybrid is the way to go. After all, it seems to offer the best of both worlds, or at least the best compromise between development costs and distribution; a single foundational codebase across multiple platforms. Alas, it’s not so simple. Let’s break down some of the pros and cons for native, web, and hybrid apps to help you make the right choice. The direction you take should be more about matching the technology with your business requirements.

Native – When Speed Matters

Pros:

  • Better performance (at least for now), snappier animations, transitions, and faster load times. The performance difference between native and web apps is far more pronounced on slower devices (e.g. iPhone 3G running iOS4)
  • Can store more data offline
  • Can be featured and searched for in the app store
  • Full access to the device’s hardware and OS features
  • Implicit installation of an app to the device’s home screen. On iOS devices you can add any web app to your home screen, but it’s a manual process
  • The App Store handles purchase transactions on your behalf

Cons:

  • Typically more expensive to build, even for a single platform. Build costs increase significantly for each new platform.
  • Because the codebase needs to be re-worked for each OS, the time to build an app for multiple devices can also be quite involved.
  • Your app must be accessed through the device’s app store, which has two important considerations: your app must go through an approval process, which can be lengthy and arbitrary, and if your app generates revenue you must share a percentage with the store (30% for Apple’s App Store, including in-app purchases). App updates must go through a new approval process each time.

Web – Write Once, Run Everywhere

Pros:

  • A single codebase which can be accessed by any browser-enabled mobile device.
  • Uses web technologies (HTML/CSS/Javascript), which are arguably easier to learn than native languages like Objective-C or Java.
  • Performance issues are becoming less of an issue as mobile browsers become faster and their Javascript engines keep improving
  • No approval process needed, and updates to the app can happen instantaneously
  • No revenue sharing with an app store

Cons:

  • Using web technologies means interpreted code (as opposed to compiled code for native apps), which some people believe means web apps will always be slower than native apps.
  • Don’t have full access to all the methods exposed by the device’s operating system, meaning you are limited to the APIs made available by the browser. As it stands now in Mobile Safari, this means no camera, compass, video capture, microphone, user contacts, file uploading or push/local notifications.
  • Can’t be found on the app store. If you’re lucky enough to be a featured app in Apple’s store, for example, it is a huge marketing boost.
  • If you are looking to generate revenue, it’s up to you to build a commerce model.

Hybrid – Fully Loaded with Better Fuel Economy

Pros:

  • Allows you to capitalize on the single codebase offered by web technologies yet still market your killer app in each of the major mobile app stores.
  • Gives you APIs to access some, if not all, of the features locked out of the browser, such as camera, compass, contacts. For reference, here’s a list of PhoneGap’s supported features
  • Purchases are managed by the App Store.

Cons:

  • Still subject to the store’s approval process and revenue sharing. No instant updating.
  • The app’s performance is still dependant on the device’s browser capabilities.

An Informed Decision

As you can see from the above list of pros and cons, the decision of which technology to go with is often dependent on what your app will need to do. Be clear on what your business objectives are, and see which method serves them best. Right now, given the state of web app performance, if you are building a game with fancy graphics, you’re probably going to need to go native. If your app is on the simpler, like an app that reminds people of their anniversary (and scolds you if you forget), then perhaps a web app is what you need.

Back to the Future

In my line of work, I’m always looking towards the future, and my crystal ball is telling me very good things about web apps and the expanding capabilities of HTML5 technologies. There are already some great examples of HTML5 based games which produce experiences that were previously only achievable using Flash, see Pirates Love Daisies.

The Financial Times recently pulled their native app from Apple’s store and opted instead for an HTML5-based app. HTML5 brings things like video, audio, transitions, transforms, animations, offline storage, and drawing APIs direct to the browser… things that previously were only possible with plugin technologies like Flash and Silverlight.

Building web apps isn’t easy though. It still requires great knowledge of HTML, CSS and Javascript. Javascript is a very robust, efficient, and capable language, and does most of the heavy lifting in web apps (e.g. code logic, animation, database integration, interactivity, etc). And to make developing sophisticated web apps easier, a number of Javascript frameworks have cropped up recently, some of which even employ an MVC (model-view-controller) architecture to really make you feel like a software engineer.

After evaluating a number of these new frameworks, I have recently gotten behind one called SproutCore. SproutCore is an open-source framework that leverages HTML5, uses a nice and clean MVC architecture, and is designed around creating fast and responsive web apps that rival the performance found in native applications. SproutCore achieves this by moving all of the business logic to the browser, thus avoiding the bandwidth bottlenecks and network latency that can happen in more traditional web apps that are built around back and forth communication between the client and the server.

Mobile Apps for Everyone!

This is an exciting time for mobile and web developers. While I don’t foresee native apps being completely replaced by web apps, I believe that we will continue to see an increasing number of businesses look to web apps for a more cost and time effective solution when considering mobile app development. And who knows, maybe your toothpaste cap manufacturing company could use a mobile app after all!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://wulongti.com WuLongTi

    great article, really cleared some things up for me. As for HTML5 based games, I highly recommend this one: http://operasoftware.github.com/Emberwind/ and it’s a mobile web app too so you can save it to your springboard ^__^

  • Sebastian

    Two of the apps i used daily switched to a cross plattform approach in the last year.
    Both have gone from being nice, magic, fast and responsive UIs to slow s**t.
    (App names are Magicseaweed and Finanzen.net in case anyone cares).
    I have yet to see a fast and responsive Web-App as well.
    So if you aim for a quality experience for your users it looks like you have to do native.
    One exception to this is facebook though. Their apps look good on Android as well, but i can’t say anything about the “feeling”. Their Webapp is trying hard but much less fun to use than the iPhone app.

  • http://staeke.wordpress.com Staffan Eketorp

    Hi and thanks for a good writeup! I’d like to point out that IF you’re going the native way – there are several quite established ways of sharing a code base. The most prominent today probably being the Xamarin project (which in turn will also enable you to share code with any WP7 projects). It certainly delivers speed even though you’re not able to share all code, only the non-UI parts (and platform specific code).

    Take a look at http://xamarin.com/

  • Aruna Bhagtani

    Great article Adrian. Had a quick question about the best choice for merchants / affiliates – (web app / native app / hybrid app) if they want to ensure that affiliate tracking is in place.

  • http://martealdesigns.com bob marteal

    Timely write up. I do a lot of work for a university and we are having discussions about moving forward with a possible redesign of a large site. I find myself trying to explain what an App is and what a mobile app or mobile targeted website, and which we should use. This will help with those discussions.

  • Chance

    There will always be a place in the world for web applications as lowest-common-denominator investments intended for bottom-dwellers – of this we can be sure – and clearly all of the big vendors have a stake in selling each of us on HTML5/JavaScript as the next in a long line of false messiahs. There need be something new – always – that make achieving excellence seemingly the work of monkeys. But write-once-deploy-anywhere is just short of a fallacy – it has its place (not a place in which most of us should be interested, of course), but what should be obvious is that none of the big technology vendors have a vested interest, despite all of the never-ending lip-service, in such an approach becoming the way of the world. Without continually evolving native platforms for developers to exploit, there is no differentiation and little basis for competition, exactly why Apple’s success is based (accidentally) on a vast marketplace of native applications and the reason that Flash had to be banished by Apple and Microsoft. Beyond that, take into consideration that each of us now carries with us everywhere ever smaller, faster and cheaper devices that are exponentially more powerful than those used in going to the moon and back – with that being the case, why would the world do anything short of fully exploiting the full processing power of such devices, rather than being forever chained to vast numbers of web servers pushing us mediocre applications built upon a standard that will never be anything but – my HTML5 will always be better and slightly different than yours, same old story – no, what the web had going for it, at one time, was ease of deployment, but the advent of the app store has moved us beyond the mediocre and into a world in which cloud-enabled, native applications that fully exploit their platforms will dominate for the forseeable future. Adobe learned this far too late, but Apple’s known for quite some time and Microsoft, too, that the old web is becoming increasingly irrelevant – time for the best of the best of us to see things as they are and move in that direction…

    • http://none Bobzilla

      An excellent comment. Very insightful and forward thinking. The browser as an OS / Window platform has always been an incredibly silly idea. HTML / Javascript has been pushed way beyond what it was ever capable of and has just become an excersise in masochism… Die Web apps, die!

  • Matt

    Awesome article!! For someone like me who is on the cusp of getting into building mobile apps this puts a lot of things into perspective. Thanks!!

    • Ari

      Indeed! Same deal here…

  • Sean O

    You mention “The Financial Times recently pulled their native app from Apple’s store and opted instead for an HTML5-based app.” I wanted to point out that the reason for that had *nothing* to do with technology and using it as an example of ‘hybrid is a good technology’ is spurious. They did it because they didn’t want to pay Apple 30% revenue share for in-app content:

    “The Financial Times has pulled its app from Apple’s App Store because Apple takes ownership of customer data and a 30 per cent cut of subscription revenues. The two companies have been in negotiations over this for months, but failed to broker a deal.”

  • Mac

    Great article!

    Forgot you anniversary Adrian? :-)