Ceejbot

Tag Results

3 posts tagged project

jquery -> ender; some notes.

Yesterday I migrated my project from jquery to Ender. Ender isn’t a library itself, but instead a tool for building javascript libraries from components. It offers something close to the jquery feature set at a much smaller size. If you don’t need everything that jquery does, or if you don’t need the massive backwards compatibility with broken browsers it gives you, ender might be a win.

I had the problem of making my client-side router (davis.js), my client-side templating, and some jquery plugins work.

First, davis.js. The minimal ender build for this needs events, selectors, a dom manipulator, and a dom ready check, aka their “jeesh” package:

ender build bonzo bean qwery domready

I encountered two minor problems. First, davis.js explicitly looks for jquery, not for anything pretending to be jquery in the infamous $. So before you construct your app, tell Davis to use the Ender $:

Davis.$ = $;
var myapp = new Davis.App();
// etc

Second, Bean, the ender events library, doesn’t appear to stop the propagation of delegated events the way jquery does. So Davis needs to do so explicitly in its delegates:

var handler = function (targetExtractor) {
    return function (event) {
      if (differentOrigin(this)) return true
      var request = new Davis.Request (targetExtractor.call(Davis.$(this)));
      Davis.location.assign(request)
      event.stopPropagation();
      event.preventDefault();
      return false;
    };
  };

Davis should now work.

That was the easy part of the migration. Far more annoying was migrating from jquery’s ajax api to reqwest’s.

Next, jquery plugins. Rewrite them. They were not invented by you, so they’re probably awful. Okay, that’s a little unrealistic for some things. If you’re using Bootstrap and its plugins, the ender rewrite will be handy. Note that I couldn’t make its meta-package work. I had to build a library with individual plugins one at a time using ender add.

The other thing I did was rewrite ICanHaz to use the faster mote.js instead of the default mustache javascript implementation, as well as to be agnostic about jquery, zepto, and ender. This isn’t enough code to deserve a github repo, so have it in a gist.

The current stack

Ember.js most likely for the client-side application
Padrino & Ruby for the server-side application
slim for html templates; less for css generation
Ohm/Redis for objects & data structures I want around all the time
my forked Risky/Riak for larger objects & anything with lower access rates, possibly with some redis-objects thrown in

I have a couple thousand lines of working code already with this stack. It’s good enough. Once I decided to pull the trigger and implement I stopped fussing about the choices and just started cranking. It’s all replaceable anyway.

Node.js: I keep wanting to use it for various back-end data services (pushing data to web clients, f’rinstance), but every time I go to write Javascript seriously I want to hunt down its designers and beat them. It’s demented. People are only using it because of V8, I think. I will probably become reconciled to this as I will be forced to write a lot of client-side javascript. I have a vague idea that I might write first cuts of services in Ruby then rewrite in Node for speed. Maybe.