PDA

View Full Version : Declaring vs. dynamically adding views - performance & memory considerations?



tt88
23 Aug 2013, 3:05 AM
Hi

I have a question about how Sencha loads views into memory.

I have a planned application with a hierarchy of views (which include complex custom components, charts and lists). Logic tells me that it would be best to design them as a collection of flat views loaded dynamically into the structure / hierarchy as they are needed, to reduce the memory footprint of the app.

However, I do like the Sencha card layout setup, where you can declare a stack of views & through simple code call the 'setActiveItem' function to navigate to the relevant view. In this scenario, my hierarchy of views are declared up-front & can be easily switched by calling the relevant functions.

How will this affect the memory footprint of an app with a fairly large view hierarchy? For example, take the following hierarchy of views which will use the card layout & setActiveItem to navigate among their items.
Viewport:
- Main (tab-panel) items:[ (toolbar), (view1), (view2) ... (view5) ]
- view1 (container) items: [ (view1a), (view1b) ]
- view1a (container) items: [ (list), (form+fieldsets), (container+fieldsets) ]
- view1b (container) items: [ (nested-list + detail-card), (form+fieldsets) ]
- view2 (container) items: [ (view2a), (view2b), (view2c) ]
- view2a (container) items: [ (view2aa), (view2bb) ]
- view2aa (container) items: [ (chart), (chart), (chart) ]
- view2bb (container) items: [ (list), (map), (container+fieldsets) ]
... (views 4-5 have similar structures)

How will the above example fare as a Sencha app in the context of the following:
- Memory footprint: in an app, does Sencha load all the views up-front into memory? Does this tend to badly affect performance?
- Display elements on screen / performance: in the example above, will view2bb's list-view be sitting ontop of all the display elements down to the Main view? Does this tend to badly affect performance?
- For those more experienced with Sencha & views, does the above example for an app layout seem reasonable? Are there any bits of advice that are worth noting?

Thanks
ttw

fmoseley
27 Aug 2013, 5:47 PM
By default the carousel only load 3 views into the dom at a time. The current view, its next view and its previous one. Check out the following blogpost. You should find it helpful.
http://blog.couchcommerce.com/2013/03/27/2013327going-lazyor-how-to-create-a-lazycarousel-for-sencha-touch/

tt88
27 Aug 2013, 11:38 PM
By default the carousel only load 3 views into the dom at a time. The current view, its next view and its previous one. Check out the following blogpost. You should find it helpful.
http://blog.couchcommerce.com/2013/03/27/2013327going-lazyor-how-to-create-a-lazycarousel-for-sencha-touch/

Are you implying that my view structure explained above would be implemented better by using a flat structure & placed into a Carousel view?

sashiroto
14 Sep 2013, 8:57 PM
Great question but I don't believe it has been answered correctly. I too want to use the Card layout and declare a bunch of views beforehand, I don't want to use the carousel for this purpose. But, I'm concerned about memory as well. Anyone have suggestions?

tt88
15 Sep 2013, 11:25 PM
Hi Sashiroto

I still have not 100% conclusively figured out how Sencha view loading / memory works & would love to get a conclusive answer from some of the Sencha experts.

In the meantime, what I did was put some logging into the views to see when they got initialized. At least I can see when the initialize method is being called & from this work out how view loading is happening.

As for finding out whether the view/component depth and complexity of my proposed app is reasonable - it seems I am going to have to find out the hard way of trial and error ;(

Cheers
ttw

Kurt001
23 Sep 2013, 2:11 AM
a) Add all views at startup and go with setActiveItem
This will load all views and hide them inside the dome. If you are not using lists or something with a lot of dome elements you are fine using this method. Probably with up to 6 views.

b) Use routing and destroy views
Creating a view is not really timeconsuming. You will not notice a difference to hide/show, but the number of dome elements is down to a minimum. As a rule of thumb: if you are using more than one list (in different views) this might be a good way in keeping the dome slim.
Usually I create a base view which destroys the view on deactivate. Then I extend the views from the base view and add routes to the controller of the view with autocreate.

tt88
27 Sep 2013, 5:38 AM
a) Add all views at startup and go with setActiveItem
This will load all views and hide them inside the dome. If you are not using lists or something with a lot of dome elements you are fine using this method. Probably with up to 6 views.

b) Use routing and destroy views
Creating a view is not really timeconsuming. You will not notice a difference to hide/show, but the number of dome elements is down to a minimum. As a rule of thumb: if you are using more than one list (in different views) this might be a good way in keeping the dome slim.
Usually I create a base view which destroys the view on deactivate. Then I extend the views from the base view and add routes to the controller of the view with autocreate.

Thanks for the recommendations ... it's good to hear how other people are handling view creation / display