Channels ▼

Nick Plante

Dr. Dobb's Bloggers

Web Apps As First Class Citizens

February 15, 2009

My biggest ongoing complaint about the new breed of evolved mobile applications is that, at least in some ways, they feel like a tremendous step backwards in terms of developer productivity and ubiquitous access. Sure, the iPhone and Android development platforms let you take advantage of some fantastic device-specific features such as the accelerometer and location based services. And I guess if you're already a Mac developer, using Objective-C and Cocoa feels natural enough for iPhone development.

But as more traditional desktop applications move to the web -- to the cloud -- it just seems downright odd to me that we're forced to learn yet another set of platform-specific tools to develop new interfaces for our existing web apps in the mobile space. Fortunately, new solutions are emerging that make it easier than ever to package existing web apps for "native" mobile deployment...

If you recall, I wondered awhile back about packaging web applications as SSBs for deployment on the iPhone, and sure enough, there are solutions available now. Huzzah! PhoneGap (open source and available on GitHub) is one of the most appealing toolkits I've seen, offering support not just for the iPhone and Android, but also for Blackberry. The idea is simple, at least in the iPhone's case -- you download a set of libraries that let you wrap a web application up in a native application using Webkit.

All you have to do to accomplish this? Launch the included project file, change a few configuration settings, like specifying the URL for your application, include an icon file, compile, and go. You do all this in X-Code like you would for any other iPhone application. Then, assuming you're a registered developer and have paid the Apple tax, you can submit it to the application store, as a standalone deployable application. Just like for any other iPhone application.

Of course, I'm simplifying things a little bit here for the sake of demonstration :-). In most cases, you're going to want to create a separate stylesheet and some custom JavaScript behaviors for the "iPhone version" of your web application. Fortunately much of the hard work here is mitigated by using IUI, a streamlined CSS/JS package that makes this process easy on you. Reinventing the wheel is, after all, bad for your health. Or at least your productivity.

If you want your application to not only look like a native mobile app but also feel like one, PhoneGap gives developers access to many device-specific features such as the accelerometer, geo location, and vibration via JavaScript. This means that not only can they look like native applications but that they can also act like them. With relatively minimal effort. Hurray for the write-once, amend with some special sauce, and run everywhere workflow!

I should note that there are of course a certain class of applications which are not going to be great for this sort of thing. You're not going to want to build many interaction-heavy games in this manner, for instance. But for a large number of business, utility, and social networking applications that already have a pre-existing web frontend and require network access to function, it's a no-brainer. Just build on top of what you already have instead of reimplementing it from the ground up on a new platform with a foreign set of tools. The web is, after all, supposed to be ubiquitous.

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Dr. Dobb's TV