5 Lightweight jQuery Alternatives for Mobile Development

5 Lightweight jQuery Alternatives for Mobile Development

We all love jQuery. This site is even dedicated to building beautiful examples that use the library. But there are situations in which jQuery is not the smart choice. If you are using it only for simple DOM manipulation or an AJAX request or two, why slow down your page load times and introduce an additional dependency?

The problem is more severe on mobile devices. You see, although we include jQuery via a CDN like Google’s, it is still not free – downloading it and parsing it still takes time. The very thing that made jQuery popular – perfect cross browser support, also makes it too bulky for use on mobile devices. After all, why would you need your mobile website to support old IE versions if it is meant to be viewed only on iOS and Android?

Getting Lean

There are additional problems to be solved. jQuery’s approach to animations for instance is to modify the css style properties of an element in small intervals. This works fine on the desktop, but performs poorly on mobile devices. Pure CSS animations on the other hand (that use transitions and @keyframes) are hardware accelerated and smooth.

This means that a whole new approach must be taken for building mobile websites. Fortunately, there are five libraries that can help us with that.

Zepto.js

Zepto.js

Zepto.js

This is the most feature-rich library out there that is specifically designed for iOS and Android (both using the webkit engine). It retains nearly all of jQuery’s functionality in 8kb (instead of jQuery’s 32) and adds support for touch events (including pinch to zoom) and pure CSS animations. It takes a modular approach – you only add the components that you need for an even leaner library.

Site | Github

Snack.js

Snack.js

Snack.js

Snack is a small and simple JavaScript library. Though ideal for small projects, it’s got enough in it to build complex, cross-browser web apps. It takes a different approach than Zepto in that it breaks away from the jQuery API but at 3kb is half the size. You will have to handle animations yourself with this one.

Site | Github

$dom

$dom

$dom

$dom is even smaller – at 2kb it packs quite a punch. It keeps cross-browser compatibility and even handles animations (albeit taking jQuery’s approach with a timeout), but omits functionality like array manipulation functions and AJAX. The perfect use case for this library is when building responsive websites, which can be viewed on smartphones, tablets and desktops.

Github

xui.js

xui.js

xui.js

At 4kb XUI is a small framework for authoring HTML5 mobile web applications. It works across all of the devices in the mobile landscape and even has special builds for webkit, ie mobile and blackberry browser. It supports touch events and even has a jQuery compatibility plugin.

Site | Github

140medley

140medley

140medley

You can’t go more micro than 140medley. This 0.5kb collection of functionality was inspired by the 140bytes contest, where participants create tweet-sized JavaScript snippets. It supports templates, events and even AJAX. This is pro territory only, as the only documentation provided is through comments in the cryptic source code.

Github

Conclusion

These are only some of the exciting new frameworks that are out there. But it isn’t enough to have an awesome name or site – the community is what makes or breaks an open source project. So if you find something interesting that is worth your time, make sure to spread the word about it.

Join our newsletter and get our PSDs!19,510 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

8 Comments

  1. Jeff Owens says:

    jqmobi should definitely be on this list. Similar to zepto but with a different implementation.

    1. Jesus Bejarano says:

      Waow you are right and is even lighter that zepto. Defenitely should be in this list

  2. JqueryMobile 1.1 has improved the way it does transitions on mobile devices (not just only on iPhone and Android with high capabilities).

    I've tested it and the results are quite good. I highly recommend it. Anyway it's interesting to know other frameworks :-)

    1. I also have tested JqueryMobile 1.1 good things but here is some great resources we've found

      Thanks Martin Angelov for sharing

  3. soyjavi says:

    QuoJS (http://quojs.tapquo.com) should definitely be on this list. Similar to zepto but with a different implementation.

  4. Scott says:

    Zepto.js is great, we use it at work for building HTML5 apps with PhoneGap...if you know jQuery the learning curve is minimal...

  5. Cedrik says:

    QuipoJS ( http://quipojs.quipoapps.com ) also should be on the list, a similar zepto like library, but with only 12K minified.

  6. Dustin Diaz says:

    Hey there, found this in my news feed. You some how left out Ender. http://ender.jit.su — allows you to only build what you need. Otherwise, nice list. cheers.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links