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.

Related posts

3 thoughts on “Phonegap and Bootstrap not lovers?

  1. ecolinet

    Hey Kevin,
     
    Why dindn’t you use jQuery Mobile for this ? It’s seems an amazing tool for HTML5 mobiles applications (even natives).
     
     
     

    1. kschroeder

      [email protected] was a reason for it, though I don’t quite recall what that reason was. Perhaps it was along the lines of that I was finding that using native HTML5 transitions were giving me what I wanted.  However, I just saw Codiqa and I must saw I’m intrigued again.  But I won’t be implementing it in this app.  I am using JQuery for doing things like managing the DOM, just not using the mobile functionality.

    2. kschroeder

      [email protected] take back what I said about Codiqa.  it doesn’t seem to support remote data sources.

Leave a Comment