3

Possible Duplicate:
Reusing backbone views/routes on the server when using Backbone.js pushstate for seo/bookmarking

I am using Backbone.js and bunch of other modules to handle Single Page App method. My goals:

  1. The site must be SEO-friendly

  2. Server bootstrap html code to client and data stored in JSON models.

  3. Sub-sequence actions are all handled by Javascript (e.g. render new screen, change url using Backbone router).

My question is: how to structure the server to align with Javascript on each router url and keep it DRY?

For example: if user goes to wwww.mysite.com and then click on some link to go to www.mysite.com/page/2, it must be the same as having him to go to www.mysite.com/page/2 directly on first load.

This seems to be an old topic but I cannot find any solid resource about best way to handle this on server side without repeating the template code in Javascript.

One option I am thinking is to split backend into Node.js and another server to handle API only. The Node.js server somehow share the template construction code as the Javascript frontend

Anyways, love to hear some advice and apology if this is not the right place to ask such question.

Community
  • 1
  • 1
HP.
  • 19,226
  • 53
  • 154
  • 253
  • Socket.io is interesting idea. I got to do more research there. But on hashbang one, I got many advice from my expert friends to stay away from hashbang and stick with pushState. I like pushState better too and Twitter seems to move away from it http://news.ycombinator.com/item?id=3614037 – HP. Dec 19 '12 at 05:27

1 Answers1

1

I would treat my node server as just a REST interface to my data. I would then handle everything else client-side: I could load templates using require.js with a template plugin like jade, do all my routing using Backbone.Router, and then access my models and collections using Backbone.sync methods (like collection.fetch().)

So for example, when a user accesses "mysite.com/#page/2", I could get my Backbone router to load and display whatever template would be on the page. If I happened to need a list of products to display on that page, then I could make my product collection do a product.fetch(). That would send a GET request to "/products" -- or whatever URL is specified in product.url. My node server would then respond with an array of product objects that the view my collection belongs to could use in rendering itself.

theabraham
  • 15,840
  • 9
  • 42
  • 41
  • So jade is a backend template for node.js though. Let say we have a list and a button to add item. I load the page with default list of items, then add new items on the fly using Javascript frontend. I could do POST to update backend but then on frontend, I still manage to get the template for each item to add each item. This piece of frontend template management code would duplicate with the backend part when users go to the list page directly. Of course this is a simple example but hope you see my concern. – HP. Dec 19 '12 at 05:20
  • Jade can be used to generate templates on the front-end if you use the requirejs plugin (take a look at the link I posted for the plugin.) – theabraham Dec 19 '12 at 15:16