Janko in a Jar

Image by Phillie Casablanca via Flickr

Jsgoo is a JavaScript library. It’s not trying to be one of those RockStar (general stuff + js-enhancments/fixes + effects) libraries — jQuery, MooTools, Prototype+Scritptacolus… In fact, it’s made to work with them. I use jsgoo + MooTools at BizyBee project for example.

I also don’t expect that coding style can be generally likable. I am making it to try certain ideas and that’s it. You can see the current source code and also tests and examples here. The most obvious feature of jsgoo is client side HTML generation. But it doesn’t use the GUI-Objects/Componenets abstraction for this. It can be described more like rendering based on a graph of data.

Here are few ideas that jsgoo is build on?

Unit, list of units
At this point of time (with CSS) there are just these two patterns needed to make any component of websites and web-application.

Examples:

• Navigation tabs is list of tabs, click
• Table is list of rows which is list of cells, click
• This fake blog is made of 3 lists, click

// this code creates the fake blog
    _.$into('content', _.list(d.posts, d.posttpl));
    _.$into('tabs', _.list(d.tabs, d.tabtpl, 'ul id="tabnav"'));
    _.$into('links', _.list(d.links, d.linktpl, 'ul'));

Dictionary based combinators
I hope I named this relatively OK. Example will probably explain it better. Let’s say we have a *List* of users with emails.

var USERS = [
    { name: "Jim", email: "jim@gmail.com" },
    { name: "Tony", email: "" }
    { name: "Mimi", email: "mimi@yahoo.com" }
];

Before we can display it we want to change emails into email links, and we want to display “no email” for users that don’t have an email:

_c.applyL(USERS, {
    email: function (v,i,n){ return v ? _.wrap(v, 'a href="mailto:'+v+'"') : _.wrap('no email', 'em') }
})

Besides applyL there is also injectL which can inject new keys:value pairs into rows/objects.

_c.injectL(USERS, {
    css: function (o,i){ return i%2 == 0 ? "even" : "odd" },
    letter: function (o,i) { return o.name.substr(0,1).toUpperCase() }
})

A little more functional-ish programming
We have map, reduce, seek, apply, etc. Let’s see few nicer examples of code where functional side kicks in:

“has” function returns true if value is in array or object

has: function (n, o) {
    return this.seek(function(e, i){ return e == n; }, o);
}

“equal” compares all JS values, also objects and arrays where == doesn’t work

equal: function (o1, o2) {
    return ! (
        o1 instanceof Array && o2 instanceof Array ||
        o1 instanceof Object && o2 instanceof Object ?
            jsgCore.seek( function ( o, i ) { return ! jsgCore.equal(o, o2[i] ) }, o1 )
        : o1 != o2 );
}

Totally non-evasive to the environment
We never change prototypes of JavaScript objects to get a little nicer or shorter code. Everything is held inside jsg* named objects. Except that no pollution of global name-space is necessary.

—

A few posts back I said our project BizyBee for which I started jsgoo in the first place, probably won’t do client side rendering of html. So jsgoo won’t be actively developed further right now. This has changed, bizybee now fully renders on the client side and so jsgoo development is being pushed forward.

Anyway, if you haven’t clicked if above, click here now to see…

This entry was posted on Sunday, April 19th, 2009 at 1:53 am and is filed under Just programming, javascript, web-dev.