Intro to BackStack a Backbone.js views navigation library

Recently I’ve been working on several projects using PhoneGap/Cordova. These projects had a common requirement, and that was to have a custom UI look while preserving the interactions and feel that are common to mobile devices. Because of the custom UI look requirement I didn’t want to use any of the available mobile UI frameworks like jQuery Mobile, Sencha Touch, or jQTouch. Of course, those frameworks are really great and can save you ton of work, but at the same time they come with their own look-and-feel that often can be hard to re-skin to achieve what the app designer has proposed. That is why I decided to stick with pure HTML/CSS elements as much as possible and in some cases to build missing components from scratch. That is how BackStack came to life. In few simple words BackStack is an extension for Backbone.js that allows you to navigate between app views with nice mobile-style slide transitions, fade transitions, and no-effect transitions.

To play with BackStack yourself you can check out this demo site (it may not work well on non-WebKit based browsers, which is fine if you are doing PhoneGap/Cordova development). You can read more about it and download it from its GitHub project site located here. And if reading about BackStack is not enough for you, then watch the video below 😉




  • Facebook
  • Twitter
  • DZone
  • LinkedIn
  • Email

One comment

  1. David Carrus

    Hi, Piotr, i find your work very useful. I think i’m gonna use it for a project. So far i’m only conerned with his non IE-compatibility.

    I understand that IE is not your target but it would be helpful for me to know where your code is doing something that bothers ie and try to adjust it or eventually ut a fall back. Hope i’m not bothering you and thanks anyway for your work

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>