Dabby.js: Lightweight Modular ES6 jQuery clone

A lightweight modular jQuery clone/alternative library built for modern browsers in ES6.

This project is now in beta, make sure to test your integration with this code thoroughly before deploying

jQuery is awesome, why do I need this?

jQuery is a great library, the API is simple yet expressive, but with advancements in browser technology often the full functionality of jQuery is not needed, and there is not really a granular way to remove the bits you aren’t using.

Wouldn’t it be good to have a simpler jQuery like library that is modular?

Dabby.js is a jQuery alternative designed to be as simple and streamlined as possible whilst covering as much of the jQuery API as much as is feasibly possible in a small size (<10kb minified and Gzipped), you can also build it as part of your project and only include the bits you are actually using.

Find out more about the project here.

I’m sold, how do I get started?

Want to get started quickly? Download the latest release here.

Want to build the bundle yourself? Make sure the following software is installed:

Clone the repository, and build it:

$ git clone https://github.com/hexydec/dabby
$ cd dabby
$ npm install
$ grunt

Then swap jQuery out for dabby.js in your project. It does support AMD modules and CommonJS, so if your project does too, have a fiddle with your build to achieve this.

Next you should probably audit and refactor your code to update anything that Dabby.js will definitely not support, like custom pseudo selectors. Ajax calls will probably need checking over too (Promises are not supported).

Then run it in the browser, or through your test suite to highlight any other issues.

Dabby.js compiles to both ES6 and ES5 bundles, to support all browsers, include Dabby.js like this:

<script src="dist/dabby.es5.js" nomodule></script>
<script src="yourfile.es5.js" nomodule></script>
<script src="yourfile.js" type="module"></script> // include dist/dabby.js or dist/dabby.min.js in your ES6 file.

Browser Support

Browser support for Dabby.js can be found here:

Dabby.js API

Dabby.js is billed as a jQuery clone library, and as such tries to implement as much of the jQuery API as is feasible without getting away from being fast, small, and letting the browser do most of the work.

See the API documentation here.

Custom Builds

As Dabby.js is built in ES6, you can include just the parts you need in your project (If you are using ES6 modules). Include the core library like this, methods are imported without a variable:

import $ from "/src/core/dabby/dabby.js"; // update to reference where you have the project stored
import "/src/attributes/attr/attr.js"; // if you need to create elements with attributes like $("<element>", {some: "attributes"}), include this
import "/src/traversal/filter/filter.js"; // I need $.fn.is(), which is written with $.fn.filter() and $.fn.not()

You can either do this in each module you need dabby.js in, or build a file that imports all the methods you need for your project, and include that somewhere.

Troubleshooting

You can always swap dabby.js out for jQuery to see if the issue is with your code or dabby.js. It is a very young library which hasn’t been tested as much as jQuery, so expect bugs. But this library is being used in production of most of my own websites.

If the issue still persists, you can create an issue for it in the tracker.

Contributing

If you find an issue with dabby.js, please create an issue in the tracker, fork the code, fix the issue, then create a pull request, and I will evaluate your submission.

Also look at the To Do list and the coding style guide.

Licence

The MIT License (MIT). Please see License File for more information.