CODEWITHSUNDEEP
iphoneandroidwebkit
JLeonard
JLeonard

Reputation: 9148

webkit gotchas for android / iphone development

If I wanted to develop my mobile app's front end using js,css,html in order to target both Android and iPhone, what gotchas do I need to look out for?

I'm not looking for the comparison of native vs web development as much as I'm concerned about performance and development issues.

Upvotes: 0

Views: 1184

Answers (2)

Alex Grande
Alex Grande

Reputation: 8027

  1. Android currently doesn't have hardware acceleration in the browser, but that's changing in 3.0 - http://android-developers.blogspot.com/2011/03/android-30-hardware-acceleration.html.

  2. If you are using native scrolling (preferred on Android at the moment), make sure you handle touch correctly so that when you scroll touchstart isn't immediately opening new views.

  3. LocalStorage is fast. You can store JSON in LocalStorage by using JSON's stringify and parse. HTML Database with SQLite is slower.

  4. Sencha is beautiful, but restricting. jQueryMobile has a strong support base with great feature set, but still buggy.

  5. Google Closure Compiler has issues with PhoneGap, and other libraries. May want to use YUICompressor.

  6. In Android, use native choices for maps and menus. Maps are a link to google maps. Menus are lists stylized a button (see jQueryMobile).

  7. Use a templating engine like Mustache or Handlebars. Handlebars allows for logic and helpers, plus all the goodies Mustache supplies.

  8. CSS3 tables are your friend for 100% flexible content buckets.

  9. Check out PhoneGap plugins in Github. There's a ContactView I wrote for Android for the company I work for - http://www.reardencommerce.com, where we are building html5 apps in javascript and node.js.

  10. AJAX cross-domain or from local file system works on mobile. It also works on Safari Mac only if you read app from file:// protocol.

  11. There are settings you can change in Chrome windows/mac to allow cross-domain AJAX, but it lowers your security levels. You may get viruses.

  12. Too many CSS3 Gradients greatly slow down your app.

  13. Drop Shadows, gradients, and rounded corners with CSS3 aren't pretty on Android.

Upvotes: 0

Oliver Morgan
Oliver Morgan

Reputation: 31

I've been doing a fair amount of research into this, below are a few of the main problems i found.

  • Touch events are inconsistent across different devices.
  • There isn't any good way to perform fixed positions. Which would be required for a simple title bar.
  • Currently there is no framework that supports multiple resolution devices, i.e. the UI looks pixilated on the new iPhone 4 retina display.
  • Mobile devices have small amounts of memory and slow CPUs, the use of any mainstream JavaScript framework significantly reduces performance (including jQuery).
  • Make sure you use WebKit animations/transitions rather than performing the animations in JavaScript (this utilizes hardware acceleration).

I cant think of any more right now, but when i do i'll let you know.

Upvotes: 3

Related Questions