Sencha TouchBest Practices for UI Development

MiamiCoder.com

Create the Simplest UI That Will Do the Work

Sencha Touch widgets add lots of elements to your DOM.Slows down the UI.Can create memory leaks.Use the right component for the job.

Sencha Touch Best Practices

MiamiCoder.com

Build and Load Widgets on Demand

Don’t create and load all the widgets upon application launch.Only load the UI elements that the user will need.Leverage user roles to determine what to load.

Sencha Touch Best Practices

MiamiCoder.com

Limit the Amount of Data Rendered in the UI

Don't load large numbers of records into data-bound components.They take memory and slow down rendering.Use paging and filtering to limit records.

Sencha Touch Best Practices

MiamiCoder.com

Design for Offline Mode and Optimize Accessto Local Data

App should function without having to talk to the server frequently.Data-bound widgets should read from local cache.Refresh from server when needed.

Sencha Touch Best Practices

MiamiCoder.com

Avoid Tight Coupling of UI Elements

Don’t make a widget be aware or depend on the existence of anotherwidget.Use controllers to handle widget events.Use controller-to-controller communication via events.

Sencha Touch Best Practices

MiamiCoder.com

Don’t Block the UI

Trigger long running operations and use callbacks to be notified uponcompletion.Use timeouts to limit wait periods.Be mindful of functions that execute on intervals and might block the UI.Avoid complex drawing and animations.

Sencha Touch Best Practices

MiamiCoder.com

Learn More

http://miamicoder.com/sencha-touch-tutorials/

Sencha Touch Best Practices

MiamiCoder.com