Dabby.js: ES6 jQuery Clone

Why Build a jQuery Clone

Whilst jQuery has fallen out of favour of late, developers gravitating toward React and the like, jQuery is still a very powerful and useful library, and the API is beautiful.

But as an older library, it has in places become a little out of date due to browsers replicating its functionality natively, the fact that it is still written in ES5, and probably has code that still targets legacy browsers.

For my own requirements, I am fairly JavaScript light with my developments, and when your own JavaScript is ~10KB (Gzipped), it seems a bit overkill to include a ~30kb (Gzipped) library, especially when you are only using a fraction of its functionality.

So I decided to develop my own version, which is designed to be as small as possible, modular, and modern (ES6). I also decided not to include the animation module, as this should be done with native CSS.

How Does It Work?

Dabby.js is built using modern browser API hooks in ES6, each method is contained within its own module, and it has a build system that enables you to include the whole library, or just the parts you are using.

The whole library is ~18kb (~6kb gzipped), this makes the library much smaller to download and much faster for the browser to process.

The library includes a test suite, and documentation so it can be tested and compared against jQuery. The documentation provides basic examples and difference to jQuery.

Differences between dabby.js and jQuery

• No fx library, if you want effects, use CSS and class toggles‎
• Extra CSS selectors like :first are not supported, and dabby doesn't have a selector engine plugin architecture, it supports what the browser's document.querySelectorAll() supports‎
• Doesn't support the deferred object‎
• Events return the native browser event, not a super or custom object like jQuery‎
• Ajax support is much more basic, dabby doesn't support global callbacks or promises, and only offers a subset of the configuration options
• ‎The Ajax object returned is the native XHR object, not a super or custom object like jQuery's jqXHR object‎
• Dabby does not stack selectors like jQuery does, so methods like andBack() are not supported‎
• It may not support all the inputs of each method that jQuery does (See documentation for each method to see differences if available)

What I Have Learned

I learned a lot doing this project, as my first public project, there was a lot to learn about managing a project such as using GitHub, versioning, writing release notes, and responding to user queries.

Also there was just the JavaScript, which I learned a whole load of new things about browser API's, writing efficient code, and ES6 which I hadn't tackled before this project.

Using Dabby.js in Your Own Projects

Dabby.js is open source software, with an MIT licence. It can be downloaded freely from either GitHub or via NPM.