Recently we had to work on the project, which used the Zepto.js in frontend layer. This library intrigued me, so I decided to write a few words about it.

Zepto.js

Zepto.js is a lightweight JavaScript framework, which is doing very well, especially in the WebKit-based browsers. It has syntax mostly compatible with jQuery. So, for those familiar with jQuery, working with Zepto.js won’t be a problem.

Example:

$('#element').html("Hello!");

Can we use Zepto.js as a replacement of jQuery?

In general yes — they are compatible at the core level. Still, I would not recommend to rely on the solution developed in this way, without carrying out detailed tests.

In addition to standard features, which a modern JavaScript framework should provide, Zepto.js supports common features needed for mobile devices needs (detection of environmental, touch events).

Another advantage is the small size of the basic library, so it loads faster than, for example. jQuery.

So Zepto.js will a good choice for creating projects for mobile devices. Zepto works great with solutions such as PhoneGap.

Zepto.js available on the MIT license. Library’s website is: zeptojs.com, and contains complete documentation.

Using Zepto.js

Zepto sets globally the $ method for itself at the moment when this is not defined yet. There’s no something like Zepto.noConflict.

Valorant Cheats

Examples:

// get paragraphs of the document
$('p');

// change text / html in an element
$('p').html('Hello World');

// change styles
$('p').html('Hello World').css('background-color: blue');

// iterates through the elements
$('div').each(function(element) {
  alert(element);
  // …
})

In the same way as jQuery, we will do many other tasks, such as working with AJAX.

Visual effects — no problem:

$("#element").animate({
  opacity: 0.25, left: '10px',
  color: '#aabbcc',
  rotateZ: '45deg', translate3d: '0,10px,0'
}, 500, 'ease-out')

Another advantage of Zepto.js is the ability to create plugins, similarly as in jQuery:

;(function($){
  $.extend($.fn, {
    foo: function(){
      // 'this' refers to the current Zepto collection

      return this.html('bar')
    }
  })
})(Zepto)

In conclusion, I recommend further article about Touch gestures with Zepto.js:

http://www.appliness.com/zepto-and-touch-gestures/

Summary

As you can see, we can work with Zepto.js similarly as with jQuery, although libraries have a different construction and sizes.

With solutions such as jQuery, it’s difficult to compete. But it’s not the point — Zepto.js shows, that it is possible to gain in importance among such strong solutions.