With the increasing ubiquity of mobile devices, mobile apps are becoming extremely effective tools for both marketing and productivity. To help overcome the vast array of mobile devices, platforms and form factors, there are a few frameworks which allow developers to build hybrid applications which can run on multiple platforms. This can reduce the cost of building a multi-platform app by tens of thousands of dollars!
Hybrid apps are named as such because they’re written in a third-party programming language which, at compile time is either cross-compiled to native code or encapsulated in a web view wrapper. If the wrapper solution is used, the content will run in a browser type environment and the wrapper will act as an intermediary, translating instructions that you’ve written into a form which the device can understand.
Currently, there are three primary application frameworks available for developing hybrid mobile apps: Appcelerator Titanium and PhoneGap (both Javascript-based), as well as Adobe AIR (which is Actionscript-based). Appcelerator and AIR are complete packaging solutions with their own development IDE, whereas PhoneGap is often used in tandem with Apple’s xCode and another Javascript framework such as jQuery Mobile or Sencha Touch. PhoneGap utilizes the aforementioned “wrapper” method, whilst Appcelerator and AIR compile your code to whichever native language is required for the destination device (Objectiv e-C for iOS, Java for Android, etc).
A Word of Warning:
There is no magic bullet for cross-platform mobile development. The best approach is to understand the strengths and weaknesses of each framework, and consider all options for each application that you build. Select the one that best suits your app’s unique needs — in some cases the best solution will still be to build separate native apps.
As mentioned before, the upside of hybrid apps is that they take significantly less time to develop and it’s much easier to port your app over to a different device operating system. The downside is that since your original code isn’t native, performance can be impacted. In addition, if you want your app to interface with device-level events like I/O and data, you’re dependent on the framework developer to include said access if even possible.
How This Works in Action:
For a recent project, we wanted to create an iPad app consisting of a slideshow and a form which submits contact info to a remote CRM. We didn’t need device-level access to any of the sensor or camera data, and the functionality was simple – a perfect match for the capabilities of HTML5 – so we decided to use PhoneGap and go hybrid.
Our initial choice for development in this project was a PhoneGap/jQuery Mobile pairing. jQuery Mobile inherits its syntax from its huskier desktop brother and Adobe’s most recent Dreamweaver CS5.5 release comes with PhoneGap and jQuery Mobile support baked-in.
We were able to quickly assemble a prototype within a day or two and had the app up and running on an in-house development tablet. Unfortunately while testing, we discovered an edge-case bug which caused slideshow transitions to be plagued with a disturbing visual stutter. The bug was visually jarring and unacceptable for a product that you hold in your hands and touch. Luckily, having gone the hybrid route we had other options. The app had been written in Javascript and we were able to quickly swap out one mobile framework (jQuery Mobile) for another (Sencha Touch) and be back up and running with a minimal amount of code refactoring. Once the move to the alternate framework was complete, slideshow transitions were smooth as butter, and we could show/hide the form without any impact on slideshow performance.
In the end, going the hybrid route gave us the ability to easily prototype and test functionality, uncover and circumvent potential issues early on in the process. Using the information gleaned, PhoneGap itself gave us the flexibility to adapt our toolset midstream.
The Take Away:
Native apps have their use, but as hybrid app authoring tools mature, the barrier to entry into the mobile app segment becomes lower, as does the cost of developing applications that can reach upwards of 80-90% of mobile users. We recommend that mobile developers keep their tool belts well stocked with solutions like PhoneGap, Appcelerator Titanium and Adobe AIR. The time you save on development will allow you to focus on the part that really matters: the user experience.
If you’re curious to hear more thoughts and experiences about the move to Sencha Touch, Brian (who wrote this post) will have a more tech-oriented rundown of likes, dislikes, tips and tricks available soon on his blog.