Backbonejs: Organizing Routes [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 9 years ago.

How do yo organize your route object if there's too much routes inside it, let's say a hundred. Do you just put it in a single file or object?

Thanks.

Answer 1

I think there's no right or wrong answer here. What's definitely true is that you cannot have a single router with 50+ routes in it...that's a maintainability nightmare.

Instead, I prefer to split up my application into sub-applications or modules (call them as you want), where each of them has a well defined purpose and responsibility. As such, in a hypothetical order management system I'd potentially have

• order mgmt app
  • person app
    • router.js
    • app.js
    • ...
  • order app
    • router.js
    • app.js
    • ...
  • ...
  • globalrouter.js
  • globalapp.js

The key here is simply to never create a huge app/monolith, but instead create many small apps which can be composed together to form the entire application (communicating with events between each of them). That said, in the example above, the "person" as well as the "order" app have their own routers which just hold the routes relevant for them. The "global" app forms the glue, holding all of the single apps together, like having the app menu and maybe also some generic routes, not tight to a specific module/subapp.

Maybe Backbone Aura is a good point to start.

Answer 2

You can break the Router down into multiple files. How you break it down depends on your use case, and, in my application, we break it down by module.

How you define a module depends on your application, but the general rule of thumb is that you'll group features under one "functionality" or topic together.

For example, let's say your application is a basic "Company" app (Bad example to use Backbone.js, but let's keep it simple.) The site has couple sections: "About Us", "Product", "Client", "Support", "Blog", "Career". Within each section, it has 2 level of child pages (Like, in Products, you can have a list of Products, and within each Product you can drill down and do a much more detailed view of the Product, how to purchase the product, etc, etc.)

Each section, in the example, we can consider them as module. And, based on this, you then can break your single Router that contains all the routes into different Routers. (They of course can be in different files!)

var MainRouter = Backbone.Router.extend({ 
  routes: {
    '/': 'home'
  },
  home: function() {
    // Display home view
  }
});

var ProductRouter = Backbone.Router.extend({
  routes: {
    '/product': 'listProducts',
    '/product/:id/buy': 'buyProduct',
    '/product/:id': 'viewProduct',
    '/product/compare/:id1/:id2': 'compareProduct'
  },
  listProducts: function() { ... },
  buyProduct: function(id) { ... }
  viewProduct: function(id) { ... }
  compareProduct: function(id1, id2) { ... }
});

When you starts the app, you just have to start them all:

$(function() {
  new MainRouter();
  new ProductRouter();
});

By doing this, you can also break your code down into different modules to even keep the Views, Templates and Models separated per module.