Sencha Touch - transitioning to pages

Question

I've been playing around with Sencha Touch 2 and came across two ways of transitioning between pages (e.g. from Home to Login).

One way:
app.js:

launch: function() {
    var loginPage = {
        xtype: 'loginview'
    };

    var homePage = {
        xtype: 'homeview'
    };

    Ext.Viewport.add([loginPage, homePage]);
}

controller/Home.js

onLogOff: function() {
    ...
    var loginPage = this.getLoginView();
    Ext.Viewport.animateActiveItem(loginPage, this.slideRight);
},
slideRight: {
    type: 'slide', direction: 'right'
}

Another way:
app.js:

launch: function() {
    var loginPage = {
        xtype: 'loginview'
    };

    Ext.Viewport.add(loginPage);
}

controller/Home.js

onLogOff: function() {
    ...
    var loginPage = { xtype: 'loginview' };

    Ext.Viewport.add(loginPage);
    Ext.Viewport.remove(this.getHomeView());
}

What is the preferred way of transitioning?

I'm tempted to just add one page to the viewport at a time (second approach), but being fairly new to the framework, I'm not confident that this is the best approach.

Is there a significant difference between the two, and if yes, what is it?

Answer 1

My advice would be to use the second pattern.

For starters, you don't want anyone who hasn't "logged in" to be able to inspect the HTML of the "authenticated" area. Also you don't want to render more to the DOM than you have to at any point in a single-page application. Less stuff in the DOM will help prevent performance and display issues.