joi JavaScript Framework

[nathanwall]

Hello, my name is Nathan Wall, and I have recently released a JavaScript library which I call joi .

I know, anther JavaScript library, right... like the world needs one of those. But my purpose in creating it wasn't to replace jQuery or Prototype or MooTools or Dojo. In fact, when I started writing it most of those libraries either didn't exist or were just starting out themselves.

I've been slowly working on and adding to this library for the past 5-7 years, and I've used it in a lot of my personal projects. I've always wanted to release it so that others could use it, and I think it has a lot to offer to JavaScript developers, so I finally sat down and created a site to give people a place to download it and teach them how to use it.

It's object oriented (much more so than jQuery) and features a full DOM replacement, prototype-based inheritance (with improved syntax), and includes support for AJAX, effects, and widgets. It integrates well with existing scripts, and is nearly fully encapsulated (leaves almost no trace on native/DOM objects).

If anyone would like to take a look at it and see if it's something you might be interested in using, that'd be great.

There's no license. I've release it to the public domain, which means there are no copyrights on it and you're free to use it, even in commercial products, however you'd like.

I'm looking forward to hearing what you think.

http://joijs.com/

Nathan

[Padonak]

there were some bugs in Opera (dialogs didn't close)

[nathanwall]

Thank you for letting me know, Padonak. I have corrected the error.

[Troy III]

That's not bad at all - I liked the most of it...
A bit oriental for my taste, and quite far from conventional JavaScript purity,
- (to much of JSON idiom ) and weights about 300KB !
That would be one of the major objections.

[nathanwall]

That's not bad at all - I liked the most of it...
A bit oriental for my taste, and quite far from conventional JavaScript purity,
- (to much of JSON idiom ) and weights about 300KB !
That would be one of the major objections.

Thank you, Troy III. If I may interact with your critique a little bit, 300KB is unminified and uncompressed. jQuery is 247KB unminified and uncompressed (and jQuery aims at being "lightweight"). Still, it is a little larger, but it does a lot more foundational work than jQuery (provides an inheritance model, an object-oriented approach, and a DOM replacement, for starters). The Dojo base, on the other hand is 534KB uncompressed. I do think it performs well. I have worked hard (and continue to work hard) on improving its performance over the years, and I wouldn't think that in today's economy file size would be that big of a deal, what with streaming video being a part of today's web and everything.

Your point is taken about lots of JSON idiom. Many of the methods take at least some of the arguments in another form, for the most basic things. Perhaps expanding that is something I can work on going forward.

And again thank you very much. I appreciate the time that you took to give it your critique.

[Jeff Mott]

I have to say, of all the "check out my library" posts that come along, this is by far one of the better ones.

Just be prepared, though, that your library may nevertheless not gain any traction. Even established libraries such as YUI, Dojo, ExtJS, and Closure have only a fraction of the user base that jQuery has.

[nathanwall]

I have to say, of all the "check out my library" posts that come along, this is by far one of the better ones.

Just be prepared, though, that your library may nevertheless not gain any traction. Even established libraries such as YUI, Dojo, ExtJS, and Closure have only a fraction of the user base that jQuery has.

Thank you for the gracious post. I understand that, and you're absolutely right. I don't expect it to get the traction that jQuery has. But I do hope it finds a niche.

[rnd me]

i think you need a clearly-defined unique selling point; what does your code do that jQuery doesn't?

also, 300kb is a lot, and you don't have plug-ins. consider moving some heavier peices to plug-ins; it would shrink the base size, and allows you to push those and other plugins. people use jQuery because of the plugins, so having a few on the project's homepage makes it seem more competitive.

[nathanwall]

Ok, due to the comments here, I have decided to move the widgets to a separate extension library in the next version. Built-in widget capabilities will remain a part of the joi core (via joi.Ui.Widget and joi.Ui.ContainerWidget), but the widgets themselves will be moved to the extension library (Dialogs, Calendars, Panels, DataDisplays, etc.). From the work I've done so far, it looks like it will bring the joi core file size down below the jQuery core.

[Troy III]

@ author

what is the (joi lib) equivalent of:

myElement.onclick=myFunction;

[nathanwall]

Assuming myElement is a joi Element object:

myElement.on('click', myFunction);

or

myElement.on({
    click: myFunction
});

The reason for the two styles is the second allows attaching multiple event handlers with one call to on.

If myElement is a DOM Element:

var joiElement = joi.Html(myElement);
joiElement.on('click', myFunction);

If you retrieve the element with joi.get then it will already be a joi Element:

var myElement = joi.get('my-element');
myElement.on('click', myFunction);

Some further documentation on joi events can be found here: http://joijs.com/learn/events/

[Troy III]

what is the source of event, and how does it trigger. or who/what monitors the actual event?

[nathanwall]

Are you asking how it works internally? Because that's a little bit of a complicated question which has pieces on several different levels.

Here's how the abstraction is set up, and the only thing you really need to know for everyday use:

In joi, there's no distinction between events and methods. Any method can be listened to by calling on. For instance:

var Person = joi.Unit.sub(function() {

    function constructor(name) {
        this.base();
        this.setName(name);
        this.
    }

    constructor.prototype = {
        '#name': null,
        setName: function(name) {
            this['#name'] = name;
            // call the nameChanged method to notify any event handlers that the name has changed.
            this.nameChanged();
        },
        getName: function() {
            return this['#name'];
        },
        nameChanged: function() { }
    };

    return constructor;

}());

var pete = new Person('Pete');

pete.on('nameChanged', function() {
    console.log('Pete\'s name changed to "' + pete.getName() + '."');
});

pete.setName('John');
pete.setName('Bill'); 

This would log:

Pete's name changed to "John."
Pete's name changed to "Bill."

Every joi Element object has methods which correspond to DOM events (click, mousedown, focus, blur, etc.). Therefore, element.on('click', function () { ... }); will attach a listener to the click method, which is called any time the element is clicked.

Behind the scenes, this works by setting the DOM element's onclick to a joi handler the first time on('click', ...) is called on the corresponding joi Element. It's only set one time (and if there's an existing onclick method, joi will store it in a variable and execute it when the element is clicked). Any subsequent on('click', ...) calls to the same element will add a listener to an array of listeners for the click method on the element. joi will execute these handlers in sequence when the element is clicked.

Hopefully that helps and answers your question.