Router.js vs Crossroads.js: Which One Do You Need?
Router.js is much more advanced framework and on the first glance it may seem better. If you look for a framework on the top of which you could build a complex wizard mechanism with validation rules or just general error handling - it may be a great solution. However, it is worth to consider whether requirements it imposes on the implementation and integration with the existing system are not too time-consuming and whether the impact on project’s architecture is not too deep. But when only base functionality of the routing system is needed (i.e. route handling), Crossroads.js is also a valid option, especially in a scenario when you already have an existing application and you don’t need to create it from scratch, but only extend it with a new module. In case when it meets project’s requirements, Crossroads.js simplicity and ease of integration are huge advantages.
Using Crossroads.js is really straightforward. You do not need to dig deep into the documentation to write simple routing configuration. You just need to pass a rule and a handler function for it. The rule can be both, string and regular expression pattern.
You may configure each route separately or have one generic handler for all routes:
Besides that you can also define callback function which is executed when no route is matched:
If you are up-to-date with Knockout.js, you probably have heard about the components – new significant feature released in version 3.2.0. It is really easy to integrate it with Crossroads.js routing – handling routing change may result in generation of the matching component.
Router.js not only gives you a handling mechanism, but a lot more. You get out-of-the-box advanced framework for managing page states. But, it also means that you will need some time to learn how to use it. Basically, handling new route means creating proper transition callbacks: one for creating model data and one for rendering view with this data.
Not only model and setup callbacks are invoked in a route handling process, but a lot more happens. Router.js exposes many callbacks during cycle of routing like: beforeModel, afterModel, exit (when route is no longer active) or enter (when route becomes active).
Another nice feature is nested routing. It means that each part of routing can have its own handler. It can be helpful in implementing master-detail view.
One more interesting functionality is built-in events. Those can be used for customizing transition behaviour, for example: willTransition can be used for aborting or redirecting current transition and error event for error handling.
Finally worth mentioning is that Router.js is a part of widely known Ember.js framework.
A word of caution!
Both Crossroads.js and Routing.js follow the Single Responsibility Principle (SRP). It means that they just parse url input and decide how to handle it. To listen to hash state changes in a browser and notify a routing library about those changes, you need another library, for example you might use hasher.js.