Switching from jQuery Mobile to Twitter Bootstrap

http://blog.pamelafox.org/2011/09/switching-from-jquery-mobile-to-twitter.html

by jaynate • 14 years ago

58 18 14 years ago

blog.pamelafox.org

flippyhead• 14 years ago

We're contemplating this as well but I'm worried about how many little gotchas we'll have to rebuild from scratch to get similar support on many different mobile browsers.

aaronbrethorst3• 14 years ago

Back in January 2011, I built a little website (http://www.airportgasfinder.com) to help people find gas stations near airports, so they wouldn't have to worry about refueling rental cars on the way back to the airport. I built it on Rails 3.0, with jQuery Mobile for the mobile interface.

I let the site go dormant for a while, but resurrected it recently. When I rebuilt it, I used Bootstrap for the UI and decided to rip out jQM in favor of Bootstrap's responsive features. It took me a lot less time to build the new mobile UI, it feels faster and less clunky, and it has reduced my workload going forward, since I no longer have to maintain parallel sets of views (e.g. index.html.haml and index.mobile.haml).

I cannot imagine ever using jQM for another project.

FlukeATX• 14 years ago

This is a really neat idea. I'm never sure how close to the airport I should be to refuel- too far out and it might not be "full" enough for return, but too close and you might miss the last gas station!

aaronbrethorst3• 14 years ago

I got the idea after my girlfriend and I went to Maui for Christmas. I had never been there before, and had no idea where I should get gas on our way back to the airport. Like you said, too close and you might miss the last station. Plus, I was already concerned about missing our flight. The last thing I needed was the extra stress of watching for gas.

panabee• 14 years ago

cool, what did you use for page transitions and tap events? did you roll your own?

aaronbrethorst3• 14 years ago

Zilch, skipped 'em. I'm not saying this is the right solution for every case, especially for situations where you want something more application-like, but this wasn't a high priority for me.

hnriot• 14 years ago

This might work well for a single page site, but one of jqm's features is to out every page into divs and have the JavaScript deal with the page transitions. I'm wondering how that would be replicated using bootstrap. I love bootstrap and it only takes a few minutes to make it look distinctive from other tb apps. I also love how jqm does much of the tedious work in building mobile friendly apps.

pamelafox4• 14 years ago

@hnriot - I responded to a similar comment above, see http://news.ycombinator.com/item?id=4339604

untog• 14 years ago

This seems like a superficial dive. JQM has a ton of things Bootstrap doesn't, like separate pages based around div tags, hierarchical navigation and app-like transitions between those pages.

Not disagreeing with most of the points raised, but I don't think its the full story.

juddlyon• 14 years ago

Exactly - these are two different tools with two different purposes. Glad he could opt for the TBS responsive stuff in this case but it's misleading in general.

pamelafox4• 14 years ago

:%s/he/she :)

jcfrei• 14 years ago

got the same feeling. plus bootstrap actually makes use of jquery.

pamelafox4• 14 years ago

I get a lot of questions about how I did page routing and page transitions when I transitioned. I ended up writing just a few lines of JQM-inspired page changing code - since it's a PhoneGap app, I didn't need to worry about changing the URL properly - just changing DIV visibility and some event triggering. When I was using jQM, I had disabled transitions, so I didn't go through any effort in re-implementing those in Bootstrap.

But, yeah, if you're really keen on that stuff, then my choice may not be the one for you.

user602341• 14 years ago

Is this really front page because it has 2 buzz words in it? The article is non-substantive and attempts to compare a mobile app framework with a css toolkit.

ojr• 14 years ago

Your experience is showing ;)!

dotmanish• 14 years ago

You can always use Bootstrap for scaffolding (the grid is the coolest thing), and use jQM for interface elements and rest of the stuff. They are two different tools with different goals, just that several bits (or "features") of them overlap.

bjthomps• 14 years ago

Have you been successful in combining these tools? I am trying to use bootstrap (or Zurb Foundation for that matter) to accomplish the responsive layout, and use jQM to achieve swipe functionality, transitions, etc.

The 2 just don't play well together. When I Include all the CSS and JS files Bootstrap needs to perform all of it's functions, and then include the jQM CSS and JS file - much of the bootstrap functionality breaks or layouts no longer look acceptable.

I have been searching everywhere for a working example/solution for combining jQM's functionality into a truly responsive layout framework! Any guidance would be appreciated.

pamelafox4• 14 years ago

Note: I wrote this nearly a year ago, not sure why it's popped up today. Since then, both Bootstrap and jQuery Mobile have improved. I encourage you to consider both options (amongst a host of others, some of which I overviewed in this talk - http://mobile-app-strategy.appspot.com/) and pick what works best for you. :-)

Switching from jQuery Mobile to Twitter Bootstrap

Related Stories