Question: router.js vs crossroads.js

[fresheneesz]

I'm wondering why I would use router.js over crossroads.js. It would be pretty useful to have a little blurb about this in the documentation. These are the only two major stand-alone routing libraries I could find, but I can't find any comparison of what they can do or how they operate. Would appreciate some info - thanks

[KidkArolis]

The main difference in my opinion is the nesting of routes. Crossroads.js (as far as I know) is a "typical" routing library that just maps url patterns to callbacks, one url pattern per callback. Router.js allows you to have nested routes, meaning each segment of a url can have it's own handler. This way each handler can do a bit of work like loading in data and rendering some views.

In addition, each handler has a lifecycle, so it's possible to handle leaving routes rather than just getting called once on entering the route. This means you can perform cleanup, etc.

Another thing I like in router.js is that helps you deal with asynchronous transitions. Transitioning somewhere usually means some data needs to be loaded and you might want to change where you're transitioning to (clicking another link) and you want to handle that well. With libraries like crossroads.js a lot of that is not handled. Of course that depends on your use case, etc.

I've built a library on top of router.js that exposes a more Ember like API and adds some missing features such as URL management (via pushState/hashchange) and I tried writing up the benefits of why I think such a library is more useful than something like crossroads.js (https://github.com/QubitProducts/cherrytree) so check out the README there - perhaps it'll answer some more of your questions.

[fresheneesz]

Thanks, I like the look of cherrytree. I'm gonna test it out. That's really useful info about the handler lifecycle - that sounds pretty important.

[fresheneesz]

@KidkArolis I liked the idea of cherrytree, but I found it rather confusing to figure out what was going on when. So... I made my own version: grapetree. I would love your input. Here's an example parallel to the basic example you have in the readme for cherrytree:

var $ = require("jquery");
var Router = require("grapetree");
var Future = require("async-future")

var Post = function () {};
Post.prototype.fetch = function () { return Future(true)}; // pretend you're fetching something
Post.prototype.get = function () { return "Hello grapetree"; };

var router = Router(function() {
    var view;
    this.enter(function() {
        view = $("<div><h1>My Blog</h1><div class='outlet'></div></div>");
        $(document.body).html(view);
    })

    this.route('post/{}' , function(postId) {
        var outlet, post, outletFuture = new Future;        
        this.enter(function() {
            post = new Post({
              id: postId
            })  
            return post.fetch();
        },function(fetchFuture) {
            fetchFuture.then(function() {
                outlet = view.find('.outlet')
                outletFuture.return()
            })
        })

        this.route('show', function() {
            var view;
            this.enter(function() {
                view = $("<p>" + post.get("content") + "</p>");
                outletFuture.then(function() {
                    outlet.html(view);
                })
            })
            this.exit(function() {
                view.remove()  
            })
        })
        this.route('edit', function() {

        })
    })
})

router.go('/post/42/show')