Phonegap and Bootstrap not lovers?

Just a quick post.  I’ve been doing some work with Phonegap over the past week, really liking where I was going.  One of the reasons was because I was using the Twitter Bootstrap components which was making my stuff look not horrible.  Most of the pages were doing OK.  While their were definitely slower than native (I have a fairly old Android phone) the performance was quite liveable…

… except for one page.

I was mocking it up and it was doing fine on my desktop (duh!).  But then I decided to try running it on my Android phone and weird things were happening.  The pages were loading slowly and were at about the limit of what I would be willing to release.  The one page that I was referring to has a couple of form fields, some indentions, some list elements and a couple of buttons.  It is not horribly complicated.  But, my goodness, was it slow.

It was slow to the point that I started thinking about how I was going to write this app in Java and Objective-C.  I checked out Appcelerator again.  But the things that I wanted to stay away from, namely having to learn new languages, kept on haunting me.  I remembered that someone somewhere said that the HTML UI component that Phonegap used was not optimized, but I couldn’t believe it was THAT un-optimized.  So I tried running it on my phone’s browser and it ran smoothly.  Very smoothly.

Talk about being depressed.  So I started removing anything extraneous.  I removed JQuery and installed Zepto.  Got rid of Bootstrap and started doing my CSS by hand.  Moved primary development to XCode (UGH!).

But it started taking me a LOT longer to build out the same things.  A lot of this was because Phonegap has a really nice workflow if you can do most of what you need to do on the browser.  But getting rid of all of the things I did started introducing other instabilities in the UI.

At this point I hadn’t thought of simply getting rid of Bootstrap on the original codebase and seeing what the difference was.  But this afternoon I took my broken code and simply removed the bootstrap.css file.  It immediately improved.  All of the pages were fast, even the one that was really slow.  It was drawing three times a second before.  Now it was going just fine.  Again, not quite as fast as native, but well within my tolerance.

This is all too bad, really.  I really like Bootstrap.  I am not a great designer and so being able to use those gentlemen’s work really helped me out.  But, alas, when doing work with Phonegap it seems like the overhead is just a little too much.

So what I’m doing now is merging my two codebases.  I will be putting in the JQuery stuff back in and merging it with some helper code that I wrote.