JQuery Mobile 1.0

http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/

by johnbender • 15 years ago

313 72 15 years ago

I hate to say it, since I was looking forward to this, but on iPhone/iPod touch, this feels like crap to use. It jumps around, feels really slow and has some troubles responding to my taps. I really wanted to like it, but I much prefer simple mobile sites to ones that use JQuery Mobile.

karterk• 15 years ago

Unfortunately, they are bound by the constraints of the mobile browsers. To be fair, they have done a phenomenal job of supporting so many browsers across so many devices.

pedalpete• 15 years ago

Is that a fair argument when you consider the performance of Sencha and Sproutcore? I was under the impression that performance was nearing native.

IanDrake• 15 years ago

I think that's fair, but for developing cross platform applications, especially with lots of form controls, the functionality is pretty good and difficult to duplicate.

If you just want to format read only content for a mobile website, then you don't really need JQM.

hcal• 15 years ago

On my android evo 4g, its a little too jerky and feels pretty slow, I thought it worked pretty well on my ipad2. Are you referring to the demos or an actual use somewhere? The demo site is pretty slow, try setting up a quick demo for your self if you really want to see it in action.

Generally, I kind of liked it. I'm using an earlier version internally for some infield data collection, and it works pretty well. I am, however, using it in a long-view situation where ajax continually refreshes the data without reloading the page if that makes a difference.

numlocked2• 15 years ago

It is a bit herky-jerky on most of the mobile devices I've tried it on. I've written an app that is fully client-side rendered and plan on compiling it down to native using phonegap. I'm optimistic that this will help a bit (I don't have any technically sound reason to be optimistic - I just am), and that the library will continue to improve, and mobile browser speeds will do the same. Overall I've enjoyed using JQM and it's proved a very valuable tool to get quickly to minimum viable.

Ecio782• 15 years ago

i've just started today my first experiments with phonegap and web frameworks like jquerymobile and sencha and im not so optimistic about huge performance improvement: it's basically just running the webpages of your app from the smartphone memory instead of loading it from the website. NB of course it all depends on the way you develop the app (background updates etc..) but i've quickly tried a long listview in sencha touch vs a native one and the first one was at worst not shown correctly in the smartphone browser (opera) and at best not as responsive as the native one.

disclaimer: these was just preliminary tests and im not a real coder :)

numlocked2• 15 years ago

Why the downvotes? It's the most insightful comment in the world, but it's hardly worthy of scorn. And it provoked a meaningful reply (thanks Ecio78)

jsdalton2• 15 years ago

I think I wrote up something very similar the last time jQuery Mobile was posted here, but I'm afraid it hasn't improved much since then. This is exactly what happens when I touch a menu item using my iPhone:

1. The Safari address bar momentarily drops down from the top and then back up again.

2. A loading modal appears for a few seconds and then disappears.

3. The page I'm currently on jumps to the top.

4. The new page slides in from the right and the old one slides out to the left.

Steps 1, 2 and 3 are extremely jarring and, in my opinion, totally unnecessary. (I mean unnecessary from user perspective; I understand that the behavior is probably difficult for the framework developers to control cross platform.) I guess there's an argument for #2, but does the user really need such an obnoxious cue that content is being loaded?

Anyhow, I'm a huge fan of the idea behind this and I'm really rooting for this framework to succeed. But I could not at this point in good conscience implement it for any projects I'm working on, sadly.

hornbaker2• 15 years ago

I use the previous version of JQM at http://bumb.ly and have for the most part been happy with it. The key for me was getting rid of the default page transition animation effect, and instead using "none" as the default transition effect.

catshirt• 15 years ago

like i've said recently [1], jquery mobile is 90% complete. unfortunately, the last 10% accounts for nearly all the polish required to make a web app feel awesome. personally, i think that's important for 1.0.

i'm sure jquery's focus is on compatibility (not unlike the values of jquery core). unfortunately, this puts experience in the back seat. i do have faith this stuff will be resolved in time. granted, i've been saying that for over a year.

[1] http://news.ycombinator.com/item?id=3223602

kalid2• 15 years ago

The loading modal was a huge turnoff. Why would you ever show that to a user? After clicking a link, when is your browser not loading the next page?

I see that modal when browsing the docs (http://jquerymobile.com/demos/1.0/) in Chrome on a broadband connection ("I canna go any faster captain!"). The presence of that modal made me question other design decisions (yes, I get it, you have a sleek pop-up experience... now why are you showing it to me on every page load?).

shn• 15 years ago

Would these issues still be there if it were deployed with PhoneGap? Anyone has experience in this?

tomkinstinch• 15 years ago

Yeah, it is not as responsive as jQTouch (http://jqtouch.com/) or Sencha (http://www.sencha.com/products/touch/).

I guess there is a place for a library that has sub-optimal performance but works across many different devices.

Androsynth2• 15 years ago

It's not as responsive as Sencha Touch, which is the best out at the moment, but Sencha Touch is noticeably less responsive than native apps. It's noticeable enough to where you can't design mobile apps that are native-looking because they aren't responsive enough. Plus theres little stuff like flickering that get in the way.

I would say the problem is not in these frameworks, but in the browser. It wasn't made for these kind of apps and it is slowly catching up.

wizzo• 15 years ago

I can speak from my experience having released an MMO strategy game that runs on iOS, Android, webOS and most web browsers (http://spaceuncharted.com). JQM is far from perfect, but its compatibility has been solid. It was really nice to be able to write the app once, and use Phonegap to have it run on all the phone platforms with only minor tweaks. I originally wrote the game using the WebOS SDK in Javascript, and porting to PhoneGap seemed to be a reasonable thing to do...

On performance, we've found that on older devices, changing pages can be pretty slow, but on more recent hardware it's quite usable. Scrolling hasn't really been a problem except on fairly old hardware, such as the original Pre and some older Android phones.

We did run into one odd problem when overlaying some jQuery Mobile buttons over the HTML5 game canvas because the buttons used css border-radius, which reduced framerates by about half. We were able to switch to custom buttons that used css border-image instead, which had a much smaller impact on the canvas performance. But that really seems to be a bug in the mobile browsers rather than a jQuery Mobile issue.

johnx123-up• 15 years ago

Except jQuery core, everything around it--jQuery UI and jQuery Mobile are extremely bloated and over-engineered. I think, their itch for compatibility is the main problem.

tfb• 15 years ago

I was actually about to make the same comment. jQuery core is awesome, but everything else just seems like bloat. In their defense, they're tackling a hard problem but I think they might be going about it the wrong way. I think they should solely focus on cross-compatibility and forget about UI frameworks. Then again, UI frameworks aren't a terrible concept for those who want to whip something together quickly (and inefficiently). Maybe it's just a better idea to branch off rather than try to be somewhat of a subsidiary and ride the coattails of the jQuery name.

krausejj• 15 years ago

taps are finicky but they're faster than click events. the iphone waits for a double click on click events - several hundred milliseconds i believe.

you can make jqm better by coding very thoughtfully - making sure you transition to a new page before doing an ajax call, for example. in fact, waiting for any ajax response before giving the user visual feedback will sink your app - give the visual feedback first.

clarkmoody• 15 years ago

I'm excited about this library since I've already been using jQuery extensively for my desktop-web development and I wasn't thrilled about learning something new like Sencha Touch.

The new Theme Roller has a very nice interface as well, with a direct connection to Adobe Kuler, which I appreciate very much.

pingswept• 15 years ago

I don't know how this performs, but at first appearances, it looks pretty good. Does anyone know what the major competitors are for mobile UI libraries?

I played around with an early version of Sencha Touch, but that's all I'm familiar with.

sunsu• 15 years ago

Sencha Touch 2 is in developer preview now. It has a steep learning curve but I think it is worth it.

viscanti• 15 years ago

The fixed toolbars (as well as other performance advantages) are why I initially started using Sencha Touch instead of jQuery mobile. I'm sad to see where this 1.0 release is. I've been expecting working fixed toolbars for a long time. Sencha nailed this a long time ago, and it's a basic necessity.

The learning curve isn't THAT steep. Sencha Touch is well documented, and there are tons of example apps. There's a bit of a gap between the basic example apps and a full featured mobile app, but the documentation covers that all pretty well.

Regardless of the learning curve, it's worth the effort for javascript mobile development. Sencha Touch 1.0 was miles ahead of this release, and 2.0 is even further ahead.

drewda• 15 years ago

Here are a few others:

Sencha Touch: http://www.sencha.com/products/touch/

jQTouch: http://www.jqtouch.com/

iui: http://www.iui-js.org/

Jo: http://joapp.com/

maccman• 15 years ago

And Spine Mobile: http://spinejs.com/mobile

(disclaimer - I'm the author)

Ecio782• 15 years ago

dojoMobile: http://dojotoolkit.org/features/mobile.php xUI: http://xuijs.com/ Zepto (i think it's done by scriptaculous creator): http://zeptojs.com/

PhoneGap tools site has others too: http://phonegap.com/tools/

jeffreymcmanus• 15 years ago

We attempted to do a project with jQM and dumped it in favor of Sencha. The performance just isn't there for anything but the most trivial apps. Sencha has a significantly steeper learning curve (jQM is mostly markup while Sencha apps are mostly JavaScript-generated) but performance is much better. And performance is pretty important on mobile devices.

detour• 15 years ago

Yep we came to the same conclusions for the app I'm currently working on. jQM's ease of use lends itself well to rapid prototyping but when you want build something slick, go with Sencha.

nreece2• 15 years ago

There's a nice Mobile Frameworks Comparison Chart at http://www.markus-falk.com/mobile-frameworks-comparison-char...

scdc• 15 years ago

Anyone know of existing jQueryUI sites that have been converted to jQuery Mobile? It seems well documented for how to build new stuff, but if I've got an existing app with jQuery UI Sliders or jQueryUI draggables, if/how best can I convert/update it to get better touch support and/or support for more devices?

exterm2• 15 years ago

They say they're cross-browser, but their examples extensively use -webkit- css properties without the corresponding -moz-, -o- or the "vanilla" versions. None of the page transition examples work in opera.

lachenmayer• 15 years ago

Well, seeing as most (I'm guessing >90%?) mobile browsers currently used are based on WebKit, it makes sense to only include the -webkit-prefixed selectors

exterm2• 15 years ago

even if that was the case, this doesn't make sense. Write a script that adds -o-transform and -moz-transform after every -webkit-transform in your css and you have a good chance that it works.

Regarding mobile browser market share: It is a common misconception that mobile browsers not based on webkit have a negligible market share. Look at this. http://gs.statcounter.com/#mobile_browser-ww-monthly-201010-...

iusable• 15 years ago

jQuery Mobile is certainly one the most (if not The most) optimized platform to build on right now. It offers 'depth' & 'breadth' in almost all the core areas one might expect. I have been building on it since it was in Alpha and have personally experienced the team roll out fixes upon fixes, which leave the competition in the dust.

Kudos!

jbail2• 15 years ago

What do you mean by "optimized platform"?

Discussions of what is the best platform are futile. The answer to that debate is always: it depends.

For example, looking at mobile web page transitions, jQuery Mobile is way behind the competition in terms of optimization. The slide transitions in Sencha Touch 2 are way smoother than jQuery Mobile. I recently had lunch with one of the Sencha Touch developers and learned that they optimized this by not using CSS3 transitions at all and instead use a different approach with much better results.

To pick the best mobile web framework for you, you really need to evaluate what you're looking to get out of it. Then go with the one that has optimized those things which you care about most.

I've used both jQuery Mobile and Sench Touch and ultimately I decided I value a small framework codebase and full control of the framework most. Thus, I use a handrolled solution and it's been a great decision for me.

mikeklaas2• 15 years ago

Any details on the approach they used? In my experience, it's impossible to beat css3 transitions on a platform that hardware-accerelates them (i.e., only iOS as of this writing)

wavephorm• 15 years ago

  jQuery Mobile is certainly one the most (if not The most)
  optimized platform to build on

Which ones did you use, and how did you compare their level of optimizations?

Or did you just use jQuery mobile because you have used jQuery in the past, and immediately assume it is the most optimized?

iamwil• 15 years ago

JQuery Mobile is great as long as you stay within the confines of how they think you might want to layout and setup your page. But once you start needing something a bit more specialized, it felt like I was fighting it.

I'm glad to see that, at least in the docs, they got rid of the back button. There's already a back button in web browsers, even on mobile browsers. We don't need another one in the actual page.

I've come to believe that mobile web shouldn't try to emulate the fancy transitions of native apps for the request/response cycle, it should just be fast. If you're opting for client side async altogether, that's a different story.

forgotusername• 15 years ago

Demo has unbearably slow scrolling on my (stock) Nexus One. Feels like a rebranded jQuery UI, inheriting its bad traits (bloat)

untog2• 15 years ago

The Nexus One/Android is largely to blame for that, to be honest. Android's lack of hardware acceleration means that CSS3 animations are awful-slow.

daleharvey• 15 years ago

I built a mobile webapp recently and found jquery mobile lacking, although it follow a lot of the same idioms I was used to, the ui was just too jerky, I found hand rolling the same code reasonably easy to do to get a much smoother ui, alought I am still running against issues that I am not entire sure are solvable

niklas_a2• 15 years ago

To anyone that thinks this means it is ready for production: think again.

All release candidates have been buggy and slow. It MIGHT work on an iPhone 4S or the latest quad core Android phone but anything other than that it feels slow.

lazerwalker2• 15 years ago

I'm still confused why they're calling this 'JQuery Mobile' when it's really JQuery UI Mobile, conceptually speaking.

All I want is a library that gives me JQuery-like functionality with optimized mobile performance, decent compatibility with the Android browser's nasty quirks, a reduced footprint (easily doable without needing to support IE and legacy browsers), and a few wrapper functions around mobile-specific functionality like touch events. Is that too much to ask?

armandososa• 15 years ago

you are thinking in http://zeptojs.com/

jm3• 15 years ago

zepto looks wonderful. have you used it yet?

lazerwalker2• 15 years ago

The last time I looked into Zepto (which, in full disclosure, was about a year ago), there was a gigantic HN thread with many people (including John Resig) complaining that it being "JQuery-compatible" was more about syntactic sugar (functions whose signatures look like those in JQuery, but don't behave the same) and marketing buzzwords (comparing it to JQuery obviously attracts attention) than actual feature parity. Has it improved at all?

bricestacey• 15 years ago

Try zepto.js [1]. Its primary targets are iOS 4+, Android 2.2+, and webOS 1.4.5+.

[1] https://github.com/madrobby/zepto

andyl• 15 years ago

I tried to use JQM with backbone.js. Problem arose that JQM couldn't handle query params (like http://site.com/page?key=value), so I couldn't build dynamic pages that are bookmarkable. JQM devs were aware of the issue but said that dynamic pages were out of scope for JQM.

I dropped JQM and went with zepto, backbone.js and custom CSS. And wow, the performance gain was eye opening.

I think JQM is a nice tool to build prototypes and to learn about building single page apps. But no way would I consider using JQM for a production app.

akavlie2• 15 years ago

What did you use for all the UI and widgets that JQUI gives you? Did you find that a tough gap to fill in when you dropped JQUI?

mattparlane• 15 years ago

There's something wrong if you're getting a 30-50% performance boost between RC2 and RC3.

clemesha• 15 years ago

I'd love to ask the hundreds of people on Twitter, and elsewhere, exclaiming "Awesome, jQuery Mobile 1.0 is out!", this one question:

Which app, that you use, built with jQuery Mobile, is excellent?

untog2• 15 years ago

Well, the framework comes before the great app. It kind of has to.

I'm making an app with jQuery Mobile right now, coupled with PhoneGap. It isn't going to be the slickest app out there, but it is going to work just fine.

nreece2• 15 years ago

Have you looked at http://www.jqmgallery.com

andrewfelix• 15 years ago

I've built web apps in the past using JQTouch. Should I use this instead?

RobertKohr• 15 years ago

I built http://constantsail.com with it.

pablospr• 15 years ago

I have a simple question - Since it is mobile, why not do away with the animations and transitions? So why prefer jQuery mobile at all. What alternatives if I am targeting Blackberry, Windows, Palm, Kindle, etc?

codebungl• 15 years ago

Just created a new app and found the performance was both fast and sluggish at times. Anyone else with me on this? What are you doing about it?

JQuery Mobile 1.0

Related Stories