Preferred client side routing solution?

Question

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.

Solution 1

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.

Solution 2

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.

Solution 3

Also there is excellent Director

Solution 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.

View more solutions

Comments

[lorefnon]

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.

[Spycho]

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).

[lorefnon]

Yes, I recently found it too. Its an excellent, lightweight and simple routing solution with a really clean api. Thumbs up for pointing out .

[nickb]

Looks like this project has been renamed and moved: Flatiron Director -- great solution, though.

[Shekhar]

@nickb You are right. Am editing answer.

[joeriks]

History API is not supported by IE currently (until v10 caniuse.com/#search=history ) The history.js lib handles fallback to hashbangs.

[Matthew]

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

[Swaff]

Does not have IE8 support in case that is required

[stckvflw]

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,

[Deepak Thomas]

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.

[Kevin Farrugia]

In a similar setup to your own, I have used SammyJS however this is now outdated and would recommend a modern SPA framework.