RightJS javascript library in daily use [closed]

Question

Wondering if anyone here can offer any insight into the ups/downs of using the RightJS library, specifically as compared to jQuery, and generally compared to what you think a library ought to offer.

I'm not so much looking for a feature to feature comparison, but rather a sense of the general daily use.

Things like:

• Does it feel natural to use, or does it feel like an uphill battle?
• Does the API express itself in a comprehensible manner, or do you find yourself wondering what the code you wrote 3 weeks ago means?
• Do you find yourself wishing it had some feature of jQuery (or some feature in general), or inversely, do you enjoy some particular feature that other libraries don't have?
• General philosophical considerations that you think make RightJS superior/inferior.

Not things like:

• Mindshare/marketshare/plugins/CDN/ considerations (the winner is obvious)
• Why would you bother... (moot)
• jQuery does x, y and z, and RightJS doesn't, without offering insight into how it impacts daily use (there could be philosophical reasons that make x, y and z unnecessary)

Answer 1

Based on the documentation, code samples, and what is already in the works for RightJS 2, I am very impressed.

@Patrick - Thanks for pointing out the Call By Name feature in RightJS which seems extremely useful for removing most anonymous functions from all over the page. For those who are not familiar with it, the idea is to specify the method name and arguments as parameters instead of creating an anonymous callback. For example, if we are trying to filter all words and phrased that begin with "hello" from an array,

var words = ['stack', 'hello world', 'overflow', 'hello there'];

Using the filter method on arrays, we would write:

words.filter(function(word) {
    return word.indexOf('hello') === 0;
});

We can write the same thing using Call By Name in RightJS as,

words.filter('startsWith', 'hello');

Pretty sweet eh?

I am also loving the idea of being able to use strings as selectors directly. Although RightJS only does it for event delegation at the moment, but I would love to be able to completely get rid of the $ function for most purposes and directly call methods on a string. For example, to listen to all clicks on any para on the page, write:

'p'.on('click', function() {
    this.addClass('clicked');
});

Or maybe combine this with Call By Name,

'p'.on('click', 'addClass', 'clicked');

The things I am excited about in RightJS 2 is the ability to use widgets as native elements.

var calendar = new Calendar();

calendar instanceof Calendar; // true
calendar instanceof Element; // true

Thanks to @patrick and @Nikolay for clarifying my assumption here. The widget will wrap the native DOM element which is available as the _ property on the object.

document.body.appendChild(calendar._);

or use the methods provided by the framework.

calendar.insertTo(document.body)

Another nice feature is a unified way to initialize widgets using just a declarative syntax:

<input data-calendar="{format: 'US', hideOnClick: true}" />

instead of creating an object ourselves and then adding it to the page:

var calendar = new Calendar({
    format: 'US',
    hideOnClick: true
});

calendar.insertTo(document.body);

I have taken the slides from a presentation titled JavaScript Library Overview by John Resig and compared the code samples for jQuery with RightJS. These samples mainly compare the basic syntax for both frameworks which is more similar than different, although RightJS seems to be more flexible in its usage.

DOM Traversal

jQuery

$('div > p:nth-child(odd)')

RightJS

$$('div > p:nth-child(odd)')

DOM Modification

jQuery

$('#list').append('<li>An Item</li>')

RightJS

$('list').insert('<li>An Item</li>')

Events

jQuery

$('div').click(function() {
    alert('div clicked')'
});

RightJS

$$('div').onClick(function() {
    alert('div clicked');
});

AJAX

jQuery

$.get('test.html', function(html) {
    $('#results').html(html);
});

or

$('#results').load('test.html');

RightJS

Xhr.load('test.html', {
    onSuccess: function(request) {
        $('#results').html(request.text);
    }
}).send();

or

$('results').load('test.html');

Animations

jQuery

$('#menu').animate({ opacity: 1 }, 600);

RightJS

$('menu').morph({ opacity: 1 }, { duration: 600 });

Array traversal

jQuery

$.each(myArray, function(index, element) {
    console.log(element);
});

RightJS

myArray.each(function(element) {
    console.log(element);
});