However, typical qooxdoo applications built with the desktop-oriented GUI toolkit are not a perfect match. Usually they are too heavyweight for slower devices like mobile phones (well, even that such devices can also be considerably fast, see the newest iOS and newest Android devices). Another important downside is that those traditional RIAs just do not feel like mobile applications. For instance, mobile applications present their data on pages, have rather minimalistic designs and layouts (e.g. header, list/content, footer), have a restricted workflow, use animated transitions between pages, and so on.
So for quite a while now we have been asking ourselves some questions: Why shouldn’t it be possible to develop mobile applications with qooxdoo? The framework itself is quite universal, already covering browser-based applications from web (both RIAs and low-level) to desktop. Which specific functionality is missing in the framework to also create genuine apps for mobile devices, so that they behave just like native applications?
As the result of an evaluation, we created a prototype that runs on iOS and Android devices, with the look and feel of a native iOS application. This proof-of-concept is a simple feed reader application which shows the qooxdoo news in a scrollable list and displays the full article when you click on a list entry. But a picture of the prototype running on iOS and Android might be worth a thousand words:
- Basic page flow navigation, incl. animation support for page transitions
- Bookmarking support: Navigation stored in the URL
- Special link handling
- Automatic size and orientation handling
- Scrolling support via iScroll
- CSS for application styling
As you see here on the next two screens, you can’t really tell the difference to a native iOS application:
The great thing is: We were amazed how much business logic we could reuse from our existing feed reader application. Based on qooxdoo’s data binding feature, all feed entries were retrieved by YQL, using the qx.data.store.Yql data store. It took about 15 min to extract this code from the existing feedreader RIA and reuse it in the mobile app.
And isn’t this exactly what you want to do, when you develop a mobile application: Take your qooxdoo RIA application and reuse as much code as possible for your mobile application.
We are going to continue with polishing the prototype in the next few weeks, also be working on the mobile enhancements of qooxdoo. We currently don’t expect qooxdoo mobile to necessarily become a standalone framework, instead it will rather be an extension of the existing universal qooxdoo framework itself. By doing so, you might be able to use the full power of the qooxdoo tool chain, OO, Properties, BOM abstraction, IO, data binding and other convenient features provided by the framework.
So what is the plan?
- Support for mobile WebKit browsers (iOS, Android, …)
- HTML 5 Support (e.g. offline capability)
- CSS3 animations for smooth page transitions
- Support of CSS3 Flexible Box Layout
- Page-oriented applications that allow a certain workflow much like native applications
- Lightweight widgets for mobile development
- qooxdoo programming patterns for application development
- Integration / abstraction of your favorite scrolling area (iScroll / TouchScroll / others), to solve the missing “position:fixed” attribute (likely to be fixed in future mobile browsers).
- PhoneGap support. PhoneGap allows you to pack your qooxdoo application into an installable package for a corresponding device, i.e. into a native app. This allows you to publish your application in one of the various app stores.
If you want to test the prototype on your iOS / Android phone, just follow the link to the prototype. Right now this is a build version for public testing, so no preliminary source code available, yet.
Give it a try and let us know if you would be interested in creating your own mobile apps, just by using qooxdoo as your favorite application framework.