Sencha Touch 2.1 is our next release of the Sencha mobile framework. The 2.1 release includes the following key upgrades: significant performance improvements, charting support, an advanced list component, and enhanced native support through the Sencha Mobile Packager.
In Sencha Touch 2.0 some of our developers experienced nested layout performance issues. Our investigations found that by isolating panels and providing more layout information to the browser, the framework and your application can perform better. This implementation did not change our API, but some small changes to the DOM structure and additional CSS class names are now used to provide this enhancement. Developers of application with custom CSS should review their selectors with this update.
Another under the hood performance improvement is a change to the ‘painted’ event which uses the CSS transitionEnd event to detect when elements and components are visible instead of having to traverse the DOM. Since we cannot do this for the ‘erased’ event, we recommend avoiding this event where you can as it can degrade performance.
Lastly, we have added a TaskQueue mechanism which helps us batch read or write operations together and prevent interleaving of DOM Read and Write operations in between internal DOM reflows.
Sencha Touch Charts
We have also revised Sencha Touch Charts in this Sencha Touch 2.1 cycle. Sencha Touch Charts is now available as part of the Sencha Touch GPL framework, and as part of the Sencha Complete or Sencha Complete: Team packages. In our revised Sencha Touch Charts key improvements have been made to both the Draw and Chart packages that enhance performance and expand flexibility.
Sencha Touch Charts: What’s new in the Draw package
Each sprite now has its own class. This change creates many benefits for performance, flexibility and maintainability. Drawing instructions are now defined directly in the concrete sprite classes. Subclassing a sprite allows users to enhance features of a previously completed sprite and conserve effort by sharing common functionality. In addition, taking advantage of the class hierarchy allows the draw engine code to be more modular and maintainable.
Modifiers and Attribute Definitions
Modifiers and Attribute Definitions are the two most innovative notions introduced in this chart release.
The Attributes Definitions (AD) lets users define custom attributes onto custom sprite classes to perform lazy updates. Each sprite will have a member called “attr”, which is the “attribute set” of the sprite. All states—as well as caches—need to be stored in the attribute set. The primary purpose of AD is to define how data should be used to change the content of an attribute set when setAttributes is called.
AD can define appliers (called processors) and updaters like the config system in Sencha Touch. But in order to achieve greater performance, update processes are batched. For example, when you change the width and height of a rectangle sprite, in the both cases you need to update its path cache. We batch the updating so the path will be updated only once.
Appliers of AD, called “processors” in this context, allow the user to check and normalize the value before it is applied to the attribute set. Names can be used to refer to predefined processors. This is very convenient and vastly enhances maintainability. AD also allows users to define aliases to the attribute items.
Modifiers empower a user to make additive changes to an attribute set. A modifier is an adaptation of the Decorator pattern. A sprite can have a list of modifiers that chain together to process the content of an attribute set. In this way, a modifier is like a pipeline of filters that build up the resulting attributes progressively. For instance, when we query the value of an attribute set, the highlight modifier will change certain attributes to be its highlighted value; similarly, the animation modifier will generate the current value for each animated attribute for each frame.
Modifiers work independently that increases maintainability by making each modification modular. Previously, highlighting a sprite involved working with animation inside the highlighting code. This would involve about 60 lines of potentially error prone code. With modifiers, highlighting happens in two lines (simply set the highlighted attributes), and the sprites will highlight without any surprise.
Flyweight Instancing Sprite
Retina Display Support
The draw package now detects Retina pixel-doubled displays using the HTML5 API window.devicePixelRatio and will increase the pixel rate for better fidelity on high resolution devices. Charts that need pixel alignment will also take this factor into account. Unless the device pixel size is requested, the pixel ratio will be invisible to developers as the draw engine continues to be vector-based.
Sencha Touch Charts: What’s new in the Chart package
When we try to plot a huge data set directly on the screen, we are possibly plotting hundreds of points within a space of less than a pixel. This will be a huge waste of calculation power considering the cost of algorithms for stroking and filling. Therefore we only keep the minimum and maximum value within one pixel (by width). For example, if a very large data set has 1000 data points that would render to a pixel in width (such as a financial chart), the chart will only render the minimum and maximum value of that data set within that pixel. We achieve this summarization by a preprocessing technique called “aggregation”. By aggregation, we can query the desired simplified data to a given specificity instantly.
To solve this problem, we used a Segment Tree, which is a data structure for swift data aggregation. It requires linear time and space to finish the aggregation and logarithmic time to query. Segment tree also allows record updating in O(log(n)) time, which is very valuable for the future when features such as partial updates might be implemented.
Financial Chart Types
To display financial data using the Chart package, we are introducing two new charts: the Candlestick chart and the Open-High-Low-Close (OHLC) chart. These are both available as the candlestick series in the new Charts package. The Stock App example also includes a 50 day moving average as well.
Advanced List component with Infinite scrolling
Sencha Touch 2.1 also includes a new List component.The new implementation no longer has degraded performance when using lists with a large number of items in them. In addition, lists can use components if you specify them with an itemConfig and itemTpl will be converted to an itemConfig dynamically if you specify one. This is due to the list no longer being bound one-to-one between a Data Store and the DOM elements. Due to these changes, the DOM structure was altered for List, and you may need to change some CSS selectors to add appropriate styling to your lists. Typically, you need to change the selector from
'.x-list-item > .x-dock-horizontal > .x-dock-body' for any padding or margins you may have added. We changed the TouchTweets example with the new implementation; instead of using a component based DataView, it now uses the new List. It’s a good example of using the new List component with dynamic large lists. This example also shows the updated PullToRefresh and ListPaging plugins.
Enhanced Native Support through the Sencha Mobile Packager
The Sencha Mobile Packager is included in the new Sencha Cmd, previously known as the SDK tools. In this release, we have enhanced native support. You can now directly run your app on your device as well as the simulator using the native packager. We have also added read only access to the device Contact API for both iOS and Android. The packager config also lets you pass in “raw” data to the iOS info.plist and Android AndroidManifest.xml through the rawConfig key. We also heard your feedback about non-admin access to the native packager, and we have updated the setup so admin access is no longer required.
Sencha Touch 2.1 GA will be publically available in November. Please watch our blog for the release announcement.