RightJS javascript library in daily use

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);
});

Answer 2

I think this is the best posible option to change in a natural way from prototypeJS. Is pretty pretty similar.

@Nikolay did you were a prototypeJS user?

Answer 3

Hey folks, Nikolay, the author of RightJS is in here.

Thanks to Anurag, he described RightJS pretty well. And couple of notes though.

You actually already can mix the String#on and calls by name just as you described

"div.boo".on('click', 'toggleClass', 'marked');

Then in RightJS2 which is going to have the RC2 release right about tomorrow you'll be able to do things like

"div.boo".onClick('toggleClass');
"div.boo".observes('click'); // true
"div.boo".stopObserving('click');

And you also will be able to use any custom events with those, just like that

"div.boo".on('something', 'addClass', 'something-happened');

Custom events in RightJS2 bubble, have targets and everything you need.

Then about the dom wrappers and Calendar, yes elements and widgets will be in the same hierarchy of dom-wrappers and you will be able to toss them around just like that

$(document.body).insert(new Calednar(...));

You also will be able to manipulate with them on the dom level using direct access to the raw dom-object, like that

var calendar = new Calendar();
document.body.appendChild(calendar._);

BTW: Patrick. If you by any chance use Rails, you should also check out the right-rails plugin, there are quite a few really nice things on JavaScript and Rails integration.

Then if you ask about the genuine feeling working with RightJS, I would say it depends. RightJS was build for server-side folks who used to work with classes and objects, there are quite a few things for quick and agile development to solve the easy problems the easy way, but to get the most of it you need think in objects. If you also happened to have experience with Prototype or Ruby, most of the things should be pretty familiar, I tried to reuse as much method names as I could.

If all you know is jQuery, some things might look a bit strange from the beginning, but I saw several guys who happily migrated from jQuery. So I guess you'll be fine.

As for the code readability, imho it absolutely kicks ass. Readability was one of the primary concerns in RightJS development, you can read most of the code just like a plain English

"div.zing".on('click', 'toggleClass', 'marked');
$('my-element').update('with some text').highlight();
$$('li').each('onClick', 'toggleClass', 'marked');

And so one. Check this page, if you haven't yet http://rightjs.org/philosophy

This is about it. Ask if you have any more questions.

Answer 4

I'm a RightJS convert. I'm impressed with the philosophy, he seems to acknowledge that DOM elements are just data, where jQuery seems to base its whole identity on the DOM.

I use jQuery in my dayjob but find myself needing to use it in combination with underscore.js to do nice functional programming things. In RightJS, you get lots of nice FP goodies available as methods on native objects.

Here is a small comparison showing how the same method works on plain arrays and dom collections in right js:

Some html:

<ul id="test">
    <li data-id="one">one</li>
    <li data-id="two">two</li>
    <li data-id="three">three</li>
</ul>

An array:

var test = [{"data-id":"one"},{"data-id":"two"},{"data-id":"three"}];

Filtering the html, pretty similar:

//jQuery:
var filtered = $("#test li").filter(function(element) {
    return $(element).attr("data-id") == "one";
});

//RightJS
var filtered = $$('#test li').filter(function(element) {
    return element.get("data-id") == "one";
});

Filtering the array:

//you can't do this with jquery because it is DOM-specific.
//you need something like underscore:

//underscore:
var filtered = _.select(test, function(element) {
    return element["data-id"] == "one";
});

//RightJS << uses the same .filter() method as used on the html!
var filtered = test.filter(function(element) {
    return element["data-id"] == "one";
});

In RightJS, I would like to see some additional things that underscore has, like .range() and the option to write in either 'FP' or 'OOP' style, so I can use RightJS exclusively. Guess I better contribute :)

Having said that, as I understand, the big focus with jQuery these days is mobile compatibility. If that is a major concern, it still might be best to go with jQuery.