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

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 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 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

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

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.