Introducing BackStack.js – View Navigation JavaScript Framework

June 14, 2012By 6 Comments

Recently my fellow teammate Piotr created a JavaScript framework called BackStack.js that extends Backbone.js and provides view management and transitions for your HTML/JS mobile or web app. You can push/pop views with a slide or fade transition (effect) that can be controlled with options for duration and direction, and also set a default transition to be used for all. The current effects include a slide, a fade, or no effect. The framework also dispatches custom events when a view is activated and deactivated so you can handle those as desired.

If you come from the Flex world you will be very familiar with this as it’s based off the Flex ViewNavigator concept. It’s very easy to implement and performs very well. Here is a simple code sample showing how it works:

/**
 * This is an implementation of a FirstView
 */
var FirstView = Backbone.View.extend({

    events: {
        'click #btnNext': 'btnNext_clickHandler'
    },

    render: function() {
        // Rendering view
        this.$el.html('<p>FirstView: Hello BackStack!</p><button id="btnNext">Next View</button>');
        return this;
    },

    btnNext_clickHandler: function(event) {
        // Pushing second view to the stack
        stackNavigator.pushView(SecondView);
    }
});

/**
 * This is an implementation of a SecondView
 */
var SecondView = Backbone.View.extend({

    events: {
        'click #btnPrev': 'btnPrev_clickHandler'
    },

    initialize:function() {
        this.on('viewActivate', this.this_viewActivateHandler, this);
    },
    
    render: function() {
        // Rendering view
        this.$el.html('<p>SecondView: This is a second view!</p><button id="btnPrev">Pop this View</button>');
        return this;
    },

    btnPrev_clickHandler: function(event) {
        // Popping SecondView from the stack with a fade effect
        var fade = new BackStack.FadeEffect();
        // You can pass different effects to all StackNavigator functions
        stackNavigator.popView(fade);
    },
    
    this_viewActivateHandler: function(event) {
        alert('SecondView activated!');
    }
});

// Initializing BackStack.StackNavigator for the #container div
var stackNavigator = new BackStack.StackNavigator({
    el: '#container'
});

// Pushing FirstView on to the stack
stackNavigator.pushView(FirstView);

Try it yourself now! (Note: the whole site itself was built with backstack.js so you may want to take a peek at that source too).

This framework is definitely worth checking out and especially cool when used with PhoneGap for mobile so be sure to check it out!

Filed in: HTML/JSPhoneGap Tags:

About the Author ()

Comments (6)

Trackback URL | Comments RSS Feed

  1. Amir says:

    Sorry for following your topic but I was wondering if I could expect any more flex related posts in my future visits to this blog or you have totally moved on!

    • Hi Amir, I am sure a lot of people are wondering the same, I know I haven’t blogged much Flex lately. I’ve been spending recent time dabbling in some of the newer technologies and want to help people see other options. Let me know if there’s a specific topic you would like to know more about with Flex and I’d be happy to do a post about it :-).

      Cheers!
      Holly

  2. Amir says:

    Not sure if this can fit in your blogs scope or not but personally I will be very interested in comparisons letting us decide on when to choose which cross-platform technology to benefit most.

  3. vasu says:

    All flex/flash tutorial sites are moving to html/js. :(

  4. Diux says:

    Hi,
    sounds cool!

    Is it compatible with Marionette?

    Thanks!

  5. Felix says:

    I’m implementing this UI Framework into a new product and was hitting a roadblock.

    Is there a way to push a view with an effect ? I see that there was for popping views…

Leave a Reply