JQuery Mobile Alpha 1 Released | Hacker News Reader

JQuery Mobile Alpha 1 Released

jquerymobile.com

147 pointssant0sk148 comments

This is outstanding! The UI is beautiful and for an alpha release things seem quite polished - then again, I was checking it on an iPad, which is probably easy to develop for.

I really like the focus on wide compatibility and progressive enhancement, but mainly I like that it seems that coding with this framework will still feel like regular, mobile web development, using technologies familiar to web developers.

As opposed to a whole new framework, we get to use jQuery and jQuery UI, which many of us have grown to rely on. The prospect of using this to develop amazing mobile technologies is incredibly exciting.

Thanks for all the hard work. I'm looking forward to subsequent releases but I plan on starting to build something now!

This looks great! I'm curious why they chose to use the "data-role" attribute on divs to denote page structure, like this: <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>

instead of using the html5 elements already designated for those purposes (since they're using html5 anyway): <section> <header>...</header> <article>...</article> <footer>...</footer> </section>

(see the "NEW SEMANTIC ELEMENTS IN HTML5" section of http://diveintohtml5.org/semantics.html )

This was due to the fact that we're targeting a lot of platforms - many of which may not be able to support those elements. For the first alpha we wanted to pick something that would absolutely work - we can absolutely re-examine using those elements, though.

I just added this as an issue in the tracker - thanks: http://github.com/jquery/jquery-mobile/issues/issue/209

Very impressive on my iPad. Love that the form toggles slide.

One annoyance is a strange page 'flash' when using the Back button. The transition appears to flash a view of the previous page. But, hey, it's alpha. (Edit: I'm referring to the Back button provided by jQuery in the header of the page, not the Back button on Mobile Safari.)

Many thanks for the work on this.

Yeah - we've noticed the 'flash' as well - we suspect that it has to do with the CSS transitions but we're still looking in to it (and it only appears to happen on some platforms, but not others, making it all the more frustrating).

I've noticed the Flash as well, on iPad Safari.

Switch Theme functionality is broken on webOS. More testing now.

Edit: (Here are more things that are broken in quick testing)

* The back button jumps you back to the webos starting page

* Transitions and dialogs are very jerky. Stuff like slideup ends up just flashing/flickring with no actual visible transition.

* Animations unfortunately feel very Apple/iPhoneish (not a criticism, just an observation). Comparatively, the Jo framework seems to be more aware of each device platform's UI quirks.

Understanding that this is still brand new and looking forward to the improvements. Hopefully, you are in touch with the Palm dev team to address some of the issues you are encountering.

(not an employee, just a user).

I was kind of surprised how rough webOS is to develop for (considering that it is WebKit-based). It's impossible to determine the scroll offset of the screen on webOS, for example (making it impossible to have fixed headers/footers). We'll definitely be working on it more in the upcoming weeks, though.

Update: Yep, we're already in contact with the Palm dev team and have been reporting bugs. (Un)fortunately most of them will only be fixed in webOS 2.0 - which is still a ways down the line and won't help current users. Thanks for the feedback though! If you have a moment we would definitely appreciate any bugs that you could file: http://github.com/jquery/jquery-mobile/issues

I'm on webOS overclocked to 800mhz and things are pretty smooth. This has been my experience overall since overclocking. More than the experience being x% faster, its more like the bar has been cleared that makes things feel fast.

That said, I'm also experiencing a number issues -- a good number of the form elements just don't work.

Overall I'm still really impressed and excited!

Can you file a bug on the form elements? (Specifically which one(s) you are seeing the issue on) It'll help us to pinpoint the general area in which problems are happening - thanks! http://github.com/jquery/jquery-mobile/issues

If there is a better way to submit these, let me know: http://github.com/jquery/jquery-mobile/issues/issue/194

Impressive. I'm not the best tester and I haven't dug too far into each feature, but a couple of things I came across:

The toggle control doesn't want to switch back to ON fully. If you tap it from the ON position, it happily switches to OFF. Tapping it again, however, makes it act like a slider control and it refuses to switch back fully. Using it like a slider and dragging it back to ON just forces it back to OFF completely.

On the initial load of the slider control, I drug it to a position (say 78) and the clicked the text box to see if I could edit it directly. I was able too, but the number switched back to 0 instead of staying at 68. After entering a new number, playing with the slider again and going back to the text entry, it retained its value. Exiting the page and going back in to repeat the process produced a similar bug, but this time the textbox was empty and had a placeholder of "input".

On one occasion, I had a weird navigation experience: Form Elements > Clicked Slider > Went to Slider > Clicked Back > Went to Form Elements > Clicked on Checkboxes > Went to Checkboxes > Clicked Back > Went back to Slider??

On the FORM Example page that has all the different form elements on one page, clicking on nearly any element that brings up the soft keyboard causes the display to scroll, however it doesn't scroll into the right position and the element you're modifying is no longer visible. Exiting the soft keyboard doesn't consistently scroll your view back to the correct location.

This was all on an HTC (Droid) Incredible, Stock Android 2.2, Default Browser.

That's all I've got so far. Still really impressed and looking forward to playing with this some more!

Glas you like the direction of the framework. Thanks for all the detailed feedback, we need to hear about all the issues on each platform (they're all quirky) help us improve by logging each at: http://github.com/jquery/jquery-mobile/issues

The toggle switch was working perfectly until Friday, we had a bit of a regression on that one.

This is fairly impressive, I'm eager to try it out. Now, I'm surely nitpicking, but isn't the name a bit misleading?

You know, jQuery (not mobile) is not a UI framework, maybe 'jQuery UI Mobile' would be a better name.

Just saying.

Awesome job. I've been eagerly awaiting the arrival of this since it was announced. I have spent the morning porting our app from using our internal mobile framework to jQuery Mobile.

First thoughts, this is really really well done. Each page is taking next to no time to change.

Secondly, is anyone noticing crashes on chromium (ubuntu)? The browser seems to crash every few minutes..

Edit: also noticed a major part of the header doc missing: http://github.com/jquery/jquery-mobile/issues/issue/197

Crashing may be a memory issue. As you click around,the framework loads the new page with Ajax and adds it to the DOM. We haven't yet implemented a system to only hold X pages in the DOM and dump older ones to keep things tidy. So if you click around, the page will eventually get pretty large.

For now, you can add a rel="external" to links. This tells the framework to do a full page reload and will give you a fresh start. Might make sense to add this to certain links to ensure that the DOM is cleaned up periodically.

This is really great! Works perfectly and fast on my iphone. I wonder if it'll be possible to modify a current existing desktop version into a mobile version using this, if I reach the site from a phone.

Is this not using hardware acceleration on the iPhone? Even on iPhone 4, the transitions are extremely choppy.

We're using CSS transforms that are supposed to be hardware accelerated but we have a lot of optimization to do to improve the smoothness of transitions.

Looks great on my desktop browser (Google Chrome).

However, I tried on my Android 2.2 phone (HTC Hero) and the graphics are sometimes a bit jagged or pixelated looking, and the scrolling is also quite slow and not smooth at all. That probably has to do with the phone, seeing that HTC Hero is a slow phone, despite its 500-something MHz clock rate. I also think it's got to due with the browser being un-optimized.

We're going to be doing a lot of optimization to improve performance on devices with less horsepower. We've been using a Google G1 as our low-end Android device for testing and see similar issues - slow scrolling, lockups, etc. because of the slow processors and limited memory.

Some of the rendering issues may be that the browser doesn't anti-alias elements with border-radius or cleanly re-size graphics. CSS gradients can be a bit expensive to render too. We'll look into that, but please log any specific issues on the Git tracker for us. http://github.com/jquery/jquery-mobile/issues

Testing it out on Android 1.5/ Motorola Backflip, looks good so far.

1. Found that I need to check off 'Auto-fit page' - Format web pages to fit the screen in Browser settings. Without that, the elements would extend far off to the right of the screen.

2. Flip-switch and Slider form elements have issues with long presses. If I try to touch-drag them, browser asks whether I want to 'copy/share page' the text.

3. On Form Gallery, testing the selection box that allows me to choose 'Your state', when the choices show up, it's pretty much impossible to drag up or down. The click registers almost every time I try to touch-drag.

http://jquerymobile.com/demos/1.0a1/multipage-template.html

located on page http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-pages.h...

Thanks for the note about Auto-fit - will look into that. Also that demo page should be fixed now.

This is awesome! Thanks, John.

One thing that I find a bit unfriendly is that on an iPhone, every switch to a new page briefly shows the URL bar at the top. Other than that, everything seemed to work for me.

Doesn't work on my HTC Wildfire running 2.1.

Demo page loads okay, and I can switch theme, although it's a bit flaky. However, none of the buttons go to their linked page, it just sits there on the original form. the buttons glow green to acknowledge they've been touched.

Looks great, though, and I'm off to try and run it with phonegap.

Edit: I raised a bug against this http://github.com/jquery/jquery-mobile/issues/issue/195

also testing on webOS .. hoping for a webos theme and back gesture support (along with support for hiding the back button on pages). i'm ready to test on webOS and to contribute back.

So we're not planning on doing a webOS theme (or a iOS theme or a Blackberry theme) as we wish to create something of a unified experience across the platforms - although if you wish to contribute one, we'll absolutely accept it.

Unfortunately it's impossible to hide the back button from a web page on webOS. There are a number of limitations of the platform that are impossible to work around.

>Unfortunately it's impossible to hide the back button from a >web page on webOS. There are a number of limitations of the >platform that are impossible to work around.

i was talking about the back button at the top-left location .. that is an iPhone only feature (webos uses the back-gesture while android has the hardware-back-button). i'm looking forward to test jquery mobile together with phonegap on webOS.

Ah, gotchya - yeah, that's totally a reasonable thing to assume. We'll work on that! And thanks for the testing.

I added an issue for globally controlling the auto back button behavior: http://github.com/jquery/jquery-mobile/issues/issue/210

There is quite a demand for a lightweight Phonegap app that calls on remote pages, but frameworks like JQTouch don't handle remote injection of pages (breaks navigation, tapping,etc).

I hope to see JQM support this without a lot of fiddling. It would be killer to have an app that was essentially PhoneGap + JQM UI + loading of JQM-compliant pages. No XML request, parsing, mapping to UI elements needed.

From a G1, Android 1.6: It's very slow. Multi-second UI hangs and then the UI becomes responsive but nothing has happened with the selection I made.

Hmm - do you have any more details regarding where the hangs happened? We were testing against a G1 w/ 1.6, as well and didn't see issues like that. If you could take a moment to file a quick bug report we would appreciate it: http://github.com/jquery/jquery-mobile/issues

Sure thing: http://github.com/jquery/jquery-mobile/issues/issue/193

Excellent - thank you!

Awesome work! Looks really great. Been looking forward to this a lot. Read through the documentation now, and will port mobile web app to this in the upcoming week, just gotta read through the source and plan a little.

I'm not yet seeing anything for special tablet layout stuff, I had expected it to jump between tablet and phone mode with media queries. Well off to read the source.

If this really enables web programmers to make functional phone apps as it seems to do, I predict two things:

1) More useful apps will be out on the market with an influx of new developers. "The best will get better"

2) The amount of money earned by your average app (already pretty low) will continue to decrease as developer supply grows.

1. just flipping great

2. this is a dead link Developing jQuery Mobile form http://forum.jquery.com/developing-jquery-mobile

3. did not see a link to download the demo files

4. did I saw awesome!

2. Fixed! Thanks for the catch :) 3. Good point - for now you can grab a download from Github: http://github.com/jquery/jquery-mobile/archives/master

That'll have everything in it - including the demos.

Thanks - downloaded already.

Any google maps examples on the way?

This page does not work on BB OS 5.2 (Bold 9000): http://jquerymobile.com/demos/1.0a1/

It display's, but nothing happens if you click on a item. Also the 'hover' animations lag and flash multiple times.

The fact that it's displaying is a huge step up from where we were just recently. (BlackBerry 5, and especially 4 can be really rough. We'll definitely look in to this, it's one of tr platforms we want to get working for 1.0 final.

It's too bad they didn't include anything to get around the positioning issues when on a mobile browser and zoomed in.

Looks great, but wouldn't it make sense to support Kindle's WebKit-based experimental browser too?

I guess the Sencha Touch guys are up for some reeaaally good competition.

running more or less smoothly on the android. if jquery and html 5 keep getting better in terms of ux then coding a native iOS or Android app might someday become unnecessary.

Great news for the mobile web. Thanks, team JQuery!

Reply on news.ycombinator.com