Performance Tuning Appcelerator Applications
by Andrew ZuercherPurpose
Once you have developed a functional application and are priming for a roll-out, it will be in your interest to tune your application and identify those touch-points which are candidates for tuning. I’ve preferred taking a quantitative approach to performance tuning so that you can compare metrics before and afterwards to identify improvement from a measurable perspective. To this end, it is possible to record statistics both client and server side (currently only for java services). Sometimes the culprit may be server side or client side and determining the area where performance bottlenecks exist is important which is why taking on a triangulation approach is important.
Client Side
Currently in the client, you can invoke the Appcelerator.Util.Performance component. To enable it, simply include logStats=1 in your url, for example: http://localhost:8080/myapp?logStats=1. The performance component by design will have no impact on your application unless you include this parameter. By default, the servicebroker will calculate the statistics for handling all message types both local and remote. The statistics will include the following:
- last - the last recorded time
- mean
- hits - aka count
- min
- max
- total - total time overall
These statistics will be logged to the console (available in Firefox with Firebug and in Safari with Webkit).
However, you do not need to have logging available to inspect the statistics (please see the section “Viewing Client Side statistics” below). In addition the component also allows for resetting all statistics to restart your recording.
Capturing your own statistics
If for some reason you want to capture statistics at a finer level, you can easily to this in javascript:
1 2 3 | var stat = Appcelerator.Util.Performance.createStat(); //do some work Appcelerator.Util.Performance.endStat(stat,"mystat","mycategory"); |
In this example we create a statistic called “mystat” that will be included in a category of “mycategory”. This is useful for filtering through your stats as well as being able to compare statistics side by side. For example, the service broker will automatically record the following categories:
- remote
- local
Viewing Client Side statistics
You may want to include the following content file in your application and make it visible when the logStats=1 parameter is included.
Here is the content source itself
clientperformance.html
Tuning Considerations
As you develop larger applications, it may be useful to consider the following tips:
- use lazy=true for app:content files. this will help to delay long initial load times for your applications
- if you do not lazily load your content files, consider postponing app:message invocations until they are needed
- consider using CSS selectors in the implementation of your app:iterator rather than re-firing messages for logic
- leverage the app:datacache to reduce the number of outgoing messages
- make use of pagination if rendering large datasets - the app:datatable allows for client side pagination for example
Wrap Up
We covered in this article
- how you can capture statistics for client side applications
- some performance tips in regards to client applications
In a later article we will identify how you can take this a step further to capture statistics on the server side as well with java services.This article has been cross posted on
Tags: appcelerator, performance, ria

