Why and how I use PhoneGap



phonegap-why-and-how.appspot.com

I wanted to make a mobile app for my site this year, and I had a decision to make. How to make it? There's actually a lot of options, and it's not an easy decision to make because you're making a big time commitment - you're pretty much always learning something new and making a new codebase. So you gotta know your options.

How to decide?



Your app:

  • How many platforms do you want to support?
  • How important is performance?
  • How important is the user experience?
  • Which hardware APIs do you need access to?

Your team:

  • How many codebases do you want to have?
  • What languages/technologies do you know?
  • How much money do you want to spend?

How to decide?

My app:

  • How many platforms do you want to support? 1
  • How important is performance? Eh
  • How important is the user experience? Sort of
  • Which hardware APIs do you need access to? Camera

My team: (me)

  • How many codebases do you want to have? 1
  • What languages/technologies do you know? Web/Python
  • How much money do you want to spend? $0

Native app

Platform Language IDE
iOS Objective C XCode
Android Java Eclipse
Windows .NET Visual Studio
BlackberryJava BB JDE
hpWebOS C/C++/HTML5 ?

Cross-Compiled code

iOS Android WP7 BB WebOS
ParticleCode Java, AS3 Free
XMLVM Java, .NET Free/LGPL
Monotouch C#, .NET $400-$3000/OS

Wrapper API -> Native
Often write once, run in multiple platforms

Runtime code

iOS Android WP7 BB WebOS
Titanium JavaScript 0-$500-$$/Apache
RhoMobile Ruby Free/MIT
Corona Lua $200-$350

Hybrid app

Native app wrapped around a web view, communicating with APIs, via JavaScript. All web technology. Bridging API + Web Tech

Bridge SDK

iOS Android WP7 BB WebOS
(Adobe) PhoneGap Free/Apache
appMobi Free/MIT
trigger.io $600-$3000

phonegap: open source, adobe bought, apache trigger: startup funded, SaaS appmobi: also for making offline web apps

Web App

Web Frameworks

document centric vs app centric. "all in one". things to look for: widgets, speed, platform-specific theming, browser-support. do they rely on other frameworks?

Programmatic Frameworks

Sencha Jo GWTMobile

creating app from JS, creating the whole container and UI using JavaScript

Sencha Example

Declarative Frameworks

jQueryMobile Kendo UI Wink

writing HTML first, using JS to enhance that HTML, mobile optimize it, make it interactive jQueryMobile + Kendo UI both based on jQuery

jQueryMobile Example

CSS Frameworks

Twitter Bootstrap ZURB Foundation

responsive, mobile, media queries, fixed header/footer

Bootstrap Example

JS Libraries

DOM Data AJAX Touch Scroll Animation
Zepto
jQTouch
iScroll
Backbone

jQTouch designed to work with jQuery or Zepto. Also microjs.com

jQTouch Example

touch events, scrolling

My decision: Hybrid

PhoneGap: Architecture



single-page JS file with server-side and client-side templates

PhoneGap: index.html

PhoneGap: Workflow

Tools: SASS, Compass, YUI CSS Compressor, JSHint, Closure Compiler, Jinja2, Android SDK, XCode

test on localhost in browser, copy out templates, deploy to device test on device, iterate SASS. Live demo.

PhoneGap: Makefile

PhoneGap: Debugging

Android: DDMS

iPhone: XCode Debug Log

Logic -> DDMS/Xcode stacktrace, logs, alert

PhoneGap: Debugging DOM

In development:

   <script src="http://debug.phonegap.com/target/target-script-min.js#eatdifferent">
   </script>
   

DOM -> weinre, adobe shadow Logic -> DDMS/Xcode/weinre weinre, ddms/xcode, adobe shadow, alert

PhoneGap: Logging

1) Store logs:

var allLogs = [];
function log(something) {
  var storedSomething = something;
  if (window.JSON) {
    storedSomething = JSON.stringify(something);
  }
  storedSomething = 'LOG @ ' + new Date().toString() +
    ': ' + truncateText(storedSomething, 200);
  allLogs.push(storedSomething);
  // ...
}

2) Send logs and device info with every XHR:

      data += 'browserinfo=' + encodeURIComponent(ED.util.getBrowserInfo());
      data += '&logs=' + ED.util.getLogs().reverse().join(', ');
      data += '&version=' + ED.VERSION;

3)Send logs when feedback sent:

PhoneGap: Testing

selenium, webdriver show tests being run works in browser, works on emulator in browser, not yet in embedded webview mock out the phonegap APIs

PhoneGap: Performance Testing

https://gist.github.com/1302665

Would I do it again?

PROs CONs
  • Code reuse
  • Knowledge reuse
  • Bright future
  • Mobile browser bugginess/stability
  • Bugs take longer to debug
  • Hard to fake native UX

...Yes, probably... but should you?