Optimal presentation structure with Ember.js for mobile application

Question

Recently, I have been creating a mobile phone application using Sproutcore20 and now Ember.JS. This works fine on my iPhone (3GS), although it stutters on many Android devices.

The simplest thing, such as switching from the main menu item, and thus loading in a different view, feels everything except the native one.

Currently, it uses template views that are added and deleted in the status file. Each main menu has a main state in which corresponding views are added (and deleted when exiting).

This method seems optimal to me, but it doesn’t work optimally, so I wonder if performance (1) will improve the alternative approach, for example, adding all views at startup (deferred) and visibility? This would make the DOM larger and, therefore, operations with the DOM slower.

What is the optimal structure of Ember.js code for building a mobile application and what considerations should be taken into account when creating 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 improve performance. The decision about whether to leave elements in the DOM, hide / show them, or create / destroy elements on demand depends on the usage patterns of the application. If you expect the user to quickly move back and forth between views, hide / show may make sense.