16

I am creating sencha web app using sencha touch 2.2.1. In my application I have screen which consists of a container where I added multiple panels. A single panel consists of two panels, a top panel and the inner panel.

On initialization of page, I am calling ajax api to fetch list of data for top panel of each item in container. and on top panel clicked, I am calling api for that item to fetch data for inner panel. On api call finished, I am rendering data to inner panel and making that panel visible. This code is same for all items in a container on top panel clicked.

There is also a button at top to 'expandAll' which will call api's for all items in a for loop one after one and rendering data for each inner panel. First I am calling one api and then on getting response of that I am storing in store and rendering on screen then calling next api, like this for all items.

getDetailData:function(params){
    var detailStore=Ext.getStore('DetailData');

    detailStore.load({
        callback:function(data,opt,success) {
            detailStore.storeDetailData(data);
            _this.onShowDetailData(data);

            // now call next api from here until all items data fetched and displayed
        }
    });
}

In this case, fetching all items data and rendering on ui thread is taking more time and app slows down.

Also while rendering data, I have to apply filters on store to filter data before rendering data for each time.

I wanted to know how should I do this processing and rendering work. As ajax api call and fetching data from server is not taking more time but processing and rendering is taking more time.

Any suggessions on this,

thanks

Darin Kolev
  • 3,401
  • 13
  • 31
  • 46
nleshjinde
  • 276
  • 1
  • 6
  • How many items or API calls in total are we talking about here? How complex are the item templates? – OhmzTech Dec 21 '13 at 05:15
  • Minimum 10 and at the max 14 api calls we are making here. And item template is complex structure of, One panel with vbox layout and two panels in it as, 1. Panel(layout=hbox), in that we have 5 panels and two lists 2. Panel(layout=hbox), in that we have 6 lists and two panels – nleshjinde Dec 21 '13 at 13:00
  • I have resolved this rendering issue. As for every sencha component, sencha is creating extra structure by it self. In my application I have used more sencha components with complex views and more inner components. So now I have used single panel and I am creating single html instead of more sencha components and directly setting this final HTML text to panel as setHtml. So In this case we are overriding sencha structure and simple rendering is happening. – nleshjinde Mar 17 '14 at 09:54

3 Answers3

2

I suggest not using panels, unless you have too. With a large number of items, you will be better with a dataview list with infinite checked to true. This will render much faster and you can tie your interactions to each on item on the list instead. If you are just doing markup, it should render much faster. Otherwise, every add will require layout.

Vu Nguyen
  • 543
  • 2
  • 12
1

I would think about separating your panel creation from your data population. That is, create your panels when your app is loading, then when you make your XHR you can just push the data into the panels and show them, rather than the overhead of the AJAX call, panel creation and widget rendering at the same time.

You could try to nail down the problem by profiling your JavaScript with the Profiles tab of the Chrome Developer Tools or with external tools like Compuware's profiler (I used it when it was dynaTrace):

http://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

However, from my experience you will probably see a lot of time taken in the Sencha methods which makes it difficult to see what changes are required.

Lastly, older browsers will perform this rendering much slower than newer browsers. If you can avoid supporting IE 6, 7, and 8 - your Sencha app will be much more responsive!

pherris
  • 17,195
  • 8
  • 42
  • 58
1

First of all I would do the profiling as suggested above. You need to find out wether the API calls or the layout rendering is slow.

According to my experience most of the performance problems are coming from the complex DOM structure. Sencha is adding huge number of DIVs for each component you add to the screen (just check the resulting source). This has significant effect on the app performance.

If you find your complex layout is the reason of the performance problems then you can either reconsider your screen layouts or replace some of the sencha controls with plain HTML rendered into the tpl of a container.

Zoltan Magyar
  • 874
  • 1
  • 6
  • 19
  • Since he's using Sencha Touch, it sounds like it's going to be a cross-platform mobile app. For the reasons you described above, I think Sencha Touch is simply not as good as advertised when it comes to mobile performance. Replacing cumbersome Sencha components with plain HTML, where possible, is definitely the way to go. – ashack Jan 16 '14 at 17:23
  • Usually the performance is ok on a mobile screen. However if your app utilises the increased screen size of the tablets then this problem kicks in. Larger screen -> more controls -> performance sucks. :) – Zoltan Magyar Jan 20 '14 at 09:12