Building Cross Platform Mobile Apps with Ruby & PhoneGap (Ben Stein)

May 31, 2009 Pivotal Labs

Ben Stein of Mobile Commons is giving a talk on Cross-platform Mobile App development. They hadn’t done any client mobile work, but lately clients have been asking “what about iPhone?,” “what about Android?” and the like. Whether or not this question of navigating the mobile client world is important to you now, Ben predicts it will soon be, as that’s where we’re headed.

Thoughts and experiences from Mobile Commons’ first mobile client apps:

Why Mobile?

Mobile give you capabilities not available elsewhere:

  • Location
  • Accelerometer & Orientation
  • Phone & Contacts
  • Camera
  • Sound & Vibrate

This is a big list – serious stuff.

Uncool things about mobile

  • Unreliable network connectivity
  • Java, Objective-C
  • Memory Management

Options for mobile

  • Maybe your Rails Web app is good enough
  • A mobile-formatted version of the web site
  • A client app

Mobile-formatted sites

  • alternate stylesheets
  • separate mobile subdomain
  • WURFL

Mobile-formatted cons

  • No cool mobile features
  • No app store distribution
    ** have to bookmark, no $$

iui, iPhone, Rails

  • iui & rails-iui: gives you stylesheet and typical iPhone ajaxy interaction
  • acts_as_iphone_controller
  • index.iphone.erb
  • Mime::Type.register ‘text/html’, :iphone

Native Apps

  • Rich User experience
  • Cool device features
  • App store distributions

Native Apps: Cons

  • New technologies
  • Different technologies
  • Frameworks to learn

“There are only so many hours in the day to learn new technologies.”

Alternative Tech Stack

  • Webkit rendering engine (HTML/CSS)
  • Business logic in web application
  • Javascript for mobile features
    (accelerometer, location, phone, &c.)
  • HTML5 Client-Side Storage (SQLite + JS)

This Javascript interface to phone features potentially allows consistent behavior across many devices. And hybrid we apps can serve double-duty, doing work both on and offline.

HTML 5

  • Proposed 6 years ago, working group started in 2007. Implementations emerging, particularly in Webkit, which is the common mobile renderer.

Features:

  • Canvas
  • Video Tag
  • Geolocation
  • Web Workers (i.e. Javascript Threads)
  • Client-side Storage
  • and more…

3 Types of Storage

  • Structured Storage
  • AppCache
  • Client Database

sessionStorage and localStorage are shared Javascript Hashes available across all your pages.

HTML5: App Cache

Also defines a mechanism for enabling intelligent client-side caching.

HTML5: Databases

  • Defines an interface for client-side databases
  • Javascript & SQLite Implementations

Ben then demos a sticky-note app which works currently in Safari, and works with client-side persistent storage.

Security & Privacy

This makes cookie resurrection easy, so the designers include a same-domain policy in the spec, to reduce access.

GMail on the iPhone

Currently uses the app-cache and asynchronous updates to enable offline access.

PhoneGap

  • Open-source Project by Nitobi
  • Javascript library + native code
  • Enables a common javascript interface to phone features

XUI Javascript Library

jQuery minus all the browser compatibility code, optimized for Webkit & Mobile phones.

HttpClient.app

Don’t use Curl to test these apps, use HttpClient, which deals with much of the basics, including authentication

Demo App

Mobile Commons has made an application for allowing individuals to receive messages including a link to immediately phone their representatives. This uses Mobile Commons’ legislative district database, and other phone features including location and client-side caching, accessed via Javascript.

The phone number is linked with the a ‘tel:// ‘ URI which then allows initiating a call from within the phone.

These projects can be built and managed out of eclipse for Android and XCode for iPhone.

Downsides

  • Apps don’t quite feel native. A bit slower, not quite as polished.
  • Not good for graphics, games, &c.
  • App store policies? Reports that some apps have been rejected for using these frameworks.

What’s Next?

  • HTML5 spec not yet finalized
  • Tons of fun work to add HTML5 functionality to Rails

Q & A

What about Migrations?

There’s no easy answer, this is one of the reasons we switched to Web development, because we have more control and the easy ability to push updates. Client migration support is also theoretically possible, but has yet to be implemented.

About the Author

Biography

Previous
Building Custom Web Proxies in Ruby
Building Custom Web Proxies in Ruby

A high-performance proxy server is less than a hundred lines of Ruby code and it is an indispensable tool f...

Next
There Will Be Ruby!
There Will Be Ruby!

Have you ever tried to catch a train running at a million miles an hour? Jumping into the traffic stream at...

×

Subscribe to our Newsletter

!
Thank you!
Error - something went wrong!