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