optimal view structure with Ember.js for a mobile application

Question

Lately I have been building a mobile phone application using Sproutcore20 and now Ember.JS. This works great on my iPhone (3GS) though it stutters on many android devices.

The simplest thing, like switching from main menu item, and thus loading in a different view feels all but native.

Currently it makes use of template views which are appended and removed in a statechart. Each main menu item has a main state in which the corresponding views are appended (and removed on exit).

This method seems optimal to me but it does not function optimal, so I am wondering if an alternative approach like appending all views on load (deferred) and visibility toggling would improve performance (1)? It would make the DOM larger and thus operations on the DOM slower.

What is an optimal Ember.js code structure for building a mobile application, and what considerations need to be taken into account when building for mobile devices(2)?

Answer 1

It really depends on your application. In general, limiting the number of DOM elements and the number of DOM changes helps performance. Deciding whether to leave elements in the DOM and hide/show them, or to create/destroy elements on demand depends on the usage patterns of the app. If you expect the user to move quickly back and forth between views, hide/show can make sense.