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.
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.
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?).
> The loading modal was a huge turnoff. Why would you ever show that to a user?
IMO, with ajax page loads you need to show the user something that indicates their click was received. All browsers have a spinner or message somewhere to indicate "they're working" on pulling down the next page of content. If you take that visual clue away from users when loading content via ajax, what you'll end up with is frustrated users who click multiple times on the link since they think it's not working.
Whether the big obnoxious "loading" popup with ugly spinner is the right design choice is another matter, but fortunately the styling and location of that is easily changed.
I should have clarified -- it's not that a loading message is unnecessary, it's how it was implemented. The fact that a giant overlay modal appears on every page in their public docs calls into question other UI decisions. This isn't the padding on some button, it's an in your face element.
Sure, we can tweak it to have a small transparent spinner in the lower right... but what other changes are needed too? I want a framework where the authors already fixed these obvious things.
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.
> 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 couldn't agree more. I'm less disappointed with the lack of progress here than I am with the fact they consider the current version worthy of being labeled 1.0. That signals to me that they don't consider an outstanding UX to be a core feature of the product.
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.
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.
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.
Sencha is currently in the uncanny valley between traditional mobile and native apps. It is very close, but the unresponsiveness/flickering etc is noticeable.
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.
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.
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.
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.
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.
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 :)
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.
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.
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?
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?
I've been using zepto in a project for a couple of months and so far it's been pretty solid. It's true that it does not achieve feature parity with jQuery, but it doesn't pretend to (and I don't think it ever did). It does successfully mimic much of jQuery's core functionality on Webkit browsers at a fraction of the file-size.
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.
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.
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
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.
Can you clarify if Spine is actually cross platform (at least to Android if not elsewhere)? A statement of such is conspicuously lacking from the web site, leading me in combination with the giant oversized iPhone pic to believe it is probably not. If it is, you could do yourself a favor and make it more clear.
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.
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.
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.
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.
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.
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
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.
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?
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.
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.
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.
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)
He said they use horizontal scrolling to slide the page in from the side. I haven't yet dug into it to see how they're doing it, so unfortunately I don't have any more details, but you can download Sencha Touch 2 and check it out.
I guess the difference comes from using -webkit-translate3d which kicks in hardware acceleration instead of -webkit-translateX or simple -webkit-transition.
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.
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?
