cool tech graphics

Phonegap Day! Pamela Fox on Phonegap Pain Points

Filed under:

Pamela Fox - @pamelafox
She used to work for google, was on the Wave project.
When she quit Google, she decided to build her own app. Question was: native? cross-compiled (Titanium? Hybrid?

Decided on a combination of PhoneGap + twitter bootstrap + zepto.js

The easy part: Making it work.
The hard part: Making it work WELL. (I totally agree.)

The PhoneGap naming change was crazy. "CallBack" (was really dumb)-> "Phonegap" -> "Cordova"
When searching on google, 0 product names sucks, 1 is AWESOME, 2 starts sucking, 3 is insane.
(Instagram of her nice chart taken by conference attendee)

The issue tracker moved from Github to Apache JIRA (which is old, 90's and horrible to use day to day) This is important, it creates a "high barrier to entry for contribution" and and discourages real open-source contribution. is way better than the phonegap wiki. Wiki is out of date.

PhoneGap Android camera API: Has problems, but she patched PhoneGap to make it work, for herself. (Had out of memory errors in different ways on multiple Android devices) She says that this may be the case for most people.

Mobile browsers: "Android webkit is the worst webkit ever" Fixed positioning is borked, especially in iOS. We should all be using feature detection instead of browser sniffing, but some features aren't detectable.

Touch Events: click events are slow, touch is faster, zepto has touch support, but you might as well just write your own touch handler, since zepto's doesn't necessarily work well.

Scrolling: Reset scroll to top of page is hard.

A big problem with mobile dev is that sometimes you never figure out what causes a bug. You use a hack to fix it, and it ~works awesomely~

Keyboards: Getting the right keyboard to show up (numeric, alphanumeric, special characters) Hack to force hide the keyboard when needed.

GETTING FOCUS IN A TEXT FIELD: She spent a week trying to get it to work correctly. Its super buggy, and different on Android and iOS. She never got it to work, and gave up on fully consistent focus()/blur() behavior.

Mobile browser bugs aren't documented, like IE problems. IE's been around, bugs are documented ~somewhere~ on the web. We (devs) need to document mobile browser bugs!!!!

Offline detection: originally used, there was a user who it didn't work for tho, she doesn't trust it. is the one to use

Loading Performance: jQuery -> Zepto helped, shaved 22% off load time. Don't use onload event handler if you can help it, deviceready shaved 67% off her time.

Rendering Performance: Android webkit has trouble loading "fancy things" (like border-radius, box-shadow, etc.) iOS has no problem with those sort of things. Delay image loading, otherwise app whited out constantly. She wrapped tons of stuff in setTimeOut() to time events so they felt more responsive.

The Future:
PhoneGap is improving
Community and resources are growing
Android is moving to Chrome browser, instead of basic android webkit

(Pamela's slides are here if you're into that sort of thing.)

Date posted: July 20, 2012

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Have questions?