Frustrations with deciding on the right iOS Mobile Safari web development tools (jQuery Mobile/Sencha Touch/etc)

Question

After completing one project with Backbone JS and jQuery Mobile for the iPad Mobile Safari, it left me feeling that jQuery Mobile is maybe not the right tool for that particular job.

I have found the performance of jQuery Mobile generally quite disappointing. A lot of the mobile JS frameworks (that handle transitions, dialogs etc) seem to suffer from the same thing. Getting jQuery Mobile and Backbone JS to work nicely together seemed a little jagged.

I needed something like jQuery Mobile to handle drag and drop elements and page transitions (and dialog boxes). Backbone JS is great for what we're doing, so we want to keep this in the toolbox. We're doing projects only for the iPhone and iPad and doing them natively (with Objective-C) just isn't appropriate in this case.

The recently completed project ended up using jQuery, jQuery Mobile, jQuery UI, some little plugin that makes jQuery UI work with touch, Backbone JS, Underscore JS... It all just seems so heavy for a web app on the mobiles! I want something powerful and smaller in footprint.

Sencha Touch seems to have great performance, but it does seem that you need to jump feet first into it and go the whole way with how it works. But maybe I have that all wrong? I'm more looking for something that plays nice with Backbone, is relatively lightweight and has lots of bits for building nice bits of UI for the iPhone/iPad (gesture support, page/dialog transitions, list views etc). Ideally something that acts more like jQuery - where I call it to do the bits on the DOM and stays out of the way when we don't want it - rather than it being a dictating framework and having to play by it's rules (like jQuery Mobile and most probably Sencha Touch). Also saw jQTouch... But this has been taken over by Sencha now, meaning that it's dead?

Is there anything that does this? Something lightweight, stable, fast and reliable that we can use, in conjunction with Backbone JS, to create fast, responsive web apps for Mobile Safari...that still has all the useful bits of UI and transitions etc that would make the app shine?

Answer 1

Hmmm... I agree with you about the JavaScript framework bloat part. I found that quite frustrating with jqTouch, jQuery Mobile and Sencha as well. There was just too much stuff that didn't need to be there. Then I looked at Zepto and BaseJS, but they were mostly just for mobile JavaScript and provided no controls or layout help. So I rolled up my sleeves and reinvented the wheel. I created a framework called ChocolateChip-UI. It provides a clear and straightforward markup language for mobile Web apps called WAML (Web App Markup Language). It also provides many standard iOS type controls and layouts that are easily customized to create unique looks. Most ChocolateChip-UI controls can be hand-coded or created dynamically and initialized with a simple call. ChocolateChip-UI takes care of making the controls have the appropriate behaviors.

I took a quick look at Backbone and my feeling is that it should be possible to use ChocolateChip-UI's layouts and controls as Backbone Views. The root of all ChococlateChip-UI apps is "app". This will have one or move "views" which can also have "sub-views". So, it seems like you should be able to map ChocolateChip-UI views and subviews to Backbone views. If you get this to work, please do let me know. Regardless, when I have enough spare time I'll be interested in testing it myself and seeing if I might make a special version of ChocolateChip-UI with Backbone support built in for those that want to use Backbone. Basically then that version of ChocolateChip-UI would become an enhanced view engine for Backbone.

For that matter, ChocolateChip-UI is open source. Feel free to cannibalize or lobotomize it to suit your purposes.