Sencha Inc. | HTML5 Apps

Blog

Ext JS on Tap

September 10, 2013 | Don Griffin

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:

 
listeners: {
    click: onClick
}
 

May (based on device) be translated into this:

 
listeners: {
    tap: onClick
}
 

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:

 
Ext.create('Ext.panel.Panel', {
    autoScroll: true,
    ...
});
 

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!

There are 15 responses. Add yours.

Vincent Clair

12 months ago

Yes ! I waited so long time for this support. Congratulations.
Is it already available ?

Wayne Rudd

12 months ago

Excellent! As per Vincent’s question, when and what versions will this be available in?

SimoAmi

12 months ago

Thanks for the update! Is this targeted for ExtJS 4 or the next major release update?

Maurizio

12 months ago

Is it already available ?

Don Griffin Sencha Employee

12 months ago

Sorry - I wish I could give you some dates here, but they are not finalized yet.

Don Griffin Sencha Employee

12 months ago

Anyone that wants to try out the demo version from SenchaCon 2013 can go to http://sc13-live.sencha.com/extjs.next/kitchensink-ext-theme-crisp/index.html#basic-panels

xjpmauricio

12 months ago

wow! great new themes!!! by the way, do I see some responsive ui features finally coming to ExtJs ?

Gabe Sidler

12 months ago

This is right on target!! I am really excited about this news. Covering the whole spectrum of mobile to desktop clients has become really challenging for us app developers. Touch support in EXT JS will help a lot.

Worth Lutz

12 months ago

Will this address the inconsistencies in common parts of ExtJS and Touch?

mj

12 months ago

Hi, I’m also very curious about when this will be released. This is a critical point for our new project when evaluating tech stack. Basically - no touch support = no go.

Would be great to hear at least if it’s going to happen in 2013 Q4 or later smile

PS. Congratz on great job with modernizing ExtJS!

Tom Coulton

11 months ago

For any Japanese speakers, we translated this article and posted it here: http://www.xenophy.com/sencha-blog/8823

This is also the link for the Japan Sencha User Group: http://www.meetup.com/Japan-Sencha-User-Group/

Vincent Clair

11 months ago

Hi, it was one month ago this post was published.
We currently develop a new project, and we have just finished structure and base application. It is the time of the front concept, and we need it wink
Any news on a release date and version targeted ?
Thanks

Roman Shelomanov

11 months ago

It is very very very cool new. I am searching this feature in JS a long time.

Roman Shelomanov

11 months ago

But it is to slow on Android HTC One.
And drag& drop window is not working with touch.

John

10 months ago

For Hebrew speaker, we have translated the article. the link:

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.