Building Cross-Platform Mobile Applications @jonathanstark #w2e

Building Cross-Platform Mobile Apps
Jonathan Stark @jonathanstark
http://jonathanstark.com/web20

Staggering Growth

  • average daily usage
  • mobile media usage
  • smartphone ownership

5 billion subscriptions in 2010

Fragmentation
Software: iOS, Android, BB, WP7, webOS and many others
Device: 68 different models in 2010 in the US, 100+ tablets at CES, screen sizes
Even with Apple
camera yes/no, multitasking, 3G, GPS, etc.

Hybrid Apps
Write the code with HTML, CSS and JS then wrap it in native applications

Intro to jQTouch
jQuery plugin
Created by @DavidKaneda
Native CSS3 Animations

Demo

PhoneGap
Open Source
Created by @Nitobi
Native app wrapper
Multiple platforms

http://docs.phonegap.com/ for hardware API support by platform
http://build.phonegap.com/ for compiling on different platforms (private beta)

What about performance? Performance is similar to the browser. It isn’t going to be like a native app depending on the amount of data used to build the app.
Is there an issue with cross domain requests? No.
Will PhoneGap continue to support new features as the mobile OS changes? They are, but somewhat limited there are plug-ins.
Are there samples/examples using PhoneGap? http://www.phonegap.com/apps/
Is there push back from Apple on the design guides? There doesn’t appear to be anything about PhoneGap today that could cause a problem.

Debugging

Using a desktop web browser it has gotten much better Safari and Chrome are built in and Firefox has Firebug
Old way is using the debugging console in iOS. Pretty painful.
Weinre – Debugging tool that uses a Java web server that allows a client to access the server. Works like developer tools for mobile browsers. Allows interaction with DOM in real-time.
JSConsole – Console window for JS. You can use “listen” to do some cool tricks.

CSS3 Transforms, Transitions & Animations
Transforms: scale, skew, translate, rotate, origin
Transitions: kind of like tweening with Flash works on shapes, colors, etc.
Animations: supported in webkit

Offline Web Apps
Web Storage: store name value pairs that are consistent (local and session) generally want to keep it under 5MB, must be as a string
Web sql database: record style data gives you a way to store data locally to reduce required connections to the server. Can allow you to let users interact without a persistent connection and sync when connection is available.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s