Routing with crossroads.js + browser history(from backbone.js)

Standard

It’s a very exciting time for developers, especially web developers. There has been a blow out of great cutting-edge web application thanks to the many javascript frameworks and plugins springing up. This is very good because as an engineer, you get to pick and choose what framework/plugin you want to use and the ability to extend it to fit your needs. Per last past, I started work on a personal project. One of my projects required a client-side routing engine. I looked at Backbone.js for its routing api which was great but it come with all the other api I didn’t wont/need.I looked at  Crossroads.js  and was just perfect because it did exactly what I was looking for -routing, and no more that that. Apart from client-side routing, I also need a navigation engine to allowing for routing to bookmarks and application states. Backbone.js comes with a supporting api called History. Since I wanted crossroads.js routing but Backbone.js implementation of  application navigation mechanism, I got hacking and in 10 min, had an extended crossroad.js with history support by porting over the implementation from Backbone. You can find and grab the code from github. You will need jquery to use this extension. Another thing you need to know is during hash navigation, crossroads is called with the relative path of the page and not just the hash. Thus if you navigate to “#3:edit” using crossroads.navigator at “www.test.com/people”, you will be navigated to “www.test.com/people#3:edit” and the request passed to crossroads for routing will be “people#3:edit”.

 

Credit: Feature sketch by ekubochan at Odosketch

Advertisements

2 thoughts on “Routing with crossroads.js + browser history(from backbone.js)

  1. nice to see that crossroads is being useful to other people and inspiring new projects. I have another project called Hasher (https://github.com/millermedeiros/hasher/) that also listen for hash changes, to integrate it with crossroads is pretty easy as you can see on this gist: https://gist.github.com/1109742

    I’ve coded hasher and been using it on production since last year but didn’t released it yet because there still a few things I wanted to add/improve and I didn’t had time to create a project page yet.

    PS: Hasher and Crossroads are being used on the new dentsu network website (http://dentsunetwork.com)

    cheers!

    • emmanuelbuah

      Great Miller. Great site – dentsu network. Keep up the good work. I’m looking to write a short article/blog post on single entry application with client-side routing. Will like to know what you think of single entry applications and ideas for easy of implementation using routing + browser history.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s