Ender.js - The open submodule library

With great excitement it brings me pleasure to announce an all-to-predictable endpoint of recent events — Ender.js, an open submodule library. Ender is a small yet powerful JavaScript library composed of application agnostic opensource submodules wrapped in a slick intuitive interface. At only 8k Ender can help you build anything from small prototypes to providing a solid base for large-scale rich applications.

Inside Ender you get

a powerful Class system
a bullet-proof DOM utility
a multi-platform Event provider
a fast light-weight selector engine
a dynamic asynchronous script and dependency loader
a solid http request connection manager
a no-frills element animator
and a core set of utilities provided by underscore

Some examples

DOM queries

$('#boosh p').html('hello').css({
  color: 'red',
  'text-decoration': 'underline'
}).addClass('blamo');

Extending

$.ender({
  color: function (c) {
    return this.css({
      color: c
    });
  }
});

$('#boosh a[rel~="bookmark"]').color('orange');

Classes

var Person = $.klass(function (name) {
  this.name = name;
})
  .methods({{
    walk: function () {}
  });
var SuperHuman = Person.extend({
  walk: function () {
    this.supr();
    this.fly();
  },
  fly: function () {}
});
(new SuperHuman('bob')).walk();

Events

$('#content a').listen({
  // dom based
  'focus mouseenter': function (e) {
    // normalized event model
    e.preventDefault();
    e.stopPropagation();
  },

  // dom custom
  'party time': function (e) {

  }
});

$('#content a').click(function (e) {

});

$('#content a').trigger('click party');
$('#content a').remove('click party');

AJAX

$.ajax('path/to/html', function (resp) {
  $('#content').html(resp);
});
$.ajax({
  url: 'path/to/json',
  type: 'json',
  method: 'post',
  success: function (resp) {
    $('#content').html(resp.content);
  },
  failure: function () {}
});

script loading

$.script(['mod1.js', 'mod2.js'], 'base', function () {
  // script is ready
});

// event driven. listen for 'base' files to load
$.script.ready('base', function () {

});

Animation

$('p').animate({
  opacity: 1,
  width: 200,
  duration: 1000,
  after: function () {
    console.log('done!');
  }
});

Utility

Utility methods provided by underscore are augmented onto the '$' object. Some basics are illustrated:

$.map(['a', 'b', 'c'], function (letter) {
  return letter.toUpperCase();
}); // => ['A', 'B', 'C']

$.uniq(['a', 'b', 'b', 'c', 'a']); // => ['a', 'b', 'c']

No Conflict

var ender = $.noConflict(); // return '$' back to its original owner
ender('#boosh a.foo').each(fn);

The haps

Ender.js pulls together the beauty of well-designed modular software and proves that git submodules can actually work. Thus if one part of the system goes bad or unmaintained, it can be replaced with another with minimal to zero changes to the wrapper (Ender). Furthermore if you want remove a feature out entirely (like for example, the animation utility), you can fork this repo and remove the appropriate submodule.

This looks like jQuery

I know, right? jQuery is a clear influence of the wrapper with the aside that Ender is only 1/3 the byte footprint with the ability to remove (or add) extensions as needed by your application.

The name Ender

For those that care, it's a thing. Ender is a child prodigy who went on to save the world, and despite all odds, always wins.

License

For the individual submodules, see their respective licenses.

Building a custom platoon

This is the part where it gets next-level future boss. We promise. Check out the Ender CLI video of this in action. The short explanation is that you can do this:

$ ender -b qwery,bonzo,bean,underscore

Why all this?

Because in the browser - small, loosely coupled modules are the future, and large, tightly-bound monolithic libraries are the past.

follow me

i am dustin diaz