Picking a mobile app strategy

...and why I picked PhoneGap

mobile-app-strategy.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
Blackberry	Java	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

<!doctype html>
<html>
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
  <link rel="stylesheet" href="css/all-phonegap-min.css"/>
 </head>
 <body>

<div id="mobile-footer" class="navbar">
    <ul class="nav"> 
      <li class="active"><a href="#mobile-log-page">Log</a></li>
      <li><a href="#mobile-stream-page">Stream</a></li>
      <li><a id="logout-button">Logout</a></li>
    </ul>
   </div>

<div id="mobile-pages" class="container-fluid">

<div id="mobile-splash-page" class="mobile-page">
        Loading...
    </div>

<div id="mobile-login-page" class="mobile-page">
      <p>Welcome! Please login with either your Facebook account or email.</p>

<form id="login-facebook-form">
         <button class="btn primary" id="login-facebook-button" type="submit" disabled>Login with Facebook</button>
         <img id="login-facebook-loading" src="img/loading_big.gif" style="display:none;">
        </form>

<form id="login-form">
          <label for="email">Email</label>
          <input id="email" name="email" type="email" value="" tabindex="1">
          <label style="display:block" for="password">Password <a tabindex="0" style="font-size:10px" href="/forgot-password">(Forgot?)</a></label>
          <input d="password" name="password" type="password" value="" tabindex="2">
          <button class="btn primary" id="login-button" type="submit" disabled>Login</button>
          <img id="login-loading" src="img/loading.gif" style="display:none">
        </form>

</div>

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

mobile-jscss-cat:
    cat \
        $(STATICDIR)/js/util.js \
        $(STATICDIR)/js/data.js \
        $(STATICDIR)/js/models.js \
        $(STATICDIR)/js/shared.js \
        $(STATICDIR)/js/mobile.js \
        $(STATICDIR)/js/libs/date.format.js \
        $(STATICDIR)/js/libs/jsrender.js \
        $(STATICDIR)/js/libs/colorslider.js \
        $(STATICDIR)/js/libs/bootstrap.datepicker.js \
        $(STATICDIR)/js/libs/timeago.js \
        $(STATICDIR)/js/libs/lscache.js \
        $(STATICDIR)/js/libs/personalize.js \
        > $(STATICDIR)/js/all-phonegap.js;

cat \
        $(STATICDIR)/js/libs/pg-plugin-fb-connect.js \
        $(STATICDIR)/js/libs/facebook_js_sdk.js \
        > $(STATICDIR)/js/phonegap-fb-ios.js;

cat \
        $(STATICDIR)/js/libs/facebook.js \
        > $(STATICDIR)/js/phonegap-fb-android.js;

cat \
        $(STATICDIR)/css/colorslider.css \
        $(STATICDIR)/css/dateinput.css \
        $(STATICDIR)/css/bootstrap.css \
        $(STATICDIR)/css/bootstrap-responsive.css \
        $(STATICDIR)/css/phonegap.css \
        > $(STATICDIR)/css/all-phonegap.css;

mobile-jscss-compress:
    java -jar $(CLOSUREFILE) --js_output_file=$(STATICDIR)/js/all-phonegap-min.js --js=$(STATICDIR)/js/all-phonegap.js;
    java -jar $(CLOSUREFILE) --js_output_file=$(STATICDIR)/js/libs/zepto-min.js --js=$(STATICDIR)/js/libs/zepto.js;
    java -jar $(YUIFILE) $(STATICDIR)/css/all-phonegap.css -o $(STATICDIR)/css/all-phonegap-min.css;

android-jscss:
    $(MAKE) jscss-clean;
    $(MAKE) jscss-jshint;
    $(MAKE) mobile-jscss-cat;
    $(MAKE) mobile-jscss-compress;
    python android_index.py > $(ANDROIDDIR)/index.html
    cp $(STATICDIR)/js/all-phonegap-min.js $(ANDROIDDIR)/js/all-phonegap-min-`date +%m%d%H%M`.js;
    cp $(STATICDIR)/css/all-phonegap-min.css $(ANDROIDDIR)/css/all-phonegap-min-`date +%m%d%H%M`.css;
    sed -i '' "s/all-phonegap-min-[0-9]*\.js/all-phonegap-min-`date +%m%d%H%M`\.js/" $(ANDROIDDIR)/index.html
    sed -i '' "s/all-phonegap-min-[0-9]*\.css/all-phonegap-min-`date +%m%d%H%M`\.css/" $(ANDROIDDIR)/index.html;
    cp $(STATICDIR)/img/icon-* $(ANDROIDDIR)/css/images/.;
    cp $(STATICDIR)/js/all-phonegap-min* $(ANDROIDDIR)/js/.;
    cp $(STATICDIR)/css/all-phonegap-min* $(ANDROIDDIR)/css/.;
    cp $(STATICDIR)/js/phonegap-fb-android.js $(ANDROIDDIR)/js/libs/phonegap-fb.js;
    cp $(STATICDIR)/js/libs/zepto-min.js $(ANDROIDDIR)/js/libs/zepto-min.js;

android-build:
    rm -f ./android/bin/everyday.io*
    cd android; ant debug;
    cd ../;
    adb -d install -r ./android/bin/everyday.io-debug.apk
    adb shell am start -n io.everyday.app/io.everyday.app.App

android-release:
    python android_release.py;
    cd android; ant release;

PhoneGap: Testing

import unittest
from sys import *
import time

import base_tests
import log_page
import login_page
import mobile_page

class MobileTests(base_tests.BaseTests):

@classmethod
    def setUpClass(cls):
        super(MobileTests, cls).setUpClass()
        MobileTests.clear_log_data()

def setUp(self):
        self.login_page  = login_page.LoginPage(MobileTests.driver, MobileTests.waiter)
        self.log_page    = log_page.LogPage(MobileTests.driver, MobileTests.waiter)
        self.mobile_page = mobile_page.MobilePage(MobileTests.driver, MobileTests.waiter)
        self.stream_page = stream_page.StreamPage(self.__class__.driver, self.__class__.waiter)
        self.open('/mobile')
        self.login_page.login()
        self.mobile_page.verify_logged_in()
        self.mobile_page.verify_ready()

def tearDown(self):
        self.mobile_page.logout()

def test_measurements(self):
        section_id = 'measurements'
        self.mobile_page.open_section(section_id)
        self.log_page.enter_weight()
        self.mobile_page.verify_save_section(section_id)
    
    def test_measurements_edit(self):
        section_id = 'measurements'
        self.mobile_page.open_section(section_id)
        self.log_page.enter_weight('145')
        self.mobile_page.verify_save_section(section_id)

if __name__ == "__main__":
    unittest.main()

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

<!doctype html>
<html>
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
  <title>PhoneGap App</title>
  <script>
  var timedEvents = [];
  function timeEvent(name) {
    timedEvents.push({'name': name || 'unnamed', time: Date.now()});
  }

$(document).ready(function() {
  timeEvent('After document ready');
  myCustomMobileFunction();
  timeEvent('After ready JS called');
  showTimedEvents();
});
</script>
</body>
</html>

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?