Physical Notifications by Johan Larsson, on Flickr
I am experimenting with PhoneGap for a couple of projects that I am currently working on. PhoneGap is a native mobile app packager which basically converts a html5/js based site into an app that will run on mobile phones and can be distributed via app store/market.
Since PhoneGap merely leverages existing support for html5 and javscript in the mobile phone you have pretty much the same issues as when developing a regular mobile enabled web site. You have to support different mobile phone features, different resolutions/screen sizes, the implementation of HTML5 is different for each platform and so on. There are a few things that are slightly easier since we know that the phones will have certain basic capabilities and we also know which platform our app has been packaged for. But since we are trying to make our app actually behave and look like a regular app we want to implement some of the platforms own look & feel and follow the recommended UI guidelines for menus and ui widgets.
I started my exploration by looking at mobile ui frameworks like jQuery mobile and Sencha touch but quickly realized that just pushing a bunch of nice looking UI widgets into my app just isn’t going help me develop a fully featured mobile app. I’m not a UI/UX guy altough I have dabbled with graphic design many years ago, I work mostly with server-side, behind the scenes applications in .NET and C#. When I work with ASP.NET I get a whole bunch of UI abstraction; the framework takes care of all the HTML rendering details for calendar controls and managing updateable div content and so on. I can focus on the logic of my application and just populate the UI with data and develop customized UI controls only when a specific need arises. Breaking down the my requirements and reading about some of the alternative JavaScript frameworks that are available leads me to conclude that I don’t actually need a UI framework I need multiple frameworks to handle the different aspects of the app and a design pattern that aligns with the declarative UI / imperative coding style that .Net uses for ASP.Net, WPF and Silverlight.
I broke down the different feature sets that I have found in mobile frameworks in the following image:
Mobile frameworks break-down
I have looked at a couple of frameworks most of which will solve multiple areas in my break-down.
jQuery mobile : UI widgets, UI Navigation, Rest /Ajax
JQTouch: UI widgets, UI Navigation
Sencha touch: UI widgets, UI Navigation, MVC framework
Backbone.js: MVC framework, Databinding, Dataaccess
Knockout.js: MVVM framework, Databinding, Dataaccess
In addition to the JS framework you also need a HTML/CSS framework that will allow you to actually accomplish the design you are aiming for but that’s a separate topic.
A motivating discussion is worth comment. I think that
you ought to write more about this topic.