JQM Backbone, part 1: The Router
There comes a point in every developer's life where they must make the leap: from small trivial apps to something more substantial. It is usually at this point where they realize that the old way of doing things no longer cuts it. A web app wired together with links is not only hard to understand, it is hard to maintain and enhance.
Client-side MV* frameworks are all the rage right now. Every week seems to bring enhancements to the current crop of frameworks or completely new ones are introduced. In this series, I will combine one of my favorite MV* frameworks: Backbone with my favorite mobile UI framework: jQuery Mobile.
Client-side MV* framework are complicated. There I said it. No matter what kind of spin you put on it, they are complicated. Yes, in the long run they make your code smaller and more maintainable, but initially they make it bigger and more complex and you may worry if there is a payoff. Don't worry there will be. For this reason, I am going to take it slow. Give you nice bite size chunks of code you can easily wrap your head around. Then build up from there.
Unlike a lot of tutorials or books, I am going to flip MV* on its head and not begin with the model. I think all of us can appreciate what a data model is easily enough. But starting with the model usually means that we will have a long way to go before we can get to some useful code. Instead I am going to begin with the router. It is the component which can quickly help us to improve the maintainability of our code.
In traditional MVC there are models, views, and controllers. Backbone like a lot of other client-side MV* frameworks, has models and views, but no controllers, instead it has collections and routers. The router allows kind of a two way communication between the app and the URL bar. If you type a URL into the bar, the router changes the program state to that represent by the URL. Likewise you can programmatically change the program's state and the URL bar will reflect that change. This allows users of your web app to bookmark it and return back to their previous state.
Now the more savvy readers will no that jQuery Mobile allows does a kind of routing itself, but trust me, it isn't as full featured as backbone's. So we will turn it off.
At its simplest form, backbone's router code is pretty simple. It consist of a map of routes and handlers for those routes. Now our routes currently consist of single pages. To handle a route, we simply to a JQM page change.
PAGES
The markup for each page is pretty bare. Each consist of a header, footer, some blank content and the new jQuery Mobile feature a panel. Please note: the markup for a panel must be defined within its page, it can be anywhere in the page, but I choose to put it before the header. To activate the panel, simply click the icon on the upper left corner of the page.
That's it for this first part. Hopefully it was easy enough to follow. Please download the code and play with it. Next week: Views and templates. You may notice a commented out script tag for handlebars.js in the source code, next week we will uncomment it.
