Tuesday, March 26, 2013

WebSharper, PhoneGap, and Ripple: easier native HTML5 apps

We are experimenting with PhoneGap, PhoneGap Build, Ripple emulator and WebSharper. If successful, this will let you write truly cross-platform native mobile apps in F#, quickly pre-testing them in Chrome, and then generating various installers (Android, Windows, iOS - yes, iOS!) without even having to install the SDK.

Current mobile HTML 5 application story is this: either you create a mobile-friendly website and have users navigate to it, or you wrap your HTML 5 app into a native app - the second choice is what this article is all about.  The reason to wrap can be (a) you would like to get it into the native store; (b) you would like to use some native APIs (geolocation, accelerometer, contacts DB, etc).

Up to now WebSharper came with a little mobile library we made that gave some API working on both Android and Windows Phone.  PhoneGap incorporates Apache Cordova library that seems to be solving the same problem, has more APIs, supports iOS, and has a lot more users. It therefore makes sense, strategically, to let WebSharper use PhoneGap instead of maintaining our own layer.

Another good service under the same name is PhoneGap Build.  Maintaining SDKs to wrap a little HTML5 app into iOS, Android and Windows native apps can be a huge burden. With PhoneGap Build, you just create a zip or a GitHub repository and ask the cloud service to build multiple native app packages for you. Clean and simple.

Unfortunately, there is still the problem of testing. When you are just starting out, you are probably not prepared to own ALL devices you are targeting. Even if you did, testing on all devices is too slow and painful, especially when debugging simple errors that have nothing to do with mobile devices, and would, in fact, show up in a normal browser. Here the Ripple emulator seems to be the way to go - with a little Chrome extension, you can pretend-test your application in your browser. It even draws different mobile device contours to let you see how your app works in different resolutions.

All these tools seem to be wonderful, but in practice using them currently is still quite painful. We are trying to adapt WebSharper to make the story simpler. As an intermediate step, we released TypedPhoneGap - TypeScript wrapper around PhoneGap API that is structured in a modular, typed fashion with feature detection where possible - no more obtuse string constants, undetected "undefined" problems, or string event names. We now are generating and testing WebSharper bindings from this definition. If all goes well, sample applications should be coming shortly.

No comments:

Post a Comment