Question

I am new to backbone.js so this may be an easy question.

The router seems to use semantically sensible urls, but they aren’t very user friendly.

In the examples I’ve seen they use:

local.com/post/id/1

But in wordpress I would opt to rewrite this as:

local.com/2012-11-03-backbone-js-router-question.html

This would be run through a big rewrite table and translated to the right controller/action. I don’t want to expose the router to the user that prominently.

My final application for this question is with e-commerce in mind:

• cms page local.com/about-us.html
• product page local.com/blue-tooth-headset.html
• category page local.com/phones.html
• product via category page local.com/phones/blue-tooth-headset.html

So my question is, how would one get pretty urls while using backbone.js?

My thoughts on options are:

1. You don’t get seo friendly urls
2. You have some enormous map, and it has to sit on the client 🙁
3. Everytime you are about to change the url you have a quick ajax lookup up for the pretty-url, and you need to wait for the pretty-url to come back before you pushState.
4. sections are prefixed with a letter ie local.com/p/product-name.html and p actually serves to distinguis which router, another could be c for category

Answer 1

Backbone routes can be mostly anything. About e-commerce, you’d just need to use wordy urls:

<category>/<product-name>
television/samsung-i178

But, that’s not really what you should matter about regarding SEO. Google mostly added way less value in URLs keyword after last year “panda” update.

What you should really consider is getting fallback and content served on the page even if javascript isn’t enabled. But the trouble there is that you probably don’t want to code your site twice: frontend templating/paging engine + plus same thing on the backend.

There’s upcoming technologies who’ll help leverage this problem using node.js (Mojito, Meteor, etc), but right now they’re not the most stable projects out there. And, I think it may be a little early to use these in production; if you don’t have a really competent team to get you server going and debug those projects if needed.

Anyway, what I mean is that if SEO weight a lot in your project, just don’t use backbone.

Edit :
About what you add to your question, I think that’s pretty easy to conceptualize.

In Backbone, you use a variable router, like so:

routes: {
  "product/:url" : "product" 
}

product: function( prettyUrl ) {
  console.log( prettyUrl );

  // Then you fetch your server
  server.fetch( prettyUrl );
}

Then on your server database, you just fetch your database by the product pretty url, like SELECT * FROM product WHERE prettyurl=$prettyURL (Or something similar to this, been a long time since I used mySQL).

This way, you don’t have to keep a map on the client side, you only use the pretty url the server gave you to fetch full product.

So when on your collection you call fetch, the server should return to you:

{
  id: 1,
  name: "Product XYZ",
  prettyUrl: "product-xyz"
},
{
  id: 2,
  name: "Mac Book Pro",
  prettyUrl: "mac-book-pro"
}

This way, every pretty url is managed with his model, not in the router. And that’s definitely the way to go to manage such URLs. And that’s mostly how does it any WordPress or Drupal out there. Only they do it on the backend side.