app.js

FancyApp = Y.Base.create('fancyApp', Y.App, [ Y.App.ResponsiveViews, Y.App.Transitions ], {
    views : {
      GoalListView : {
        type      : NS.GoalListView,
        responsive: [
            { view : 'GoalListPhoneView', condition: function() { /* Determine dynamically */ } },
            { view : 'GoalListPhoneView', 'maxWidth' : '480px' },
            { view : 'GoalListFullView', 'minWidth' : '481px' }
        }
      },
      GoalListFullView : {
        type      : NS.GoalListView,
        preserve  : true
      },
      GoalListPhoneView : {
        type      : NS.GoalListView,
        preserve  : true
      }
    },

    showGoalList : function() {
        // Depending upon the dimensions, it may instead actually show
        // GoalListPhoneView
        this.showView('GoalListView');
    }
});

overview.md

Idea: Y.App.ResponsiveViews

Extending the view construction and creation based on responsive style breakpoints.

When the view is shown, Y.App will look at the dimensions of the browser and determine which view to show.

Browser resizing would trigger destruction of a preserved view, as well, and re-show the current active view (essentially a re-dispatch).

If the dimensions have not changed and the view is preserved, a previously established view will be activated.

If the dimensions have changed, the view will be reconstructed.

Another idea: Y.App.OnDemandViews:

• createView should be potentially asynchronous and take a callback
• A modules configuration option would specify which modules contain the view constructor
• createView would check if the constructor exists, otherwise call Y.use(modules)