Javascript application - Loading data

Question

I have a javascript application and i dont know what is a better practice for loading data. For example, i have a contact table with my contact informations (FirstName, LastName, Addresses, PhoneNumbers, Website etc.). So now i will show these informations and i make two "lists". In the first list, i will show all my contacts but only with the attributes "FirstName" and "LastName" and if i click on a contact, i will show all informations (FirstName, LastName, Addresses, PhoneNumbers, Websites etc.).

Is it better to load the whole informations at a time or load the "detail" informations only if i click on a contact?

Answer 1

Depends on the usage and the network, here are some pros and cons of either way.

Load everything at once into JSON, show what is needed/selected:

Pros

• If data doesn't change much, can be easily cachable
• No AJAX, very simple
• After the first load, everything happens "instantly"

Cons

• Could hurt you if the data slug is large enough

Get Individual Info via AJAX:

Pros

• Good if data is constantly changing
• Good if each Contact's data is large enough to warrant a separate ajax call
• Good if network latency isn't too horrible

Cons

• Overkill for small datasets
• Adds Complexity

So if your dataset isn't all that huge, I would go with the simple route. If it is a large or constantly changing dataset, I would go with the AJAX version.