EzDevInfo.com

Understanding Ender.js

In my understanding, Ender is a command line tool that helps organize your javascript dependencies. We can use ender build underscore qwery to produce a ender.js file which contains the codes of underscore and qwery, then we can include this file in our html.
However, I noticed that ender gets those libs from npm site, so I'm worrying that if all of those libraries could be use in browser side?

Can I use qwery with bean without Ender?

I have just started trying out micro libraries instead of using jQuery and I'd like to use qwery with bean. If I set bean.setSelectorEngine(qwery); why does the following not work?

bean.on('.masthead', 'click', function () {
    console.log('click fired');
});

I am also using bonzo for DOM utility, so I have set it to use the dollar along with qwery so I can select elements in a jQuery-like fashion: e.g. $('.masthead').

function $(selector) {
    return bonzo(qwery(selector));
}

This also does not work. Should I not be able to use the following with bean?

bean.on($('.masthead'), 'click', function () {
    console.log('click fired');
});

Perhaps I have missed something important in the bean documentation.. What do I need to do to fix this?

Also, I am trying to avoid using Ender if at all possible, I am trying to keep my external libraries down to a minimum.

Optimum JavaScript package size

When you serve JavaScript to a page it is best to serve one packaged, minified and gzipped file to reduce latency and request times.

But is it better to send

1. One big package for your entire website
2. One big package for each page in your website.
3. CDN I don't want to load from a CDN

With 1. you get load more on the initial load but then all your javascript is cached for the entire visit to your website.

With 2. you load only as much is necessary for a page so the initial load time is reduced but you don't have the same file cached on every page in your website.

Which method is preferred?

I'm using node.js to serve my JavaScript and I'm using ender to package my JavaScript.

Edit

Phrased differently I'm thinking of implementing an automation on my packaging. This automation will either package everything into one file for my entire website or package a page specific list of files into one file for each page.

I don't have any statistics on my JavaScript files yet but I was curious as to which of the two automations I should implement.

jquery library via ender

I have tried building jquery into ender.js.

ender build jquery

The library is correctly installed, but I see many dependencies I don't need.

Is it the minimal version of jquery I can embed via ender or a version intended to be used from Node.js?

Thank you very much.

How do I configure Backbone.Sync to work with request?

When I do a Model.fetch(), I'm getting the response from request as the attributes object.

How do I override this globally in Backbone settings / request settings ?

Specify install path for Ender

When using Ender I would like to specify a directory where packages should be installed.

The only way to make this work seems to be to cd directory; ender build package, but I might be wrong?

Idealy I would have a package.json file, where I can specify a path where dependencies should be placed.

ender.js install fails

I'm trying to install ender.js. I've run the following command

 sudo npm install ender -g

but after the install (with no error), I can't access ender command line. I have the latest node and npm install (via brew)

anybody ran into this problem?

Ender JS build without internet

Is there any way to stop ender trekking of to the internet to get a copy of itself before building from local libraries?

Can I save a local copy of ender-js and tell it to use that?

Installing ender.js on windows - npm WARN gzip@0.1.0 [closed]

I need help with Ender-js installation. Trying to set it up on my machine (Windows XP).

First I've installed node-js v0.6.6 & downloaded (&unzipped) the latest NPM - 1.1.0-beta-7. As per "Fancy Windows Install"

Then I run -

npm install ender -g

And get this warning - npm WARN gzip@0.1.0 package.json: bugs['web'] should probably be bugs['url'] I can call "ender help" from the commandline for example.

But trying to build something with ender (in this case jeesh) fails:

ender build jeesh installing packages: "ender-js jeesh"... this can take a minute... something went wrong trying to load npm!

Thanks a lot in advance!

Custom Lightweight JavaScript Libraries: EnderJS and MicroJS

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.

Ender breaks requirejs optimiser

I am using ender to create a drop in replacement for my jquery usage.

I am using just qwery, bean and bonzo (no need for dom ready in my use case), and everything works fine. I include the ender dev build as a path in my require config, and a shim to export it to the $ symbol, and in dev mode that works fine.

The problem comes from when I build. I am using the grunt build task that ships with Yeoman Backbone generator. What seems to happen is my require modules 'config' method no longer exists, I think something in Ender overwrites require with something else (possibly browserify or some other AMD loader?)

Is there a fix or work around for this?

Why does this event handling code for ender break when I try to clean it up some?

This is the code that works properly:

bonzo.aug({
  bind: function (event, handler) {

    if (this[0].attachEvent)
            this[0].attachEvent('on'+event, handler);
          else
            this[0].addEventListener(event, handler);
        },
  unbind: function (event, handler) {
            if (this[0].detachEvent)
              this[0].detachEvent('on'+event, handler);
            else
              this[0].removeEventListener(event, handler);
          },
  once: function (event, handler) {
          function doOnce(e) {
            bonzo(this).unbind(event, doOnce);
            handler.call(this, e);
          }
          this.bind(event, doOnce);
        }
});

But then when I try to consolidate and soup parts of it up a little, unbind and once break:

(function($){
  $.ieEventApi = !!window.attachEvent; // !-[1,];

  $.addEventListener = $.ieEventApi ? "attachEvent" : "addEventListener",
  $.removeEventListener = $.ieEventApi ? "detachEvent" : "removeEventListener",
  $.onForIe = $.ieEventApi ? 'on' : '',
  $.adaptEventHandlerForIe = function(f){
    return function(e){
      e.target = e[(e.target ? e.target : (e.srcElement || document))];
      return f(e);
    };
  };



  $.aug({
    bind: function (event, handler) {
            for(var i = 0; i < this.length; i++) // I'd use Bonzo.each if I could find any documentation for its use.. :-\
                this[i][$.addEventListener]($.onForIe+event, $.adaptEventHandlerForIe(handler), false); // The "false" is superfluous on IE, but apparently not problematically so.
            return this;
          },
    unbind: function (event, handler) {
              for(var i = 0; i < this.length; i++)
                this[i][$.removeEventListener]($.onForIe+event, $.adaptEventHandlerForIe(handler), false); 
              return this;
            },
    once: function (event, oncehandler) {
            // This just calls the other two, which already handle iteration.
            this.bind(event, doOnce);
            return this;

            function doOnce(e) {
              $(e.target /*Or should I be using e.target here?*/ ).unbind(event, doOnce);
              oncehandler.call(this, e);
            }
          }
  });
})(bonzo);