Going hybridMobile apps with web technologies

What’s hybrid?

How do you do that?

PhoneGap

SenchaTitanium

Calatrava

Trigger.ioRhoMobileM Project

MoSync

AppFramework

How do you do that?

PhoneGap

SenchaTitanium

Calatrava

Trigger.ioRhoMobileM Project

MoSync

AppFramework

Woah! Wait - what?http://avgp.github.io/hybrid-strategy-picker/

The 3 big secrets1. The uncanny valley

The 3 big secrets2. Hybrid is different from everything

The 3 big secrets3.

The hitchhiker’s guideto PhoneGap

TestTest often & test in Phonegap!

OptimizeCaching, Minification, LocalStorage

Use the forceConnection API, Battery API, Accelerometer

If it’s native......there’s a PhoneGap plugin for it.

War stories

iOS and the iframes

<iframe src="http://example.com"></iframe><a href="http://somesite.com" target="_blank">Open</a>

Android: iframe is embedded, link opens a browseriOS - round 1: iframe opens a new browser on start.iOS - round 2: "stay-in-webview=true"

iframe is embedded, link opens in the app

Android and the datepicker

The browser on Android

Android and the datepicker

PhoneGap on iOS

Android and the datepicker

PhoneGap on Android

Android and the datepicker

What the ..??

The dark side of the browser

● “Relayout” & Repaint events● HW-acceleration is magic● Bitmap grouping (webkit-transform: translateZ(0))● Compositing● Be really careful with AppCache

Links

● http://engine.centralway.com● http://docs.cordova.io● http://aerotwist.com/blog/making-a-60fps-

mobile-app● https://wiki.mozilla.org/WebAPI● http://www.w3.org/2002/mmi/● http://www.w3.org/Mobile/mobile-web-app-

state/

Thank you! Questions?