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?

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+

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.

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

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 .

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.

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.