Alexander Dickson

Differences between jQuery and Zepto

Zepto markets itself as a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. So just how close is Zepto’s API to jQuery? Pretty damn close in fact. It makes picking up Zepto a breeze if you know your way around the jQuery API. But of course, there are nearly as many differences as there are similarities. I’m going to run through some gotchas I have experienced when treating Zepto as a drop-in replacement for jQuery.

Selectors

Zepto implements only a subset of jQuery’s proprietary selectors. It’s definitely something to be mindful of.

clone()

Zepto’s clone() doesn’t support passing in an argument to clone event handlers.

data()

Unlike jQuery, Zepto doesn’t attempt to do any type inferring from the value stored in the data-* attribute.

offset()

Zepto’s offset() handles dimensions different to jQuery: it correctly calculates the dimensions of an element that has had its dimensions transformed via CSS and the transform property (via getBoundingClientRect()). At the time of writing, jQuery doesn’t; it will return the normally calculated values.

show()/hide()

These methods only manipulate the display property of the element. You can’t pass in an argument for animation.

toggle()

Thankfully, Zepto’s toggle() isn’t overloaded like jQuery’s.

ajax()

Zepto’s ajax() returns the native XHR object, not a Zepto wrapped one.

The event argument of events

The event argument passed to the callback of event handlers is not wrapped with anything Zepto specific.

pluck(), indexOf(), etc

Zepto provides some convenience methods that jQuery does not. It’s good to know about these before you reach for Underscore or implement them yourself.

Zepto and its host environment

Zepto steps on its host environment by shimming String.prototype.trim() and Array.prototype.reduce(). This shouldn’t matter if you write your JavaScript defensively, but it’s still good to know.

What’s the best place to use Zepto?

I have found Zepto is mostly at home when developing for mobile exclusivey, and in fact, that was its original desgign goal, to be a lightweight library for mobile browsers.


Want to discuss this post? Just mention me @alexdickson.