XUI Vs JQuery?

880 views
Skip to first unread message

Hugo

unread,
Aug 18, 2009, 2:41:49 AM8/18/09
to phonegap
New to PhoneGap, playing around and exploring. Can someone help me
understand the argument for using XUI over jQuery? I understand that
the smaller size of the js library file is a benefit for an online
app, but when using phonegap I think most developers would opt to
store all libraries of the device, so the size of the libraries
becomes a moot point.

If you elected to use XUI over jQuery, can you tell me what benefit I
possibly overlooked?

If you developed an online app and are using XUI over jQuery for
faster download - aren't you afraid that this will raise a red flag
with the Apple approval process? (online app downloaded over the
internet means developers could circumvent the approval process by
changing the app after it was initially approved)

Thanks!

daniel

unread,
Aug 18, 2009, 6:45:29 AM8/18/09
to phonegap
Well i use xui, it has enough functionality for me and the fact that
xui has less browser-compatiblity-code (there are not as many browsers
for mobile devices as there are for desktops) makes it execute faster
than jquery. But if you need jquery-functionality try it out if it's
fast enough for your needs!

Greets

silentrob

unread,
Aug 18, 2009, 1:49:10 PM8/18/09
to phonegap
Regardless of how you use your app, online or offline, you are still
limited by the device. For instance, on the iphone you only have 25K
of memory to store your application logic before the chipset reads
from disk, this can be a huge performance hit.

The other consideration is XUI is designed with mobile in mind, this
means it supports mobile specific gestures and hardware accelerated
animations. Even after you load in the bloaded cross supported jQuery,
you will still need to shim it with these things for your app to work
smoothly.

Cheers.

Rob Ellis

scottmotte

unread,
Aug 18, 2009, 7:45:56 PM8/18/09
to phonegap
Rob, any plans for xui to support form attributes. It is the only
significant thing missing from the library I've found so far.

For example, in my app I have an account username/password page and I
would like to display the saved login/password information in the form
value field. (I have down how to save the data with sql.js, and pull
the data out so that's not the issue). Currently, I have to use
the .html method to render the entire form field on the fly with
javascript. It'd be nice just to do .attr("value") = etc;

rustbucket

unread,
Aug 19, 2009, 10:58:44 AM8/19/09
to phonegap
I'm probably an idiot but I had considerable difficulty with XUI's
animation. I switched over to jquery and now my app works just fine.
There are also quite a few iphone specific plugins for jquery that
I've found useful. Documentation is also pretty thin over on the XUI
side of things, which isn't a huge deal if you're coming from another
API but I do wish there was an active community I could lean on for
troubleshooting. (reciprocal of course...)

I suppose in a perfect world an mobile version of jquery would be
great, basically a streamlined version that takes out all the
conditionals for multiple browsers and adds in some CSS hardware
acceleration.

Mike DeWolfe

unread,
Aug 19, 2009, 11:29:33 AM8/19/09
to phonegap
I've been left feeling pretty stupid in the Phonegap development field: XUI and JQuery are both good: JQuery is much larger and more feature rich; XUI is compact and can do a lot. I keep trying to find ways to read mouse move events. While I can get my app to figure these out with experiments in Firefox and Safari, when I port the app into my iPhone simulator, it goes dumb. Mouse moves only move the application page up and down the iPhone window. Anyone have any pointers on that?

All the best,

Mike
--
New - http://www.victoriasuccess.com/
Us   - http://www.thosedewolfes.com/
Me   - http://mike.dewolfe.bc.ca/
Blog - http://mikedewolfe.blogspot.com/
Tech - http://technicalmike.blogspot.com/
Sites - http://www.prefabsite.net/ - have a website in MINUTES

Scott Motte

unread,
Aug 19, 2009, 1:16:45 PM8/19/09
to phonegap
Mike, definitely take a look at iscroll.js - http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5 - It will do the trick for you keeping the top bar and bottom bar set and scrolling the inside content.

I haven't done any sideways scrolling yet - the one with the little dots where you can flick the pages left and right (like on the weather app). Xui doesn't support this as I can tell. I've enjoyed xui, but hearing rustbucket say he's using jquery has convinced me to give that a shot despite the much larger file.

rustbucket

unread,
Aug 20, 2009, 10:29:59 AM8/20/09
to phonegap
Yeah, the inability to get XUI to scroll horizontally was the point
where I switched to jQuery for the remainder of my development. Here's
the plugin I used to get a good swipe effect: http://plugins.jquery.com/project/swipe
(If you do a search for "iphone" in the jQuery plugins area you'll
find a variety of useful plugins)

Someday I'll crack open jQuery to see if I can't slim it down a bit
more for iPhone. I'm also thinking of sharing my phoneGap application
so people new to iphone webdev can get an idea of things could be
structured. (not that I think for one second my way is the best way
but learning by example tends to be pretty useful)



On Aug 19, 1:16 pm, Scott Motte <sc...@scottmotte.com> wrote:
> Mike, definitely take a look at iscroll.js -http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5- It will do the trick
> for you keeping the top bar and bottom bar set and scrolling the inside
> content.
>
> I haven't done any sideways scrolling yet - the one with the little dots
> where you can flick the pages left and right (like on the weather app). Xui
> doesn't support this as I can tell. I've enjoyed xui, but hearing rustbucket
> say he's using jquery has convinced me to give that a shot despite the much
> larger file.
>
> On Wed, Aug 19, 2009 at 8:29 AM, Mike DeWolfe <mikedewo...@gmail.com> wrote:
> > I've been left feeling pretty stupid in the Phonegap development field: XUI
> > and JQuery are both good: JQuery is much larger and more feature rich; XUI
> > is compact and can do a lot. I keep trying to find ways to read mouse move
> > events. While I can get my app to figure these out with experiments in
> > Firefox and Safari, when I port the app into my iPhone simulator, it goes
> > dumb. Mouse moves only move the application page up and down the iPhone
> > window. Anyone have any pointers on that?
>
> > All the best,
>
> > Mike
>
> > Sites -http://www.prefabsite.net/- have a website in MINUTES

silentrob

unread,
Aug 20, 2009, 12:53:04 PM8/20/09
to phonegap
By Scroll Horizontally you mean animate right or left...
XUI does do this, however it may be a little lower level then people
are comfortable with.

Something like this could be easily included as an XUI plugin...
http://blog.odynia.org/archives/29-iPhone-+-Safari-+-Gestures.html

Cuppled with XUI Tween() it would slide in and out divs.

Keep in mind it is only 6K, I we couldn't include everything, but it
should be powerfull enough to get you 80% of the way there.

The goal is to try to make up the remaining 15 - 20% in plugins.

Rob.

On Aug 20, 7:29 am, rustbucket <russell.mor...@gmail.com> wrote:
> Yeah, the inability to get XUI to scroll horizontally was the point
> where I switched to jQuery for the remainder of my development. Here's
> the plugin I used to get a good swipe effect:http://plugins.jquery.com/project/swipe
> (If you do a search for "iphone" in the jQuery plugins area you'll
> find a variety of useful plugins)
>
> Someday I'll crack open jQuery to see if I can't slim it down a bit
> more for iPhone. I'm also thinking of sharing my phoneGap application
> so people new to iphone webdev can get an idea of things could be
> structured. (not that I think for one second my way is the best way
> but learning by example tends to be pretty useful)
>
> On Aug 19, 1:16 pm, Scott Motte <sc...@scottmotte.com> wrote:
>
> > Mike, definitely take a look at iscroll.js -http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5-It will do the trick

Subu

unread,
Aug 20, 2009, 1:05:43 PM8/20/09
to phonegap
Will this jQuery plugin work only on iPhone mobile Safari ? Does it
abstract out the differences and work on other phones that supports
multi touch/swipe ?


Subu

On Aug 20, 9:53 am, silentrob <kazoo...@gmail.com> wrote:
> By Scroll Horizontally you mean animate right or left...
> XUI does do this, however it may be a little lower level then people
> are comfortable with.
>
> Something like this could be easily included as an XUI plugin...http://blog.odynia.org/archives/29-iPhone-+-Safari-+-Gestures.html
>
> Cuppled with XUI Tween() it would slide in and out divs.
>
> Keep in mind it is only 6K, I we couldn't include everything, but it
> should be powerfull enough to get you 80% of the way there.
>
> The goal is to try to make up the remaining 15 - 20% in plugins.
>
> Rob.
>
> On Aug 20, 7:29 am, rustbucket <russell.mor...@gmail.com> wrote:
>
>
>
> > Yeah, the inability to get XUI to scroll horizontally was the point
> > where I switched to jQuery for the remainder of my development. Here's
> > the plugin I used to get a good swipe effect:http://plugins.jquery.com/project/swipe
> > (If you do a search for "iphone" in the jQuery plugins area you'll
> > find a variety of useful plugins)
>
> > Someday I'll crack open jQuery to see if I can't slim it down a bit
> > more for iPhone. I'm also thinking of sharing my phoneGap application
> > so people new to iphone webdev can get an idea of things could be
> > structured. (not that I think for one second my way is the best way
> > but learning by example tends to be pretty useful)
>
> > On Aug 19, 1:16 pm, Scott Motte <sc...@scottmotte.com> wrote:
>
> > > Mike, definitely take a look at iscroll.js -http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5-Itwill do the trick
> > > > Sites -http://www.prefabsite.net/-havea website in MINUTES- Hide quoted text -
>
> - Show quoted text -

rustbucket

unread,
Aug 20, 2009, 1:08:42 PM8/20/09
to phonegap
Sorry I should have been a bit more specific. Yes XUI will allow you
to animate a block level element through the CSS property and I did
get that working. But for some reason after about 3 "left:-320px"
transforms it started to act funny, skipping back to the beginning
then zooming along to the px I specified.

Here's an early example of what I was struggling with:
http://culturedgamer.net/iphone/slide.html

I spent about 48 hours trying to figure out why and then gave up,
using more or less the same function with jQuery produced the result I
needed. So let me step back and say XUI worked perfectly for
everything I needed but then I hit a wall at the Tween function.



On Aug 20, 12:53 pm, silentrob <kazoo...@gmail.com> wrote:
> By Scroll Horizontally you mean animate right or left...
> XUI does do this, however it may be a little lower level then people
> are comfortable with.
>
> Something like this could be easily included as an XUI plugin...http://blog.odynia.org/archives/29-iPhone-+-Safari-+-Gestures.html
>
> Cuppled with XUI Tween() it would slide in and out divs.
>
> Keep in mind it is only 6K, I we couldn't include everything, but it
> should be powerfull enough to get you 80% of the way there.
>
> The goal is to try to make up the remaining 15 - 20% in plugins.
>
> Rob.
>
> On Aug 20, 7:29 am, rustbucket <russell.mor...@gmail.com> wrote:
>
> > Yeah, the inability to get XUI to scroll horizontally was the point
> > where I switched to jQuery for the remainder of my development. Here's
> > the plugin I used to get a good swipe effect:http://plugins.jquery.com/project/swipe
> > (If you do a search for "iphone" in the jQuery plugins area you'll
> > find a variety of useful plugins)
>
> > Someday I'll crack open jQuery to see if I can't slim it down a bit
> > more for iPhone. I'm also thinking of sharing my phoneGap application
> > so people new to iphone webdev can get an idea of things could be
> > structured. (not that I think for one second my way is the best way
> > but learning by example tends to be pretty useful)
>
> > On Aug 19, 1:16 pm, Scott Motte <sc...@scottmotte.com> wrote:
>
> > > Mike, definitely take a look at iscroll.js -http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5-Itwill do the trick

rustbucket

unread,
Aug 20, 2009, 1:10:35 PM8/20/09
to phonegap
Subu, not sure if it will work with the devices outside the iphone. I
do know it relies in the ontouch, ongesture, etc events. If Android
handle those events I'd say there's a good chance it'll work.
> > > > Mike, definitely take a look at iscroll.js -http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5-Itwilldo the trick
> > > > > Sites -http://www.prefabsite.net/-haveawebsite in MINUTES- Hide quoted text -

Hugo

unread,
Sep 1, 2009, 9:29:28 PM9/1/09
to phonegap
Thanks - I tried to put frame the impact of using jQuery Vs XUI with
actual performance stats, so I put together a quick & dirty
performance test benchmark application.

1. Starting with an out-of-the-box phonegap application
2. Removed unused features that I assume impact application load time
( "DetectPhoneNumber", "EnableAcceleration" etc...the application I am
working on only uses the "EnableLocation" which I left enabled)
2. Changed index.htm with something resembling http://extjs.com/playpen/slickspeed/
(but testing only one framework at a time, either XUI or jQuery)
3. Referenced "xui-min-0.9.0.js" in the header of index.htm
(alternatively referenced "jquery132min.js" depending on test)
4. Deployed app to the device (iPhone 3G)
5. Disconnected the device from xCode to test without debugger
interference, started the app and tested each config (XUI or jQuery):

Application load time was typically 4 to 5 sec with jQuery Vs 3sec
with XUI (XUI almost 1.5 x times faster in this config altough
presumably the benefit would be less obvious an app using more than
just "EnableLocation")

Average selector execution time was 5.3ms with jQuery Vs 4.3ms with
XUI (XUI 1.25 x times faster)

For the heck of it I also tested another configuration where I
downloaded & displayed 3 x 9KB pictures in index.htm before executing
the selector speed test. The idea was to assess the impact of filling
the memory with stuff other than javascript. Having loaded XUI or
jQuery from the header didn't seem to make a difference in terms of
the image loading times, and my selector execution times were
essentially unchanged

Feel free to comment/challenge my results or methodology, feedback
always appreciated!

Hugo

On Aug 18, 10:49 am, silentrob <kazoo...@gmail.com> wrote:
> Regardless of how you use your app, online or offline, you are still
> limited by the device. For instance, on the iphone you only have 25K
> of memory to store your application logic before the chipset reads
> from disk, this can be a huge performance hit.
>
> The other consideration isXUIis designed with mobile in mind, this
> means it supports mobile specific gestures and hardware accelerated
> animations. Even after you load in the bloaded cross supportedjQuery,
> you will still need to shim it with these things for your app to work
> smoothly.
>
> Cheers.
>
> Rob Ellis
>
> On Aug 18, 3:45 am, daniel <goo...@retraced.de> wrote:
>
> > Well i usexui, it has enough functionality for me and the fact that
> >xuihas less browser-compatiblity-code (there are not as many browsers
> > for mobile devices as there are for desktops) makes it execute faster
> > thanjquery. But if you needjquery-functionality try it out if it's
> > fast enough for your needs!
>
> > Greets
>
> > On Aug 18, 8:41 am, Hugo <hhar...@gmail.com> wrote:
>
> > > New to PhoneGap, playing around and exploring. Can someone help me
> > > understand the argument for usingXUIoverjQuery? I understand that
> > > the smaller size of the js library file is a benefit for an online
> > > app, but when using phonegap I think most developers would opt to
> > > store all libraries of the device, so the size of the libraries
> > > becomes a moot point.
>
> > > If you elected to useXUIoverjQuery, can you tell me what benefit I
Reply all
Reply to author
Forward
0 new messages