Best practice to keep DOM minimal?

[ThiemNguyen]

Hello everyone,
I used Sencha Touch 2 to develop my app (relating to e-Commerce) for a few months and it's growing bigger and bigger. Now I want to optimize it to get better performance on native devices and the problem I'm concerned about now is how to keep the DOM as small as possible.
Basically, my app's HomePanel is a TabPanel which contains following tabs: Product (show all products available), Bookmark (show user's subscription) and Search. Obviously, the results from those tasks are similar: a product list, clicking on a product will show the details. Very simple.
But what I've done is quite stupid, like this:
- Define ProductListView and ProductDetailView as xtypes.
- In the Product tab items configs, include ProductListView, ProductDetailView
- Do the same for Bookmark and Search tabs.

So I think what I did is very memory-consuming: just creating all components and at each user's tasks, find and set appropriate view and set them as active. Moreover, the "destination" of Product, Bookmark and Search tasks is nearly the same, but I have to create that ProductListView and ProductDetailView 3 times ...

I'm quite sure there's something not ok but I'm not very experienced in Sencha Touch so I need help from you. What I want to do are:
- Minimizing the DOM by only storing necessary views for user's interactions.
- Avoiding creating items of the same types too many times.

Highly appreciate any helps. Thank you so much.

[mitchellsimoens]

Two things you can do.

Remove items therefore removing them from the DOM when the view is not active.

If there is a container already created that is the same one you want to create, reuse that first one so you're not creating many components where you can reuse the one.

[gubarez]

Notice that Android's and iOS's way of rendering is quite different. To my experience, iOS is rendering much before showing an element, while Android is more prone to render thing on the go. So if you are going to show some windows e.g. overlays, etc. may be for iOS is better to create them in the DOM during the initialization process of the current view(viewport), while on Android may be is better to have them added to the DOM on the go - hence to make it lighter. This way on iOS you'll have a bit loading time more, but later it will be smoother.

[ThiemNguyen]

@ mitchellsimoens: Thank you but it seems general, and a little bit vague, I think ... I mean something which is more specific, like which components & methods I should tend to use or smt like that. I've seen several tutorials about performance optimization in Sencha Touch but almost of them are for ST1, not much for ST2 ...
@ gubarez: thanks for your comment. Exactly, iOS is my target. The problem I'm facing when running on native devices such as iPhone is, I think that the event handler firing delays remarkably. For instance, when I tap on a list item, it takes about half a second to be highlighted (then show the next view, let's say the detail of that list item for eg.). Here, I guess that's the time needed for ST2 to exactly locate that component on DOM tree to provide appropriate actions, then if my DOM is not well managed (as minimal as possible), that will show a noticeable delay to user...

[mitchellsimoens]

You can use any component and any method. Just need to remove what's not visible (like in a card layout).

[ThiemNguyen]

Simplified from my app, I has the following flow:
Category list --(on itemtap)--> Product List --(on itemtap)--> Product Detail
When users tap to go deeper in this flow, I create a new view through add() method and when they go back, I call remove(). But I constantly get the problem that controllers only handle events for view components at the first time, and from second time (which mean that view is remove()-ed and add()-ed), the events don't fire anymore (and all buttons and list items become useless).
How do I fix this?