PhoneGap EU Day 2012

Friday 14 Sep 2012, Compagnietheater Amsterdam

09:30 Opening remarks by Andre Charland (Adobe) @andrecharland

In the year since 1.0 was released, there have been 10,000,000+ visits to phonegap.com, and 1,000,000+ downloads of the phonegap software. build.phonegap.com, the automated build service (so you don't have to compile all the different targets yourself) has 100,000 users, and is due for a formal release "soon."

Regarding naming confusion, "Cordova" is the Open Source project, owned by the Apache foundation, and "PhoneGap" is Adobe's distribution. (Just like "Linux" is the core Open Source project, and "Ubuntu" is a distribution of it.)

PhoneGap 2.1 is just about to be released (within the next few days, probably). PG has been running as an Apache "incubator" project for some time, but 2.1 will be the first release as a full Apache project.

09:45 Simon Cross (Facebook) @sicross

Slides: https://speakerdeck.com/u/sicross/p/phonegap-day-eu-2012

2 years ago Facebook was a pure web company, built on PHP and JavaScript. They were used to releasing code many times per day. They already had a mobile web site, and wanted to use this as the basis for their iOS App (Faceweb) so they could scale quickly.

On the surface Facebook may look like a very simple app, but the infinite scrolling news feed can be huge, and may have lots of photos in it. Many users found the app to be "janky" and slow. So they retooled the App to be more native, which involved huge team & architecture changes internally. Since releasing the native App, it has gone from a 2-star rating to a 4-star rating in just 3 weeks.

But note: Facebook has problems on a completely different scale than almost everyone else. Facebook's mobile web site is still accessed by over 7000 devices each day. Facebook is still committed to the web, HTML5, and to PhoneGap. They want to provide the Social layer for any kind of application.

FB sees themselves as able to help with distribution & discovery, performance, and monetization:

Distribution & discovery: The FB native app supports "deep linking" from the Facebook app directly into a third-party app (if installed), or to the App Store's page for that app. In the last 30 days, Facebook has sent users to native app stores 150,000,000 times. In that same time, the FB mobile web site has sent users to third-party app mobile web pages 7,000,000 times. This is their model for discovery & distribution:

User A does something with App X
App X posts an action to user A's timeline.
User B is a friend of user A. A's post shows up in user B's timeline.
User B clicks through on a link in the post, and is taken to the app store page for app X.
User B installs app X -> back to step 1.

FB can also feature mobile apps in their own App Centre

Performance: FB is a member of the W3C coremob group, and is committed to pushing forward the standards for web performance. They have already contributed the Ringmark tool (http://rng.io) for benchmarking mobile browsers.

(Aside: the first browser to pass "Ring 1" is Dolphin Browser for Android.)

Monetization: Facebook's mobile web payment system is now live in 60 countries. Using FB's plugins (for native, mobile web, and also PhoneGap) developers can allow users to make micropayments using carrier billing.

10:05 Building Games with HTML5 - Horia Dragomir @hdragomir

Summary: all the standard front-end web development optimization techniques apply.

Specific tips:

Make use of HTTP pipelining where possible (Android, Opera, iOS5 and 6)
Don't trust appCache
Optimize & minimize every line of JS code
Don't use jQuery. querySelectorAll, getElementsByClassName, and getElementById are much faster and (almost) universally available on mobile browsers. XmlHttpRequest can be in plain old JavaScript. So can events.
Forget about pushState on mobile for now
use requestAnimationFrame
minimize redraws
use CSS for animations, not JS
cheat on animations by adding dummy transforms just to enable hardware acceleration
for complex animations, learn to use matrix3d() transformations
Unfortunately, Android 2.3 still sucks at transforms and animations - so-called hardware-accelerated transforms are usually slower than un-accelerated transforms.
Use data-* attributes for date. Leave class names for actual CSS styling.
Use hammer.js to deal with touchstart/end/move events
Use pointer-events:none; user-select:none; user-drag:none; for fine-grained control of touch-based user interaction.
For retina & hi-DPI devices, perform scaling manually rather than letting the browser scale for you. Counter-intuitive, but turns out to be faster!
On Android, use navigator.connection to test for networking speed.
Read http://singlepageappbook.com/

It's all about perceived performance.

10:35 Porting Cordova to Tizen - Paul Plaquette

Intel is porting Cordova to Tizen

11:05 What's new in PhoneGap 2? - Dave Johnson @davejohnson

The move to Apache has been good to the PhoneGap (Cordova) project. It has gained lots of new contributors since the move.

PG2 has significantly better documentation than earlier versions. This has been a significant community effort. The API docs, Plugin docs, and Getting Started docs have seen the biggest improvements.

PG2 now targets several new platforms: Windows Phone 7, Samsung Bada, Tizen, Firefox OS, and Dolphn Browser.

PG2 can now run as an embedded webview for integration into larger native iOS/Android projects.

Plugin authoring is now documented, but Plugins are still not in their final state. The API has stabilised somewhat, but there is still a lot of change to come in the areas of discovery/installation/removal. The PG team is in conversation with the folks behind the Node package manager (npm) to learn from them. A npm-like solution is seen as a desirable goal.

Command-line tooling is now part of PG2. You no longer have to fire up the platform IDEs (XCode, Eclipse) to create and compile a PG project - you can do this from the command line now.

Weinre is now part of the Apache Cordova project, and work is ongoing to bring Weinre debugging to all PG target platforms. (Even non-webkit platforms, such as WP7!)

Significant known issue: HTML5 Audio is badly broken on iOS. Fixing this is a priority for the roadmap towards 3.0

11:30 The App Store Oportunity - Gert-Jan Spriensma @distimo

People download lost of apps. Mostly games.
Distimo.com does cross-platform app store analytics.

11:50 Debugging Cordova Apps - Patrick Mueller @pmuellr

Slides: http://muellerware.org/papers/pgday-2012-eu/#1

The three key tools for debugging Cordova apps are:

Weinre
iWebInspector
Real Remote Web Inspector

Weinre

Weinre is a hack that allows you to use the DOM inspection and manipulation parts of Webkit's Web Inspector to debug a browser on a remote device.

Normally, Web Inspector (WI) connects directly to the browser to which it is attached.

With Weinre, Web Inspector and the remote browser both connect to a proxy server. The proxy server provides the remote web page with a script file that sets up an XHR polling connection to the proxy.

When the Weinre WI issues a command, e.g. "highlight this DOM node", the proxy translates this into a JS instruction for the remote browser to execute when it next polls the proxy. All the DOM highlighting stuff on the remote browser is done through standard DOM/JS - no webkit needed.

This is how Weinre can be used on non-webkit platforms like Windows Phone 7, but is also the limiting factor that stops it from doing really useful stuff like setting JS breakpoints in the remote browser.

iWebInspector

This is a hidden API to enable Web Inspector in the iOS 5 simulator on OSX. Useful for debugging in the simulator, but doesn't work on real devices. Unfortunately, it is broken with Safari 6. It can be fixed/hacked to work with an old version of Chromium, though.

Real Remote Web Inspector

Real remote debugging using Web Inspector is only available for new RIM devices (since February 2011, starting with the Playbook)

Works for Chrome on Android 4+, but unfortunately Cordova the webview used by Cordova apps is an Android Browser webview, not a Chrome webview, so this doesn't work for Cordova apps (yet).

iOS6 apps use the new iOS6 webview, which is compatible with Remote Web Inspector. Requires Mountain Lion and XCode.

13:15 Working with PhoneGap plugins - Rohde Fischer @rohdef

The recipe for creating a plugin:

Create the class and method in the native code of your PhoneGap project
Map the plugins in your Cordova.plist XML file (for OSX; other platforms have different XML plugin registries)
Call your plugin from the JS code of your Phonegap project.

Live coding demo showing:

JS code calling a plugin
JS code receiving success/error callbacks from native code
JS code receiving events from native code

Demo code available at https://github.com/rohdef/PGPlugins

13:40 Phonegap, Canvas & Urine - Ian Jørgensen @ianjorgensen

Ian has built an app called Piddle that makes it easier for people with certain medical conditions (e.g. diabetes) to monitor and record urine tests.

What you do with the app:

Pee in a cup
Dip a urine tester stick in the cup
Place the tester stick on a special mat, which has a grid of reference colours visible
The app prompts you to aim the camera at the stick and the mat at 30s, 45s, 60s, and 120s. It will automatically take a photo.
The app analyzes the photo, and calculates what the colour values on your pee stick mean.
The app records the values, and allows you to track them over time.

Ian used PhoneGap for two things:

To package the app for distribution in the app store
To enable image capture from the camera

All of the rest is done in JS inside the app. The JS uses PhoneGap's camera plugin to take a picture, and pass this to the JS code. The JS code then uses the HTML5 canvas element and the pixel.js library for image processing.

One single call to PhoneGap turns an iPhone into a medical device.

Q&A afterwards: The PhoneGap camera plugin doesn't capture EXIF data (orientation metadata, etc) from photos yet. There are plans for this in the future.

14:05 Lessons learned from building Gather.at using PhoneGap - Max Ogden @maxogden

Gather.at is a standard PhoneGap app: native wrapper around a single webview. All functionality implemented in JS locally, backed by a server-side API.

The attraction of PhoneGap: 1 language (JavaScript) everywhere. JS in app, JS on server (Node).

The reality of PhoneGap: you're going to end up writing native code to implement plugins. But they're not too hard. (See also @rohdef's demo.)

Original strategy: write iOS PG implementation first, Android second. But the App Store approval process meant that the Android version actually made it to market first!

Cordova.js (the JS API for client-side code in a PhoneGap project) is not as cross-platform as it needs to be. You'll end up implementing a lot of platform-specific hacks. (Side note: this gets better as of 2.0, apparently.)

Using socket.io for websockets on mobile is sadly broken, because of mobile carriers and the proxies they use. There are a variety of hacks you can deploy, but you'll probably end up using polling with XHR.

Use responsive design techniques to build your HTML and CSS to deal with all the different screen sizes you'll find on Android.

Use CSS sprites, even though all the image resources you use are being loaded from local storage. There is still latency. You're still dealing with a webview, and the browser DOM.

Remember that PhoneGap is not a UI framework! It's just a wrapper. You have to implement all the UI yourself.

IDEs (XCode, Eclipse) suck, but PhoneGap 2.0 now has command-line tools so you don't have to deal with them (quite so much) any more.

14:30 Automating PhoneGap Build - Matt Gifford @coldfumonkeh

The PhoneGap build service can be consumed as a web site/service, but it was originally built to be used as an API. You can automate it, just like any other API. E.g.: integration with CI servers like Hudson / Jenkins.

PhoneGap Build doesn't deal gracefully with custom plugins yet, but apparently that's "coming soon".

15:10 How To Enter Emerging Markets: Mobile - Joe McCann @joemccann

Slides: https://dl.dropbox.com/u/409429/presentations/emerging-markets-2012/index.html

Lots of facts & figures concerning the opportunity for apps in BRIC and emerging markets. Smartphone adoption is still low, but growing explosively in those countries. There is a huge market, with billions of new consumers. See the slides for exact figures.

15:35 JavaScript is Magic! - Gord Tanner (RIM) @gordtanner

Slides from Gord's version of this talk at PhoneGap US day: http://gtanner.github.com/cordova.js.slides

Ripple is a mobile device emulator for your desktop. It can be installed as a Chrome app/plugin. When you run the emulator, it shows a device "frame" with your web page inside it. The emulator provides a sandbox environment that pretends to be a mobile device, with all of the relevant device JS APIs available to your code.

Ripple was developed by tinyHippos, which was bought by RIM in 2011. RIM intended Ripple to be primarily an emulation environment for BlackBerry, but the developers realized that with a little extra effort they could add the PhoneGap JS APIs, and make it emulate the PhoneGap app environment.

Ripple is now the official PhoneGap emulation environment: http://emulate.phonegap.com/

16:05 PhoneGap Committers Panel - Brian Leroux, Dave Johnson, Patrick Mueller et al., moderated by Remy Sharp @rem

Very little concrete information discussed. Lots of "maybe", "soon", and "beyond our control".

As mobile OSs make more native APIs available to the JavaScript runtime, PhoneGap is committed to making more use of the native APIs instead of bridge code.
If and when Chrome webviews become available on Android, PhoneGap will provide the option to use them instead of Android Browser webviews
The PhoneGap Plugin API is stabilizing, but still hasa long way to go.
Video playback and DRM support is still not available, but Adobe has a vested interest in making this happen. Somehow. Some time. Maybe.
Getting binary data (e.g. Camera/image)from the native side into the JavaScript side is still hard. They're still thinking about ways to do binary data transfer. Nothing concrete right now.

16:40 PhoneGap 3.0 Roadmap - Brian Leroux @brianleroux

Cordova is now a healthy Open Source project with opportunities for commercial partners:

Cordova is Open Source
PhoneGap is Adobe's (free) distribution of Cordova
PhoneGap Build is a commercial service that sits on top of PhoneGap

Right now, PhoneGap is available for iOS, Android, BlackBerry, Windows Phone 7, Bada, WebOS, and Symbian. It will soon also be available for Tizen, Windows 7 & 8, Windows Phoe 8, Nokia Qt, Firefox OS, and more.

Key for the 2.0 release was developer ergonomics:

Command-line tools
Debugging with Weinre
Emulation with Ripple

Extensibility is a big theme for the current work queue. The plugin API is now public and documented, but work is ongoing to make it better. It still needs options for packaging, install/uninstall, and discovery. They're working with the NPM guys to build something like that.

Release numbering is decoupled from features. Releases will follow a regular 2.1, 2.2, 2.3, etc. monthly cadence, with features landing when they are ready. Features will not be tied to a specific release, and marketing will be decoupled from everything.

Plans for autumn 2012:

Focus on stability of 2.x release
Prototype for Firefox OS
Discussions about turning Ripple into a Cordova sub-project, or making it a top-level Apache project
At the moment each platform has its own XML config file - bring parity across platforms.
Work on the "child browser" (or "in-app browser") plugin. Give it a declarative and programmatic API. (2.2?)
Combine the various command-line scripts into a single "master" script
Plugin discovery

Winter 2012/2013:

Ongoing work on plugins & CLI tooling
Hosted Ripple with device proxy capability
Unfuck HTML5 audio

Spring 2013:

API audit
Push notifications plugin (hard!)
Plugins for native pickers for contacts, etc.

sunpig/pg-eu-2012.md