In this article I talk about Sencha Touch best practices, specifically for developing user interfaces. I use the following practices in my projects. I think they will help you when developing Sencha Touch UIs.
Create the Simplest UI That Will Do the Work
Sencha Touch widgets add lots of elements to your DOM. This tends to slow down the UI and create memory leaks. Use the right component for the job. For example, displaying a large number of items in a combobox is a usability problem and a potential performance problem. Simple UIs result in better performance and usability.
Build and Load Widgets on Demand
When possible, build and load widgets on demand. Don’t create and load all the widgets upon application launch. Follow a load strategy based on the user’s role in the app so you only load the UI elements that the user will need. For example, you don’t have to load the administration UI of an app if the user is not in the administrators role. Your UI performs better and is more stable when you don’t load the DOM with elements that you will not use.
Limit the Amount of Data Rendered in the UI
Do not transfer large amounts of data from the server or local storage to the UI, in particular to data-bound components such as grids, lists and combo boxes. Large numbers of records take memory. They also slow down data-bound widgets’ rendering and performance. Use server-side and client-side paging and filtering to limit what you render in the app.
Design for Offline Mode and Optimize Access to Local Data
Your application should function without having to talk to the server all the time, unless there are very specific requirements to connect frequently. This approach has implications for your UI design. Your data-bound widgets should read data cached in local storage, local files or local databases that you refresh as needed when there is a connection with the server. Get only the data needed, cache it locally, and perform fast reads and writes.
Avoid Tight Coupling of UI Elements
Don’t make a widget be aware or depend on the existence of another widget. For those widgets that react to events triggered by other widgets, use controllers to handle the events. If two widgets are governed by different controllers, don’t let controller A be aware of widget B that’s under controller B. Use controller to controller links via events.
With this apprach it’s easier to modify parts of the UI without impacting other UI elements or application modules.
Don’t Block the UI
Don’t make your users wait. Prevent the UI from becoming unresponsive when the app is executing long-running operations, such as server calls and local data loading and filtering. Trigger long running operations and use callbacks to be notified upon completion. Use timeouts to limit wait periods. Be mindful of timers and functions that execute on intervals and might block the UI. Avoid complex drawing and animations, they affect UI performance.
Share Your Sencha Touch Best Practices
I created a presentation based on this article. You can download it here: Sencha Touch Best Practices Presentation
What about you? Have you developed best practices while working with Sencha Touch? I’d love to learn what you’ve come up with. Please share your thoughts here.
Get My Updates and Learn More
Remember to sign up for MiamiCoder’s newsletter so you can be among the first to know when my next article is available.