How to improve performance for Sencha Touch 2.x application

Question

I have been working around Sencha Touch2 Application development for android and iPhone. Though I am not a newbie to mobility, I am still learning Sencha Touch and ExtJS.

My application has couple of screens with ListView on each screens. My application is adhered to Sencha MVC pattern. It uses card layout, placed to the view port and different forms/Components added on top of it. One AJAX request is made to make the data available for all screens. As a response I get JSON response of 1000 records. Sample Json response given below.

[{
    "key1": "Similarities between Operations and Projects",
    "value1": "Some Value"},
{
    "key2": "Differences between Operations and Project",
    "value2": "Some Value"},
.... {}, {}, {}

]

I have to parse the JSON and update the store so that my list will display all the content. I have tried two ways of doing it

1. Directly using proxy to the store
2. Manually applying the loop and adding records to store

But in both the ways the application is damn slow.

I understand for JavaScript may be 1000 records are huge. But I want to understand, if I can do this better in anyways.

I have did goggling and searched over stack-overflow (pasted link below), But, found nothing satisfactory.

PhoneGap 1.4 wrapping Sencha Touch 2.X - What about performance?

My thoughts: Currently all the records/ JSON response object is stored as a global object. I may reduce by storing it either to SessionStore or LocalStore. Is this statement valid?

Kindly help me to understand if I could improve it in anyways.

Answer 1

Somewhat difficult to answer this, based on the complexities on how the application is slow.

Does it load slowly?

Implementing paging will certainly help this, I cant imagine a json return of 1k records being an instant thing.

Paging is your friend.

Profile the loading time in your browser, and play around with what is killing you. ( This generally fixes 99% of issues I have in this area )

Is it laggy?

Rescoping improves speed, but again, looking at actually playing around scope etc in JS tends to be over optimization (ExtJs has enough weird bits in its API, which this is based off, that I imagine this being a losing battle).

If you go watch the vids on performance , they give advice about dynamically created components, destroying anything not active etc, but this ( to me atleast ) is a memory management thing.

TL:DR:

In personal experience, I've had 40x10 grids lagging in sencha touch, I imagine that a 1000x1 grid would grind you to a screeching halt.

Manage this on the server side, and your worries will go away :)