ExtJS SyntheticEvent System - WalkingTree Technologies

0 5

By Udaya Lakshmi Sencha ExtJS November 2, 2018

It is a well-known fact that we are living in the age of multi-device apps. As part of the developer’s community, we develop applications which are expected to work on multiple devices seamlessly with a single and common code base. Over a period, it became standard design practice to keep model and controller common and build responsive UI or device specific UI. However, in UI development, there is an important aspect called event handling. When we are building a multi-device application, we will come across questions like do we need to capture user interactions(events) specific to each device or is there a generic mechanism to handle this kind of need. If there is a generic mechanism, does ExtJs has support for this kind of need?

The answer to the above question is, there is a generic mechanism to handle and they are being called as “Synthetic Events”. ExtJS has support for Synthetic events concept.

What are Synthetic Events?

Synthetic Event is a mechanism of propagating a lower-level browser event(s) to a more complex event(s) and allows them to be triggered by mouse input and in addition to touch input and will work across all supported devices and browsers, regardless of the input device that is used (mouse or touch).

DOM Events Vs Synthetic Events

Before going to read more details about SyntheticEvent, let us try to understand why do we need Synthetic Events as we already have DOM events in place.

When we are developing a cross-browser (or) multi-device application, it is intended to capture the user interactions happen on the UI Component. All these user interactions are converted to the respective events by the Browsers. But these events got differentiated based on the interaction happened on the input device type or Browser type. So we need to write different event handlers to capture the similar kind of the user interaction happening on the different browsers and device types. So the ExtJS come up with a solution called the Synthetic Events and the key concept that got involved to achieve Synthetic Events is the Event Normalization.

Event Normalization

Event Normalization is the process of converting the standard mouse events to the equivalent touch and pointer events. This conversion process happens behind the scenes and whenever the ExtJS application requests for a mouse event listener the framework actually attaches a similar kind of touch and pointer events.

Below is an example of the Event normalization process of converting a mousedown event to the equivalent touch and pointer events by the ExtJS Framework.

someElement.on(‘mousedown’, testFunction);

On touch supported device/browser, the ExtJS event system will translate it to:

someElement.on(‘touchstart’, testFunction);

in the same way, with pointer support device/browser, the ExtJS event system will translate it to:

someElement.on(‘pointerdown’, testFunction);

In this way, touch and pointer interaction behaves the same as mouse interaction.

Emerging Need for synthetic event as per native devices

There is a disadvantage that got involved with touch inputs is that when the browser translates the native touch events to the equivalent event such as click there is a considerable delay of 300 milliseconds or so got introduced during the translation. and because of this delay the user feels that even simpler interactions with native devices appear sluggish.

To overcome this challenge, the ExtJS Framework has the capability to translate native touch events to the higher level synthetic events (or “gestures”) through which framework translates sequence of touch events like “touchstart followed by touchend” to the gestures like “tap” and is dispatched to any other event to make it semantically equivalent to browser “click” event and the tap gesture is semantically equivalent to a click event and the ExtJS framework will translate listeners for the click event to tap based on the device type. The Primary Events of the Browser with respect to any input type of pointer, touch, and mouse are start, move, and end.

Primary Event	Touch Input	Pointer Input	Mouse Input
Start	touchstart	pointerdown	mousedown
Move	touchmove	pointermove	mousemove
End	touchend	pointerup	mouseup

The framework monitors the sequence and timing of these three events to synthesize them for more complex events (synthetic events/gestures), when the framework determines that a synthetic event has occurred, it dispatches a synthetic event to any elements that are listening, and listening for a synthetic event is the same as listening for any other DOM event. All the “single-touch” synthetic events like Tap, DoubleTap, LongPress, Drag, Rotate, Pinch, Swipe, EdgeSwipe etc… will work across all supported devices and browsers, irrespective of the input device that is used (mouse or touch).

How to Listen to the synthetic event specific to an input type?

In some cases, multi-device applications need to listen for a synthetic event only when triggered by a specific type of input (mouse or touch) while ignoring the same event for other input types and in such cases ExtJS framework provided a “pointerType” property with event object to identify the type of input that caused the event.

Event Propagation Flow Diagram :

From the event propagation flow diagram, it is clear that the Synthetic Event propagation is much similar to the DOM events propagation in a browser. The only difference is that the ExtJS framework involves delegated event model in order to recognize the gesture, so the synthetic events are delivered to DOM elements in a separate propagation phase which actually occurs after the event has already completed propagation at the DOM level.

Comparison Between Native And Synthetic Propagation:

S.NO	Native Propagation	Synthetic Propagation
1	Native Propagation happens in two phases, they are i) Capture Phase ii) Bubble Phase	Synthetic Propagation also happens in two phases, they are i) Capture Phase ii) Bubble Phase
2	When the browser propagates the event through the DOM hierarchy respective event listeners are invoked	The Original DOM Event is dispatched only after the gesture recognition step is completed
3	DOM listeners are generally avoided as these will fire out of sequence with other listeners	ExtJS event listeners by default use synthetic propagation as this ensures that the event fires in a proper sequence with other events and avoids any typical behaviors when propagation is stopped for any reason
4	The browser enables the native propagation through the DOM hierarchy	In ExtJS framework enables the synthetic propagation and no additional effort is needed from the Developer
5	DOM Event can listen at the Capture or Bubble phase	Synthetic Event can also listen at the Capture or Bubble phase
6	By default, listeners are fired in a bubble phase and can also listen at the capture phase using capture event option	Listeners are fired in the bubble phase and can also listen at the capture phase using capture event option

Summary

“Synthetic Events” is an important concept which enables JS based frameworks to excel well in multi-device platforms. By supporting this feature with SyntheticEvent propagation through event normalization, ExtJS will continue to excel both on the traditional desktop-style device and in the new world of touch-enabled devices and browsers.

I hope you got a clear understanding of Synthetic events in general and synthetic events in ExtJS in specific. Hope this knowledge helps you to take a better decision and will save a good amount of time while programing and designing.

If you want your thoughts or process to get validated by the industry experts? We will be excited to guide you!