Question

I’m working on a custom lightweight JavaScript library that will need to run stably across the major browsers as well as across numerous independent sites without compromising or being compromised by existing libraries or namespaces. Perhaps most importantly, the library will need to be lightweight (~15k max).

UPDATE To clarify the need for such a small library: This is a third-party service that sites would pull into their page. We need to keep everything as light-weight, speedy, and self-contained as possible since we have no control over the existent libraries, speed, or page load. 15k is the target number just for the library that is accessed by the dynamic content of the service.

At this point my idea is to start with the most condensed jQuery-like base I can find, and then extend with custom modules.

Desired features:

• Handle cross-browser inconsistencies like a champ (IE 6+, Chrome, FF 2+, Safari 3+).
• Event handling (queuing/binding/broadcasting)
• Efficient selector engine
• Chaining
• DOM manipulation w/ basic animations
• Readily build-able and version-able from modules

I’ve come across EnderJS and MicroJS but I can’t seem to find a lot of discussion on either. I’m more familiar and interested in Ender at this point since it seems to address all of the above features almost out of the box with “The Jeesh” weighing in at 7.5k. Tacking on a couple additional packages only pushes it to 10k in my case which would be perfect since I should only need a few k to flesh out any custom modules. It also would allow me to write and version distinct modules that can be incorporated and compressed into the main library at build-time, as well as define a unique namespace to hold it all together and hopefully protect it. Another compelling piece to the Ender library is its use of NodeJS which I would love to play around with more anyway. Having said all of that, however, I am still wide open to other ideas.

So my question is:

Does anyone have any experience with either EnderJS or MicroJS, or have another solution/approach to what I’m trying to accomplish? I realize this is not the place for “chatty, open-ended questions”, and that’s not my intent here. I’m just looking for suggestions on the best way to approach building a light-weight custom library without reinventing the wheel and to instead plug into the most up to date micro-libraries available.

Answer 1

I’ve used Ender recently, and I’ve had no issues with it really. There are a couple of jQuery functions that aren’t available from the off, but anyone who is fairly adept at JavaScript can circumvent this. Especially given the fact that Ender has a near identical structure and way of extending as jQuery.

I’ve used Ender on a live site recently and funnily enough I have used a couple of scripts from microjs.com alongside my own functions file, and all the JavaScript weighed in at around 15k. It’s not hard to make your entire site code weigh around that or less.

As well as building a lightweight version of Ender, for example starting with the Jeesh, you might also want to consider async loading, an example is provided by Dustin Diaz:

<script src="ender.min.js"></script>

<script>
$.require('/js/core.min.js', 'core')

$.ready('core', function () {
  $(document).ready(function () {
    $('<p>hello world</p>').appendTo('body')
      .bind('click', function (e) {
        $.require('/js/ajax.min.js', function () {
          $(e.target).css('position', 'relative')
            .animate({
              left: 500
            })
        })
      })
  })
})
</script>

By doing this you could essentially make the original ender build even lighter, and defer some of the loading, but generally speaking, if it’s light in the first place you should be ok.

You might also want to take advantage of the Google closure compiler that Ender gives you access to in order to compile your site code alongside ender.

Finally, as you’re probably well aware, you can do noConflict in Ender as well, just in case they already have another library present.

As you build and configure Ender you will probably want to take advantage of ender-wallet which will give you a sort of API view, allowing you to remove libraries you might not need at all.

hotlinked screenshot: