Mobile Web App Development

PhoneGap

Easy Mobile Apps with JavaScript

Monday, December 7, 2009

THANK YOU!

> var web = {};
undefined
> web.next();
[”javascript”,”mobile”]


me.
• github.com/brianleroux
• twitter.com/brianleroux

3


http://www.gartner.com/it/page.jsp?id=1126812

Mobile app dev is hard.


Device Platform Fragmentation
Platform Language Notes

Apple iPhone Objective C Requires an Apple machine.
Left arm.

RIM Blackberry OS Java Requires a Windows based
machine. WTF.

Google Android Java (Dalvik VM) Runs mostly anywhere.

Windows Mobile .NET or unmanaged C++ Requires a Windows based
machine.

Nokia Symbian C++, Java, Python, Flash, Runs mostly anywhere.
WRT

Palm WebOS HTML, CSS and JavaScript Runs mostly anywhere.


App Distribution Fragmentation
Apple App Store
Android Market
Blackberry App World
Nokia Ovi Store
GetJar
Palm App Catalog
Samsung App Store
LG Application Store
Mobango
Sony Ericsson PlayNow
Windows Marketplace
Vodafone App Store
Java App Store
Verizon VCast


Dev and distribution nightmare.


This is why the internet works.

cross platform
open standards
open source


Cross Platform iPhone
Android
Blackberry
Windows Mobile
Nokia
Palm *
Maemo*

* releasing VERY soon


HTML5

sorta


Webkit APIs

SQLite
Cache Manifest
CSS Transitions / Transforms / Animations
Custom fonts


PhoneGap API
Geolocation
Accelerometer
Notiﬁcations
Media playback
Camera
Device info
Contacts
Online/Ofﬂine
SMS / Telephone
Magnetometer


Future APIs

File IO
WebSocket
SQLite Wrapper


Free: as in freedom.

MIT Licensed


PhoneGap Philosophy

The purpose is to cease to exist.
Make the web a ﬁrst class dev tool.
Be open, transparent and free.
Adhere to standards when possible.


Sony Ericsson WebSDK

http://developer.sonyericsson.com/websdk

17


Yeah way.

Geolocation
Accelerometer
Notiﬁcations
Media playback
Camera
Device info
Contacts
On these devices:
Online/Ofﬂine
SMS / Telephone iPhone / iPod Touch
Magnetometer Android
Blackberry
Nokia
Windows Mobile
Palm webOS


Problems with the PhoneGap project

documentation
app store FUD
no fucking tests
many webkit variants
perceived competition
tooling is not consolidated
source is a bit of a gong show
no standard technique for extending the project


docs.phonegap.com
http://github.com/phonegap/phonegap-docs


App Store Rejections?

Rename your project.


No fucking tests?!


mobile-spec


Webkit

24


Yay Webkit!

Good!
sqlite
cache manifest
css awesome
custom fontage


Bad *

* many variants
** not mozilla

Ugly
• Blackberry less than 4.6 have no XHR

• Windows Mobile runs IE 4

• Or worse: IE 6 + 7


The many ﬂavours of Webkit
iPhone OS 3.0 Webkit 528.16 Build
Android 1.5 Webkit Nov 2008 Fork
Android 1.1 Webkit Rev r30692
Android 1.0 Webkit
PalmPre OS Webkit
Nokia S60 Webkit Fork
Nokia WRT Webkit Fork


Not to mention what isn't Webkit

Blackberry
Windows Mobile
.
.
.
.
.
.
.
...yet.


The web still rocks.

(even if the browsers do not)


Other options?
Option Supported Platforms Language License
BigFive iPhone HTML, CSS and JS GPL2

LiquidGear iPhone HTML, CSS and JS* MIT

Corona iPhone Lua Proprietary

Appcelerator iPhone HTML, CSS and JS* Apache
Android

Rhodes iPhone HTML, CSS and JS. GPL3
Symbian Ruby for native code.
Android Accessed client/server
BlackBerry style.
Windows Mobile

NimbleKit iPhone HTML, CSS and JS* Proprietary

* Renders native controls via JavaScript.

PhoneGap supported devices

http://rubyurl.com/jtNs

32


Wash, Rinse, Repeat...FAIL

1. First, install all these:
o iPhone SDK
o Android SDK
o Blackberry SDK
o Windows Mobile SDK
o Nokia WRT SDK
2. Download the PhoneGap source.
3. Map to each SDK.
4. Copy your app into each.
5. Build for each.
6. Fix a bug.
7. GOTO 3.

Automation FAIL.

phonegap-dev

coming soon...


is demo time nao


Extending PhoneGap

Plugins


Many codebases.

Great but how to get started?

Small screens.
Less memory.
Less CPU.
Less hard drive space if any.
Sketchy connectivity.


Constraints == Focus


JavaScript Sucks

(But it is ubiquitous.)


jQuery / Dojo / YUI / MooTools


XUI

2.2 kb


XUI + Emile


Good enough.

DOM / Event / Style / XHR / FX


What about UI components?


FUCK UI components.


Apps built w/ components look like it.

Solve your unique problem.

goals > features


Tapbots, for example.


This is the modern equivalent of
Outlook Express.

Fuck components. Especially native components.

Solve your unique problem.

And you will do it better than a generic solution.


Maybe you don't even need native features?

Use a mobile speciﬁc stylesheet.
Progressive enhancement of functionality w/ js.


The Future


More devices.

OMTP BONDI

Spec.


W3C Device API Group


Get involved.
• code: github.com
• docs: docs.phonegap.com / wiki.phonegap.com
• test: mobile-spec

• blog about it
• tweet about it!
• tell your mom about it (I already did)
• help on mailing list
57


Now... go write some apps!*
http://phonegap.com
http://groups.google.com/group/phonegap

Brian LeRoux
brian@nitobi.com
http://twitter.com/brianleroux
* After beers. Ideally at least 12 hours after beers.


Mobile Web App Development

Recommended

Recommended

More Related Content

Similar to Mobile Web App Development

Similar to Mobile Web App Development (20)

More from Brian LeRoux

More from Brian LeRoux (13)

Recently uploaded

Recently uploaded (20)

Mobile Web App Development