Multiple routers vs single router in BackboneJs

Question

All examples on Backbone I've seen use one router for the whole application, but wouldn't it make sense to have a router for each single part of your app (header, footer, stage, sidebar)? Has anyone built apps with more than one router and what are your experiences?

Let's think about a complex app with nested views: Wouldn't it be better when a view has its own router that handles the display of the subviews, than having one big router that has to inform the main view to change its subviews?

The background of this question: I've see a lot of parallels of the router in backbone and the ActivityMapper in GWT. The ActivityMapper is only responsible to get the right presenter for a given route and a given container in the DOM.

The whole point of the Router object is to relate a collection of views to a given URL, specifically the part after the hash. It's meant as an externally navigable (and bookmarkable) target. Why would it make sense to have multiple routers? Can you give a more clear explanation of what you're trying to achieve? — Elf Sternberg, Dec 02 '11 at 21:13
Great question Andreas, this is definitely something more people are going to be trying to do as their apps grow. — Adam Fraser, Sep 21 '12 at 12:54

score 23 · Accepted Answer · edited May 23 '17 at 12:06

i wrote an app (still writing) with multiple routers in it. however it is not like you think, it is more module based and not a router per view or anything like that.

for example, say i got two big modules in my app, 1 handling all books, and 1 for the users. books have multiple views (as do users), a list view, detail view, edit view, etc etc... so each module has its own router, which stands for its own set of urls:

// user module...
var userRouter = Backbone.Router.extend({
    routes: {
        "users": "loadUsers",
        "users/add": "addUser",
        "user/:id": "loadUser",
        "user/:id/edit": "editUser"
    }

// ... rest dropped to save the trees (you never know if someone prints this out)
});


// book module
var bookRouter = Backbone.Router.extend({
    routes: {
        "books": "loadBooks",
        "books/add": "addBook",
        "book/:name": "loadBook",
        "book/:name/edit": "editBook"
    }

// ... rest dropped to save the trees (you never know if someone prints this out)
});

so, it is not like my two routers are competing for the same route, they each handle their own set of routes.

edit now that I had more info via Elf Sternberg, I know it isn't possible by default to have multiple routers match on the same route. without a workaround like overriding the backbone history or using namespaces in routes and regexes to match these routes. more info here: multiple matching routes thanks Elf Sternberg for the link.

You can read the source code for Backbone to find out. But here's a hint: http://stackoverflow.com/questions/5223251/multiple-matching-routes/ — Elf Sternberg, Dec 03 '11 at 03:22
ok, so without a certain workaround having multiple matching routes is not possible by the default backbone framework. good to know, thanks for that link — Sander, Dec 03 '11 at 12:40

score 22 · Answer 2 · answered Apr 10 '12 at 16:25

22

I just wrote a blog post on Module-Specific Subroutes in Backbone, which allow a "subroute" to be defined which pays attention to everything after the prefix for that route.

Check out the blog entry for more explanation: http://www.geekdave.com/?p=13

This means you don't have to redundantly define the same prefix over and over, and you can also lazy-load subroutes as modules are accessed. Feedback is most welcome!

answered Apr 10 '12 at 16:25

Dave Cadwallader

1,751
12
10

SubRoute extension is great! – aleha_84 Sep 23 '14 at 08:50
2

Your answer doesn't provide enough information without the external link, making it a poor answer out of the box even if your blog post is of high quality. You should really include a snippet and some more explanation for the answer to serve through time. Thank you very much for taking the time to help. – Emile Bergeron Feb 22 '16 at 16:49

score 2 · Answer 3 · answered May 03 '12 at 21:24

There is a limited but important case when it makes sense to use multiple Routers. If you need to expose only a subset of your application's routes & views based on data collected at runtime (perhaps login credentials - e.g., manager vs. staff can see & navigate between different sets of views) you could instantiate only the appropriate Router & View classes. This is significant because routes can be bookmarked and sent from user to user. Of course, you still need checks on the server to ensure that an unauthorized user isn't issuing requests after navigating to a view they arrived at via a bookmark sent by an authorized user. But it's better to design the application so the unauthorized view is just not generated.

Multiple routers vs single router in BackboneJs

3 Answers3

Linked