What is the difference between Zepto and jQuery 2?

Question

There are those two similar projects:

Zepto.js

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API.

jQuery 2.0

jQuery 2.0 beta: Here is your taste of the future, a jQuery that can be faster and smaller without the need to support IE 6, 7, or 8. It’s a great choice for platform-specific HTML applications.

Is this only about performance or do they follow different approaches?

Hockenberry

In case you ever try to switch from jQuery to Zepto: blog.pamelafox.org/2011/11/porting-from-jquery-to-zepto.html – Poll

This is a useful, interesting, relevant question about a specific programming problem. Why was it closed? It's not "which is better", but "what are the caveats of using" – Burkett

@BenjaminGruenbaum: Why was it closed? Well, despite SO describing itself as a Q&A site, many people understand it as a problem/solution site. The 2 are not the same. If you don't have a specific problem, many people will close your question. I think that's dumb, but that's how many people behave. – Adp

@Adp you realize that comment is 10yo? – Burkett

@BenjaminGruenbaum: what difference does that make? We still have plenty of people who close questions with very poor rationale. – Adp

@Adp it shows comments about it don't help :] – Burkett

I don't share your assessment of the situation. The lack of immediate success doesn't invalidate all effort. – Adp

Answer 1

The primary difference between Zepto.js and jQuery are their respective file sizes of Zepto.js's ~20kb (minified, not gzipped) instead of jQuery's ~80kb,And Zepto.js's ~10kb (minified, Gzipped) instead of jQuery's ~30kb. Furthermore, Zepto’s support for browsers such as IE<10 is either lacking or not guaranteed, its target platforms are:

• Safari 5+ (desktop)
• Chrome 5+ (desktop)
• Mozilla Firefox 4+
• iOS 4+ Safari
• Android 2.2+ Browser
• Other WebKit-based browsers/runtimes
• webOS 1.4.5+ Browser
• BlackBerry Tablet OS 1.0.7+ Browser
• Amazon Silk 1.0+
• Opera 10+
• Internet Explorer 10+

Frugivorous

jquery 2 is ~30kb and zepto is ~10kb when both are gzipped and minified. Non gzipped, jquery 2 is still ~80kb and zepto is ~30kb. – Secure

-1. As asparagino points out, MHD's numbers are incorrect. His answer is valid. – Ultimatum

Both Zepto & jQuery support custom builds so kitchen sink size of either may not be so important. The difference is jQuery has better support and performance, is updated more frequently, and has a more active community. The appeal of Zepto is largely diminished with jQuery 2.0 covering the gaps Zepto once filled. – Keon

Answer 2

jquery 2 is ~30kb and zepto is ~10kb when both are gzipped and minified. Non gzipped but minified, jquery 2 is ~80kb and zepto is ~30kb.

Use an analytics program to check the audience for your site. If a significant chunk of your users use IE9, you need jquery and zepto won't fly. If over a few percent use IE8 and lower and you can't face leaving them stranded without your site, you will need to use jquery 1. If you're targetting that last one, I'm sorry - a lot of new shiny toys won't work for you.

If you're building an html5 app for android/ios/phonegap etc then you're primarily targeting webkit, so zepto does give you big size saving. The primary insight and reason for zepto to exist is that when running on webkit only platforms a lot of jquery's cross platform workarounds are simply unnecessary.

Zepto does also add a couple of touch event handlers to assist with mobile dev, but it's mainly the page weight vs platform support you need to think about.

Secure

Presumably if you pick any one platform then cross-platform workarounds are unnecessary :) – Search

Zepto is closer to ~25kb ;). And they have build instructions to repackage the library for the minimum size that you need. – Ultimatum

I assume you're talking about the non-gzipped but minified build, which hasn't really fluctuated more than a couple of kb in the eight months since I wrote this. So... 25kb is ~30kb :P – Secure

Answer 3

This is a somewhat old question, but I would like to add performance. From what I'd heard, Zepto performed better than jQuery.

This jsPerf shows different results. I can use jQuery's class selection (of a single element) 137% as often, compared to Zepto's. For ID selection, I can use jQuery's 285% as often.

That's a huge deal considering on most applications, DOM interactions are the only performance statistic that matters (other than network requests).

Also looking at that perf, I can see that I could do document.getElementsByClassNAme 8326% as often as jQuery, so we should all ditch all of these if possible :-)

Vinnievinnitsa

That's not what the guys at Zurb say. One of the reasons they dropped Zepto from their CSS framework was because jQuery outperformed Zepto even if Zepto's file was smaller. Other reasons were because many plugins were written for jQuery. Check out their blog post: zurb.com/article/1293/why-we-dropped-zepto – Marchioness

@ricardozea, this answer and that article say the same thing: jQuery is faster with selectors. To be clear, though, you'd need about 100 jsperfs to fully test the libraries, and then hire a statistician to determine which is faster on average for the average site and average user. – Vinnievinnitsa

You're saying: "...Zepto performed better than jQuery.". Yes, we're agreeing that jQuery is faster. – Marchioness

heh Nope :-) That's just what I've been told; my findings were that jQuery was faster (with selectors at least). – Vinnievinnitsa

Answer 4

Zepto lacks the deferred/promise API that jQuery features. There is an add-on, Simply Deferred, which remedies this: https://github.com/sudhirj/simply-deferred .

Domingadomingo

Consider reading that about jQuery promises: domenic.me/2012/10/14/youre-missing-the-point-of-promises – Hengelo

Answer 5

I think never used zepto for fast wroking transition into web take a look Deep inside his icy cave, the wise and powerful Yeti heard people asking, "Where did Zepto go?" Back when Foundation 4 was being conceived we switched to Zepto (with a jQuery option) for its smaller file size and faster load time.

But over time we found that lighter file size did not translate into better performance overall. Sure, Zepto downloaded quickly. But once loaded, it wasn't quite as fast as jQuery. It didn't help that many third-party plugins required jQuery, not Zepto — in fact, we found that some third party JavaScripts conflicted outright with Zepto.

Maintaining different code bases wasn't easy for us, either. For example, Zepto lacks a proper height calculation function, making certain grid calculations difficult.

To solve all this, the answer was clear as a spring Himalayan sky: Foundation 5 uses jQuery 2. In addition to better speed and industry acceptance, jQuery 2 benefits from better documentation and support as well. jQuery is API compatible.

**

But we assumed Zepto would be faster than jQuery. We didn't want to make the same assumption twice, so we tested Zepto vs. jQuery 2. The result: jQuery 2 has more operations per second. That gives Foundation 5 better performance, which translates to better experience for all users.

**

In the end, we want to help people design great products faster — and this time, that means giving the most responsive front-end framework in the world itself a speed boost.

Stroke

If you are so concerned about performance, why are you using jQuery at all? Sure jQuery has better performance than Zepto, but jQuery's performance sucks compared to VanillaJS. Basically, VanillaJS is a better and superior version of jQuery. Imagine vast libraries of high-performance optimized functions packed together into a featherlight package. That's the power of VanillaJS. I highly reccomend trying it. – Charyl

Answer 6

From what I've read, people seem to lean heavily towards Zepto. The most-common reasoning behind that is file-size, but jQuery 2 is actually faster than Zepto after it is loaded. Also, you won't find much support for Zepto since most people develop around jQuery. I'm not suggesting you shouldn't use Zepto, but you should look into why you want to use it and if other JavaScript libraries you are using support/conflict with it.

I would say it depends on your project. For personal or limited use, Zepto may be the better option. However, jQuery is much more supported by other libraries and if the file size is the only thing determining your reason then it is flawed. JavaScript should be loaded after the page is loaded, therefore it wouldn't hinder your page load time in either case.

Here is performance test including jQuery 1.7.2, Zepto 1.0rc1, and also jQMobi 1.03.

Dinghy