Monday, June 24, 2013

Alternative Libraries to jQuery/ jQuery Mobile

jQuery has been a really useful web development platform for most developers out there.

It's packed full with features that makes customizing your web page/ app to a very unique feel a blessing to us developers.

To make matters even better, it's adoption by most people has been phenomenal, now you have sample of how to do this/ that within your finger tips, tutorials on how-to's can be found with a breeze and a large majority of them have been speced for jQuery.

In summary, it not only improves your JavaScript Library, it adds on to it's CSS.

Here is the problem though, jQuery was never optimized for mobile web app development and so moving your wonderfully designed Website to a mobile platform or even the knowledge of designing such intuitive pages to a mobile platform would turn out a very slow, buggy and at most times very unresponsive website.

The Team at jQuery trying to fix this can't be blamed for not trying as they have been working on a mobile version since the era of mobile app development began to become a norm. They pushed out a very slimmed down and More responsive jQuery Mobile(JQM) but at the cost of certain features  and well they did provide some features that are directly related to mobile app in place of some of these to compensate.

Having worked with developing PhoneGap for about a year I noticed something interesting.

JQM is a beast, it swallows as much space in direct relation to it's performance hence if you are not into using more than(> 5) features it offers (note not cosmetic features but rather very important features), I would advise you stay away from it unless you don't mind tweaking JQM to suit your needs.

Here are alternative libraries I believe you might find very useful

1. Zepto.js: is a slimmed down JQM in that it offers so many features thatcan be found in JQM but does so at a fraction of the size of the JQM library at only 8KB. It can be downloaded from Zepto.

2. Snack.js: is a small library but shouldn't be under-estimated by it's size as it's pretty handy for developing complex cross-browser app. This size is achieved by going a different path to JQM.
It can be downloaded from Snack.js

3. $Dom: is a useful libarray using dom objects for animating, traversing pages. The perfect use case for this library is when building responsive websites, which can be viewed on smartphones, tablets and desktops. It can be downloaded from $DOM.js

Hope these help :D.

3 comments:

  1. I thought JQuery and JQM are totally different.

    JQM is the equal of JQueryUI for mobile space. As such it is built over JQuery and provides web components.

    Neither of the alternatives you introduced do that. They only provide the functionality of JQuery itself.

    ReplyDelete
  2. Hi Mealone, Adil,

    Sorry if I may have confused you or we aren't in agreement, yes some of these may have not been fully optimized for Mobile, however they each 1up JQuery and JQM in the fact they are lighter and more responsive.

    Likewise the offer most of the core JQuery features without the deficiencies JQM inherits from JQuery.

    I do not detract that Jquery is bad, note the comment, "The Team at jQuery trying to fix this can't be blamed for not trying as they have been working on a mobile version since the era of mobile app development began to become a norm. They pushed out a very slimmed down and More responsive jQuery Mobile(JQM) but at the cost of certain features and well they did provide some features that are directly related to mobile app in place of some of these to compensate".

    As I mentioned, on a case to case basis, it does work but does not entirely remove the size issue.

    I am not a know it all but just writing on what little I have garnered from a year plus.

    Thanks for the opinion and reading my post.

    In regards alternatives to JQM, you can try the following:

    Sencha Touch, the recently released AppFramework(not yet tested but heard a few good things about it), Zepto(already mentioned) and jqTouch.

    ReplyDelete