50

I am designing a one page browser based web application.

JQuery is already being used in my application. I am currently planning to use KnockoutJS for data-binding and UI management. However I have used Backbone.js in past, and I have been quite impressed with the routing facilities provided by the controller layer.

I have also looked into some JQuery-based solution like pathjs for client side routing.

It would be great if someone could offer suggestions and guidelines for choosing a proper routing system.

I am not willing to use Backbone.js instead of KnockoutJS because of the excellent data-binding facilities of KnockoutJS.

4
  • Your question is not clear enough to get an answer (for me). Can you clarify what you mean by 'proper routing system'? Jun 11, 2011 at 14:10
  • By routing system i meant a flexible client side solution that can map urls like mydomail.com/#!/action/param1/param2 to specific actions.
    – lorefnon
    Jun 12, 2011 at 9:35
  • I'm presuming you've read this: documentcloud.github.com/backbone/#Controller-routes Not sure still what you are looking for if you plan to use backbone.js. The routing infrastructure is there, its up to you to overlay routes as appropriate to your app. Jun 12, 2011 at 15:43
  • PathJS is not a jQuery based solution. It has no externam dependencies, and includes no other libraries. It is entirely standalone, but works well with all other libraries. Aug 11, 2011 at 13:37

4 Answers 4

34

After going through a bit of exploration I have found the solution. @Eisenhauer Backbone's routing facilities are awesome, but what if I am not using Backbone. As I outlined in my question, I am already using KnockoutJS that provides me a client side MVVM model and so its not really a good idea to put an additional MVC implementation in the same page.

For people looking for a standalone routing solution, pathjs is a simple and elegant solution.

A more flexible, powerful and standalone routing solution is Crossroads.js available at http://millermedeiros.github.com/crossroads.js/. It is very nicely documented and really powerful,so can be adapted to any set of requirements.

2
  • 1
    Definitely agree that PathJs is great. It is so simple and small. I am using the Saltarelle C# to JS compiler and I created a wrapper: github.com/mattleibow/Saltarelle.PathJs
    – Matthew
    Jan 23, 2013 at 8:49
  • In a similar setup to your own, I have used SammyJS however this is now outdated and would recommend a modern SPA framework. Oct 2, 2017 at 12:45
14

You could use the History API rather than a hashbang approach?

  • It allows you to manipulate the URL displayed to the user.
  • It means that back / forward work sensibly.
  • Bookmarking the page works sensibly.
  • It's better in terms of performance, because if the user refreshes a page (or hits a link to the page from an external source) the correct content is loaded first time rather than having to load a blank page and then grab the correct content via AJAX.

The downside is that older browsers will not support it. You could fall back on a hashbang approach (if you really have to). I don't know of any existing frameworks that do this though. I would prefer to fall back on not dynamically loading content (i.e. full page reloads when the user clicks a link). The history API will become more and more widely supported, so this "problem" will reduce over time.

Here's a working example with some documentation. From the address bar, it looks like pages are loading "old school" (full page refresh) but if you take a look at the console (Firebug, Chrome dev tools), you can see that the content is being grabbed via an AJAX request.

Mozilla has some docs about it.

3
  • Thanks for your really insightful Answer. +1 from me because of your effort. A routing solution however is a BETTER approach for several reasons. Note that all client side routing solutions sit on top of History API only and provide very simple mechanisms to connect urls with methods/ajax requests. So essentially drastically reducing the amount to work to be done by the developer as opposed to manually monitoring the url and performing tasks accordingly.
    – lorefnon
    Jun 14, 2011 at 7:28
  • Ah, OK. Sorry, I misunderstood what you meant. I thought you were referring to a hashbang solution because of the example link you gave (mydomail.com/#!/action/param1/param2).
    – Spycho
    Jun 14, 2011 at 7:35
  • History API is not supported by IE currently (until v10 caniuse.com/#search=history ) The history.js lib handles fallback to hashbangs.
    – joeriks
    Oct 16, 2012 at 11:49
12

Also there is excellent Director

4
  • 1
    Yes, I recently found it too. Its an excellent, lightweight and simple routing solution with a really clean api. Thumbs up for pointing out .
    – lorefnon
    Oct 18, 2011 at 6:14
  • Looks like this project has been renamed and moved: Flatiron Director -- great solution, though.
    – nickb
    Feb 16, 2012 at 23:21
  • @nickb You are right. Am editing answer.
    – Shekhar
    Feb 17, 2012 at 18:27
  • Does not have IE8 support in case that is required
    – Swaff
    Jul 1, 2014 at 14:37
4

Crossroads.js seems to be one of the best around. One major advantage of it being, it doesn't rely on window.location for routing. It's lightweight as it sticks to do just routing and routing alone.

Others you may want to try: finch.js, davisjs (based on pushState so that you can use existing links as a fallback if JS fails)

Appending an update: March 30 2015 - I had moved to AngularJS late last year. Hands-down the best switch form JQ, has a lot of modules like routing in-built.

2
  • Hi, currently we are considering a migration from Knockout & Crossroads to Angular 4. Our approach will be migrating the project page by page and I might try to use Crossroads with Angular as well. I am wondering if you faced any problems while migrating to Angular and what your experiences were? Best regards,
    – stckvflw
    Jun 9, 2017 at 8:27
  • I have worked with Angular 1.x alone. Angular's UI-Router is a brilliant routing framework and it is far better than the ones listed above (because of 'states'). I have not used Angular 4, but I'm sure you'll find a UI-Router equivalent or Angular4 might have it in-built. I am not sure. Jun 9, 2017 at 11:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.