Skip to main content

Experience Design

What is Zepto.js, and Why Do I Care?

It is an 8 KB substitute for jQuery. That should answer both of those questions.
In the world of Javascript libraries there are a plethora of options, but no one knows what any of them are; we all just use jQuery. jQuery is powerful, it caters to all browsers, and above all it works. However, its robust power and support for all browsers modern and legacy comes at a price; the latest minified jQuery library file is a whopping 32 KB.
While that is not a major concern on desktop sites, 32 KB is quite a big dish to serve to a mobile device. The kind folks who built jQuery took this to heart and came up with jQuery Mobile, which strips a lot of features not needed on a mobile website and trims the file size down to 24 KB. Unfortunately, if 32 KB is considered too much, I consider 24 KB a weighty file size as well.
While jQuery Mobile is a slimmer version of jQuery, it is still at its heart…jQuery. It takes all browsers – desktop and mobile – into consideration, it boasts a whole slew of new mobile-specific features, and it is quite powerful. But not every mobile website needs such a robust Javascript library behind it. Enter Zepto.js.

Zepto is a minimalist JavaScript library for modern browsers that is based off of the jQuery library. The APIs and syntax for Zepto are identical to those of jQuery, so if you know jQuery, you know Zepto. What differentiates it from its bulky big brother, and makes Zepto so intriguing is that it is a truly mobile optimized library, weighing in at a cool 8.4 KB. That is a remarkably small file size for a full Javascript library, and makes it perfect for creating mobile apps. The faster the Javascript library loads on your page, the faster your website will be.
So you are asking yourself, “What’s the catch?” A speedy download time for web browsers is definitely a good thing, but this library is not by any means an all-out replacement for jQuery. It does come with its hiccups.
For starters, it does not cover 100% of jQuery’s features. It gets the vast majority, and probably everything you will want or need, but it is missing features.
Secondly, one of its biggest boasted benefits – its support for only the most modern browsers – is also one of its biggest downfalls for a realistic responsive implementation. There is no Internet Explorer support for Zepto. No IE6, IE7, IE8, nor IE9. One might argue that if you are creating a mobile-only solution, Internet Explorer support is not really necessary. That is the idea behind their decision, but this also means there is no support for IE on Windows Phone 7 or 8. While Windows Phones do not hold a majority market share, it is not a very prudent development strategy to exclude any potential users.
Finally, it appears that while Zepto beats out jQuery and jQuery mobile on download times, it severely lags behind in time taken for DOM manipulation. This head-to-head review of the different libraries demonstrates how it stacks up in comparison.
So should you be replacing your jQuery files with Zepto for all your responsive design projects? No. The size reduction does not outweigh the crippling side effects it would produce in a desktop environment. Should you start using Zepto if you are only building a mobile solution? Probably. It at least deserves to be considered at the start of development.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Zach Handing

I'm a front-end developer working at Perficient Digital, and I'm passionate about HTML, CSS, and grilling chicken.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram