Smart Tech for a better Web
There were two things I loved on jQuery mobile. One was it’s look. And the other thing was the “single page” approach. It meant, you have all your App HTML basically in one file, showing only the parts which are necessary.
For the page switching I didn’t find anything, so I decided to write some code myself. Because I listened to “We are the Roadcrew” from the great Rock’n’Roll band Motörhead and “Roadcrew” is a pretty great name for mobile things, I simply named it like that: Roadcrew.
It is pretty simple: include the Roadcrew.js files and make up your HTML, like for example:
Every div which is a page, gets the “page” class. A page is basically the div which is shown on your mobile. You could also say “view” to it. Every page gets an ID. This is used to navigate between your pages. For example, if you want to show the “content” page, you would make up an link like:
To make this basic navigation work, you only need to make an instance of Roadcrew:
This is jQuery code. And in fact Roadcrew.js uses jQuery. I will try to reduce the dependencies to a minimum in future and hopefully I can make it work with Zepto.js. But for now you have to live with jQuery, which is said to be slower on mobiles than Zepto. Patches welcome!
On thing which really didn’t work well with jQuery mobile was to show a loading page. This is dead simple usually, but was forced to waste a lot of time to deal with it. In Roadcrew it’s pretty simple. You simply need to create an interceptor - something which is done before the actual target page is called.
It could look like that:
While the “flip” method just “flips” pages around, bypassing every potential interceptor, the dispatch() function argument is what you can think of “showing the actual target page”. With the code above you would show the loading page which is then visible until $.post is ready and calls the dispatch() function.
If your interceptor causes an error, you might want to have an error handler waiting for you. You can pass it on when registering your interceptor.
As you can see, I throw an error in my dispatcher. The second function is my error handler which will work with the error handler.
There is also a chance to define a global error handler, which deals with every error.
I will create a blog post on Roadcrew.dart and my experiences on the port when I find some time.
The current implementation is pretty small and it gives me everything I need. But I have already seen some things which might be useful for others. For example, there is no transition animation so far. It should be pretty easy to implement such a thing, I just didn’t do it. If you want to help me, send me a patch.
As already mentioned I would like to support Zepto.js.
There is now way to load new divs by AJAX. Currently I am unsure if this would just blow up the code or if it is really useful.
And finally I need to say that there is always room to improve the current code itself.
That all said, I hope that you’ll find it useful. If you have some feedback, let me know - either by mail or - if appropriate as feature wish or issue in the issue tracker.