jBone. Replacing jQuery for Backbone or 2kb for DOM manipulation

Greetings to all.

jBone is a micro library (2kb gzipped) for working with DOM in modern browsers. It partially implements the jQuery interfaces for the main methods necessary for Backbone to work correctly, but it can be used independently.
')

Problem

jBone was born in the solution of a specific problem - the development of a mobile application. The main requirements were responsiveness UI and application download speed. It soon became clear that almost half of all the code was taken by jQuery, and very simple tasks were solved using it.

It was decided to abandon jQuery. I really love it, for its intuitive interfaces and cross-browser compatibility. I would like to leave the interfaces, but full cross-browserness was not needed, and I knew that much less code is needed to implement this functionality. In addition, you can get a good leap in performance using the modern features of the browser instead of jQuery methods.

Search solutions

The analysis showed that there are ready-made tools for solving this problem, but they all have flaws. In the beginning, I decided to look at Zepto , about 30 kb, not so little, though much less than jQuery, besides, it has significant performance problems, losing even jQuery by performance at times. The next step I tried was to build “my jQuery” using Ender , but the resulting file size did not fit into my expectations. The third attempt was the desire to get Backbone without additional libraries to work with the DOM. I first found Backbone.Native . The idea is not bad, but it seems to me unwise to refuse convenient aliases, the amount of code will grow much faster, and the process of writing code will not be so convenient. This pull request looks much more interesting, the idea is to make jQuery optional for those who need it, for others it is possible to use native methods, as in Backbone.Native, but the problem of convenience and speed of development remains.

Clenching my teeth, I decided to write my bicycle. I set a goal to meet in one day. The prototype was supposed to provide minimal compatibility with jQuery and pass all unit tests for Backbone, I didn’t want to spend more time fundamentally, it would mean that in the end we would come to the same thing where we started with jQuery.

Decision

Now jBone is about 10kb of uncompressed code, completely covered with tests and providing jQuery replacement for Backbone.

Let's talk a little about implementation and differences from jQuery.

Selector engine

This is a simple querySelector , with its advantages and disadvantages , in the first place it is not sizzle and do not expect from it full compatibility with it. But it is fast, very fast compared to jQuery.

Events

The main difference is that you will have to work with native javascript events, which is good. The fact is that events are almost completely rewritten in jQuery. For example, if you add a listener to an element using the addEventListener method, the event will not “pop up”, if the node is not inside the document, jQuery solves this “problem”, I think because of this “feature” and backward compatibility issues, it is still very long will not be able to switch to fully native events. JQuery has its own Event object, which has a set of properties different from the standard one, and so on. These are all trifles, but they need to be remembered.

CSS

In jBone, the css method takes properties in the camelCase style, that is, instead of border-color you need to write borderColor .

Attributes, Animations

There is almost nothing to work with attributes in jBone, because everything you need is in JavaScript.

Working with element.[setAttribute, hasAttribute, getAttribute, ...] attributes element.[setAttribute, hasAttribute, getAttribute, ...]
Working with classes element.classList.add[remove, toggle, contains, ...]
Work with data attributes of element.dataset

The same applies to animations, I believe that the time has come when in so many tasks we can abandon the animations on the JS side and completely hand them over to CSS, separating the application logic from the presentation.

AJAX, Deferred

This part in the library is not covered at all and left the right to choose. There are a huge number of implementations of AJAX, as well as implementations of the Promises / A + standard, for example, when , Q , or simply-deferred . The last one came up to me, because it has the least weight, it can patch $ and covers all the capabilities of the Deferred object implemented in jQuery.

Total

As a result, we got a very small and nimble abstraction for DOM manipulations, leaving the usual jQuery interfaces in most cases.

Source code on github .
Documentation
API