Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at I really love framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Meta Code | Application View start Best Practice

Application View start Best Practice

09 Sep Application View start Best Practice

After some discussion with Nicholas Reed, I wanted to share a best practice method of starting a application.
Here is Example Code
Nick had an issue that I thought would benefit from this method.


  • Add your app view to the main context, not all your views.
  • Have the app view be the main node for your application
  • Track when you have a resize on the context and act accordingly in your app view
  • Code Happy!


On next tick of the engine, you can pick up the main context size and use the size to setup your main view. Add the main view to the context.

var size = [undefined, undefined];
Engine.nextTick(function() {
   console.log('After tick=' + mainContext.getSize());
   size = mainContext.getSize();
   mainView = new Splash({
      content: 'WP Famous'
   mainView.setOptions({size: [size[0], size[1]]});

Listen for the resize of the main context and set the options of your main view accordingly. Nothing fancy really.

  mainContext.on('resize', function(e) {
    console.log('After resize=' + mainContext.getSize());
    size = mainContext.getSize();
    if (mainView)
      mainView.setOptions({size: [size[0]*0.9, size[1]*0.9]});

Note: I am not saying this is the only layout that should be used. The example gives the developer a starting point. I have applications set up to load a config file once the size is determined and from there decide the layout. There are other methods also, please share if you have one that might suit a special use case.

  • Hey guys, I asked Mike:

    “How do you get the calculated size of a Modifier that has size [undefined, undefined]?”

    and he said

    “The view/renderable that needs it will have to have a commit function. The commit function gets the parent spec passed down to it which includes size. Try subclassing COntextualView and overriding the commit function.

    In mixed mode you will have awareness of parent size in some fashion but it will not be in the same manner.”

    So that’s one way you can get the parent size of anything.

    And also, the next release of will have proportions for Modifiers, so you can tell a Modifier to be a percentage of it’s parent’s width:

    new Modifier({
    proportions: [1/3, 1/3] // 33.33% width and height of the Mod’s parent.