Ext JS on Tap

Introduction

One of the major announcements at SenchaCon this year was that Ext JS will be adding support for touch-enabled devices. When people think about touch interfaces, they tend to focus primarily on phones and perhaps secondarily on tablets. While touch interfaces may have been (re)born on these devices, the reality is that touch input is rapidly becoming ubiquitous. You will find touch screens on mid-range laptops and even some of the new desktop models.

If you combine this proliferation of touch enablement with the BYOD (Bring Your Own Device) explosion, it is not hard to understand why many developers are looking to optimize the touch experience of their Ext JS applications.

So let’s see how this support is taking shape!

The Sencha-Core Package

The support for touch-enabled devices has, to date, been exclusive to Sencha Touch. To enable touch gestures for Ext JS, we have merged the core of the two frameworks (Sencha Touch and Ext JS) and created a sencha-core package.

The sencha-core package contains many of the items you might expect: The Class System, Dynamic Loader, Feature Detection, Utilities (such as XTemplates) and others. Much could be said about these subsystems and how they have been unified, but the focus of this article is the code specifically related to touch events.

Gestures and Event Normalization

One of the disadvantages of not being aware of touch inputs is that, while the browser translates native touch events into other events such as click, there is a 300 millisecond or so delay introduced during the translation. This delay negatively impacts the user experience by making even simple interactions appear sluggish.

The ability to translate native touch events into higher-level, synthetic events (or “gestures”) is one of the key pieces we’ve moved from Sencha Touch to the sencha-core package. This extensible system translates a sequence of touch events such as “touchstart followed by touchend”, into the “tap” gesture which is then dispatched as any other event.

The tap gesture is semantically equivalent to a click event and, in fact, Ext JS will (where appropriate) translate listeners for the click event like so:

May (based on device) be translated into this:

A similar translation applies to events such as:

• mousedown to touchstart
• mousemove to touchmove
• mouseup to touchend
• dblclick to doubletap

It is common, of course, to also listen directly to gesture events (like pinch). When doing so, it is important to remember that these may not be interactions that your user can initiate based on the device they are using.

Takeaway #1: Always use the framework API to set up your event listeners and let the framework juggle the device support for you.

Takeaway #2: Favor traditional mouse events for simple things and allow the framework to handle the optimal translation to gestures.

Global Event Delegation

To support the gesture system in Sencha Touch 2.0, we introduced a new strategy for managing event listeners that also greatly reduced the number of attached DOM-level listeners. The idea being to listen to bubbled events only at the root of the document, check for gestures and delegate as necessary from those few listeners to user code.

The effect of this approach is undetectable unless user code goes around the framework API to set up event listeners. The ability to understand the intent of user code and not rely on direct attachment of listeners to DOM elements is likely to play an even bigger role in normalizing events for devices that support both mouse and touch events.

All touch events and gesture listeners are handled in this manner. We are investigating whether or not to use this approach for all event listeners and welcome your feedback on this feature.

Takeaway #3: Always use the framework API to set up your event listeners and let the framework sort out who is listening to what events.

Momentum Scrolling

One of the surprising deficiencies of mobile browsers is their treatment of scrollable area in the browser. Unlike native applications, these areas don’t process “momentum” and therefore provide a sub-par user experience. In other words, while native browser scrolling behavior may be optimal on desktop browsers using a mouse, this is not the case on mobile devices. As such momentum scrolling was one of the most popularly requested features related to touch support.

The normal way a component indicates that it wants to enabling scrolling is the autoScroll config like so:

On desktop browsers this will set the overflow style as you would expect. On mobile devices, however, this will instead create the necessary scrolling elements to enable momentum scrolling.

When to use Ext JS on Tablets?

With all of this additional device support coming into Ext JS via sencha-core, many developers have questions about when to use Ext JS vs. Sencha Touch. The answer is simple to state but takes consideration to apply: each framework has unique features and device support and developers have to chose between them based on their applications’ requirements.

In some cases, this may mean writing two applications: an Ext JS desktop application and a Sencha Touch mobile application. This is not entirely unexpected given the disparity in form factors: it is common to design different interfaces across these devices to improve the user experience.

While it is true that applications targeting a 27” desktop display and an iPhone may build multiple interfaces, things get murky when targeting the space in between. For tablets and laptops, should you upsize a Sencha Touch application or downsize an Ext JS application?

Because there is no one-size-fits-all answer, having touch support in Ext JS removes a critical item from this set of mutually exclusive features. Perhaps your application needs certain Ext JS-only features or maybe you already have an Ext JS application. With the new support for touch events, your Ext JS applications will be ready for tablets!