By John ClemDecember 16, 2013

Less painful cross-platform mobile development

Since the early days of native apps for mobile platforms, there have been numerous attempts to create a "Write Once, Run Everywhere" framework for mobile development.

Each approach has it’s pros and cons, and while there are some use cases where a phonegap app is appropriate; generally speaking, cross-platform toolkits either compile to the lowest common denominator resulting in a sub-optimal user experience, or require you to learn a proprietary framework to access native features, which seems dumb and/or time-wasting to me. Cross-platform toolkits will NEVER be as good as writing to the native platform SDK.

The end-goal of most of these cross platform toolkits seems to be saving you time/money by either:

A. allowing you to reuse your business logic and/or layout code on your native app B. allowing you to write a new mobile application that will compile to Android/iOS/WinPhone/etc

In my experience with personal projects as well as projects for clients, the upfront cost using a cross-platform toolkit does seem to make a lot of sense—however the long-term cost and overall user experience makes cross-platform toolkits a poor choice for anything beyond a clickable wireframe or proof of concept.

Q: What do you expect me to do if I can’t afford to build native applications for iOS AND Android?

A: There’s this thing called the web that is perfectly suited for your application and will work cross-platform out of the box.

Q: I’ve heard of the web, but what if I want the “native app” experience?

A: You ain’t gonna get it from phone gap anyway.

Q: But I’m building a really simple app. Phone gap supports all the features I need and it will save be a bunch of time

A: Even a really simple app will need to look/feel different on each platform. jQuery Mobile and similar frameworks do a good job of providing a platform agnostic UI, but if your entire reason for using something like phonegap is to provide a native app experience, instead of designing your website to work well on mobile, you’ll want your app to look and feel like the platform it’s running on (e.g. Many Android and Windows phones have a strip of software buttons at the bottom of the screen, so using an iOS-style tab bar for navigation is less than ideal).

Q: So is there any way to utilize my web dev skills when building native mobile apps?

A: Glad you asked. To recap, write-once run-anywhere = sluggish apps with difficult to maintain code bases. A new framework called NativeCSS takes the most sane approach I’ve seen so far when it comes to using web technologies for building native apps.

Rather than trying to write one app that will magically cross-compile to a native experience on each platform, NativeCSS allows you to write your app’s business logic utilizing the native SDK and framework of the platform but allows you to style your user interface using good ol’ CSS.

Again, you’re not building one interface that will look identical on each platform, but just the opposite. You place a button on the screen and then set rules, such as:


You can imagine how quickly this can turn into styling rules for different screen sizes (iPad, 4" iPhone, 3.5" iPhone, etc.) as well as different platforms (Android, iOS, etc).

The resulting code base is something that has a fair amount of reuse, but more importantly, a code base that is much easier to maintain and is a much safer bet than building an app in the hottest new cross platform toolkit (let’s call it Noun.js) and then having to start over again when your dev quits and you can’t find another Noun.js developer.

If you’re curious, checkout NativeCSS.com and see what you think.

Editors Note: Check out the iOS Bootcamp that John Clem teaches.