PhoneGap Talk @ Sencha Con 2010

PhoneGap
Building Native Mobile Apps
using Web Technologies
Andrew Lunny, Nitobi Software
Wednesday, November 17, 2010

What is PhoneGap?

How To Build A Mobile App
var
idea
=
"An
app
to
list
your
todos";
[ios,
android,
blackberry].forEach(function
(platform)
{

createMobileApp(idea,
platform);
})
//
using
native
APIs
and
tools
function
createMobileApp
(idea,
platform)
{

var
app,

profit;

platform.registerForDeveloperProgram();

platform.downloadAndInstallSDK();

platform.learnNativeAPIs();

app
=
platform.writeNativeApp(idea);

app.buildForPlatform();

profit
=
app.submitToAppStore();

return
profit;
}

with PhoneGap
var
idea
=
"An
app
to
list
your
todos";
var
HTML5app
=
writeAppWithHTML5(idea);
createMobileApp(HTML5app,
[ios,
android,
blackberry]);
//
using
PhoneGap
function
createMobileApp
(HTML5app,
platforms)
{

var
app,

profit
=
0;

platforms.forEach(function
(platform)
{



app
=
platform.buildNativeAppWithPhoneGap(HTML5app);


profit
+=

});

return
profit;
}

Diff
-‐

[ios,
android,
blackberry].forEach(function
(platform)
{
-‐

createMobileApp(idea,
platform);
-‐

})
+

var
HTML5app
=
+

[ios,
android,
blackberry]);
-‐
platform.learnNativeAPIs();
-‐
app
=
platform.writeNativeApp(idea);
+
app
=

PhoneGap
Web App
HTML5
JavaScript
CSS
Native
APIs
iOS
Android
Black
Berry
webOS
etc...

is
Cross-Platform
iOS, Android, BlackBerry 4.6+, webOS, Symbian...
Open Source
MIT outbound, MIT + Apache inbound
Web Technologies
defer to native support
Spec-compliant
where applicable, tracking DAP working group
Extensible
any native code available through plug-ins
any JS libraries available through <script>

Strictly Speaking
PhoneGap: the native library
• phonegap.jar, phonegaplib.a, etc
• instantiates chromeless web view, loads www/index.html
• adds JavaScript access to native APIs
There are two parts to PhoneGap
PhoneGap: the JavaScript ﬁles
• phonegap.js
• JavaScript wrappers for native API calls
• is not required - your app can run natively as is

For Designers
• A PhoneGap app is bigger than a native app on a lot of platforms:
• no location bar
• no browser menu
• There’s no browser chrome!
• interactions should be explicit
• It should have a launch screen
• It should have some icons
• Mobile app expectations != mobile web expectations

For Developers
• Write and test your JavaScript as normal
• If you choose to use phonegap.js
• listen for the deviceready event on the document object
• then perform all PhoneGap-speciﬁc functionality
• You should be able to avoid native code entirely
• assuming nothing breaks
• if you need extra plug-in functionality, bug us on the mailing list

Native APIs
• Device identiﬁcation
• Network access
• Sensors
• Geo, Accelerometer, Orientation, Magnetometer
• Camera/image sources
• Contacts
• File access

Generally Speaking
• PhoneGap is
• agnostic
• permissive
• relaxed
• You don’t have to change the way you write apps

Demo Time
• A mobile web app, from Safari to native
apps on
• iPhone
• Android
• webOS

Thick Clients
remote APIs
offline storage
view templates

If
you put your web app in PhoneGap
Then
you won’t be able to rely on a web server
So
you will have do more on the client

Remote APIs
• Usually accessed on a server
• due to the same-origin policy -- best you can do is JSONP
• PhoneGap apps run on the file:// protocol
• the file:// protocol is exempt from the same-origin policy*
• XHRs can point anywhere
• Simple as you like
• $.get()... for example
*well, unless it gets changed. But we’ll patch that if it happens

Offline Storage
• HTML5!
• localStorage, sessionStorage, Webkit SQL, Google Gears,
Indexed DB
• Or native storage/external services
• CouchDB!
• Lots of libraries/wrappers
• Ext.data.Store is the Sencha Touch class
• we at Nitobi like Lawnchair

View Templating
• If your data’s local, then you’ll render your views locally
• duh
• Sencha does it!
• Or use an opensource one; or roll your own; or whichever
• My favorite is Mustache
• Generally speaking, try to spend time working with Strings, as
opposed to DOM elements
• DOM manipulation is expensive

Use Sencha Touch!
You should’ve been at James’s talk
Most of this stuff is taken care of:
make sure you use it!

Your server is there to
store data persistently
sync with new devices
let you use the word “cloud” in your marketing

Tooling
PhoneGap Build
PhoneGap Dev Browser
Sleight

PhoneGap Build
Problem:
Multiple SDKs to install, multiple
operating systems to run them
The crux of cross-platform pain.
Solution:
The cloud!
Ahem.
Online service for building and
distributing PhoneGap apps

PhoneGap Build Workﬂow
• Develop HTML5 app locally:
• index.html
• icon.png
• conﬁg.xml
• Submit to PhoneGap Build
• Upload
• Hook into VCS (git, svn)
• Download and Test App Binaries
• Submit programmatically to App Stores

with PhoneGap Build
var
idea
=
"An
app
to
list
your
todos";
var
HTML5app
=
var
phoneGapBuild
=
registerAtBuildPhoneGapCom();
[ios,
android,
blackberry,
symbian,

webos,
winPhone7,
bada],
phoneGapBuild);
//
using
PhoneGap
Build
function
createMobileApp
(HTML5app,
platforms,
phoneGapBuild)
{

var
app,

profit;

platforms.forEach(function
(platform)
{


});

//
now!

phoneGapBuild.buildNativeAppsInTheCloud(HTML5app);

//
soon!

profit
=
phoneGapBuild.submitToAppStores();

return
profit;
}

Diff
+

var
phoneGapBuild
=
registerAtBuildPhoneGapCom;
-‐

[ios,
android,
blackberry]);
+

[ios,
android,
blackberry,

symbian,
webos,
winPhone7,
bada],
phoneGapBuild);
-‐
-‐
app
=
-‐
+
phoneGapBuild.buildNativeAppsInTheCloud(HTML5app);
-‐
profit
+=
+
profit
=
phoneGapBuild.submitToAllAppStores();

Demo
From GitHub to device

PhoneGap Build
Closed beta right now, supporting:
Android, webOS, Symbian, BlackBerry
Next couple of months
• API access to allow IDE integration (Eclipse, Dreamweaver)
• Support for iOS, WinPhone 7, Bada
Further out
• Plugin integration: build with arbitrary native code
• testing/continuous integration
Interested? Sign up for the beta (or harangue me)

Problem:
It takes too long to build apps,
especially compared to web
development.
Who wants to wait for a compiler?
Who wants to reset their device
every time an app is updated?*
Solution:
A browser-style app that includes
PhoneGap APIs.
Put your PhoneGap app on a
remote server, point the browser
to it, test away.
*BlackBerry owners

Available on the Android Market now (free, naturally)
Available on GitHub, more or less, for iOS
who knows, it might get approved
BlackBerry port in progress

Sleight
Problem:
We can develop apps with the dev
browsers, but none of our remote
API calls work - because of the
same origin policy.
Solution:
A node-js based web server.
Serve static ﬁles from your disk,
proxy remote resources from a
target server.

Sleight
Setup:
$ npm install sleight
Usage:
$ cd www
$ sleight port=4000 target=api.twitter.com
More details: https://github.com/alunny/sleight

Addenda
releases
roadmap
resources

Releases
are not our core competency

Currently @ 0.9.3
For most fun, live on edge
Planned for 0.9.4
Uniﬁed Contacts API
Uniﬁed File/IO API
end of November, tentatively

Roadmap
Internationalization
Menu API (once we ﬁgure out what this will look like)
Full Windows Phone 7 Support
Plugin packaging/distribution
Beer drinking

New Tooling
StopGap
mocking PhoneGap calls in desktop browser
fake touch events, deviceready event
PhoneGap.rb / CLI
build/generate/launch PG apps programmatically
a single uniﬁed interface to building apps
Ristretto
build tool for JavaScript
target devices/environments in a framework-agnostic way

Resources
http://docs.phonegap.com
http://wiki.phonegap.com
#phonegap on irc.freenode.net
PhoneGap Google Group
twitter.com/phonegap

Thanks!
andrew.lunny@nitobi.com
twitter.com/alunny

PhoneGap Talk @ Sencha Con 2010

More Related Content

PhoneGap Talk @ Sencha Con 2010