intertwingly

Having determined that Angular.js is overkill for my blog rewrite, I started looking more closely at React.  It occurred to me that I could do better than JSX, so I wrote a Ruby2JS filter.  Compare for yourself.  Excerpt from the React tutorial:

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

Equivalent using the Ruby2JS filter:

class CommentList < React 
  def render
    _div.commentList do
      @@data.forEach do |comment|
        _CommentBlock comment.text, author: comment.author
      end
    end
  end
end

Note: I renamed the Comment class to CommentBlock to avoid a conflict with the existing Comment API.  I wouldn’t have thought that would be necessary, but things didn’t work until I made this change.

Full source for the tutorial reimplemented in Ruby is available.