Mobile web development: gestures, frameworks, numbers

Continuing the theme of web development of mobile sites and applications for mobile devices, one cannot but touch upon such a topic as the Framework for manipulating DOM and sending asynchronous requests.
The standard on the desktop has long been jQuery, but it is no good for developing for a mobile platform. Let's see how jQuery is friendly with mobile devices.

jQuery and mobile devices.

The first problem with jQuery is tachi. Handling a tache by the 'click' event is not the best idea. Due to the fact that mobile browsers have to support the click event, we can do it, but at a high price. On mobile devices, the click event is not called until 300ms has passed after the user has touched the screen, to determine whether it is scrolling or double tap or something else and the click event works, and this may seem insignificant, but the reaction to another action through others 300ms will cause a noticeable delay.

To avoid this, you can use tap-events that are supported by jQuery satellite - jQuery Mobile. But jQuery Mobile is also not the best solution. First, it is very large in size, as well as jQuery and even services that allow you to cut jQuery parts do not help to reduce its size sufficiently. The second serious drawback is the lack of support for gestures.
')

Gestures in theory.

Mobile version of WebKit (iOS, Android) supports the following events:

• touchstart - triggered when tapping. Analog - mouseDown
• touchmove - Triggered when a touch moves. Analog - mouseMove
• touchend - Initiated at the end of the touch. Analog - mouseUp
• touchcancel - triggered when the touch is interrupted (The user has locked the screen, pressed the home button, changed the orientation of the screen)

So, to crack the svayp we need the following code:

var touchstartX = 0; var touchstartY = 0; var touchendX = 0; var touchendY = 0; var gesuredZone = document.getElementById('gesuredZone'); gesuredZone.addEventListener('touchstart', function(event) { touchstartX = event.screenX; touchstartY = event.screenY; }, false); gesuredZone.addEventListener('touchend', function(event) { touchendX = event.screenX; touchendY = event.screenY; handleGesure(); }, false); function handleGesure() { var swiped = 'swiped: '; if (touchendX < touchstartX) { alert(swiped + 'left!'); } if (touchendX > touchstartX) { alert(swiped + 'right!'); } if (touchendY < touchstartY) { alert(swiped + 'down!'); } if (touchendY > touchstartY) { alert(swiped + 'left!'); } if (touchendY == touchstartY) { alert('tap!'); } } 

A working example:
http://jsfiddle.net/sagens/zNvtL/2/


Because of the complexity of handling gestures, you can refer to jQuery alternatives that support gestures

JQuery Alternatives

In search of alternatives, you can put forward the following requirements:

1. DOM manipulations
2. Gesture processing
3. Asynchronous requests
4. Small size

Frameworks

Quo.JS.

• Link to Framework: http://quoj.tapquo.com/
• Supported events: Tap, Single Tap, Double Tab, Hold, 2xFingers Tap, 2xFingers, Double Tap, Swipe Up, Swipe Right, Swipe Down, Swipe Down, Swipe Left, Swipe, Drag, Rotate Left, Rotate Right, Rotate, Pinch Out, Pinch, Fingers
• Framework Size: 18KB minimized.
• Pros:
  
  1. Supports besides events, CSS selectors, work with attributes, work with DOM and AJAX queries very similar to those in jQuery
  2. Does not require anything extra to work.
  3. The small size of the framework
  4. Migrating with jQuery is pretty simple, except for using $$ instead of $ to avoid conflicts, but it is easily treated
• Minuses:
  
  1. No documentation missing
  
  

Zepto.JS

• Link to Framework: http://zeptojs.com
• Supported Events: Tap, Single Tap, Double Tap, Long Tap, Swipe, SwipeLeft, SwipeRight, SwipeUp, SwipeDown
• Framework Size: 11KB minimized.
• Pros:
  
  1. A framework aimed at mobile development. Also has jQuery-like style and the code is almost compatible with jQuery
  2. Supports only modern browsers.
• Minuses:
  
  1. Does not support Drag and Multitouch *

Libraries

Hammer.JS

• Link to the library: http://eightmedia.imtqy.com/hammer.js
• Supported events: Hold, Tap, Doubletap, Drag, Dragstart, Dragend, Dragup, Dragdown, Dragleft, Dragright, Swipe, Swipeup, Swipedown, Swipeleft, Swiperight, Transform, Transformstart, Transformend, Rotate, Pinch, Pinchin, Pinchout, Touch, Release
• Library size: minimized 13KB.
• Pros:
  
  1. A large number of supported gestures including Touch and Release for tracking complex gestures
  2. There is a jQuery plugin
  3. The plugin is fully compatible with Zepto.JS
• Minuses:
  
  1. The size. 13 KB - a bit too much for gestures only
  
  

Jester

• Link to the library: https://github.com/plainview/Jester
• Supported events: Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch end
• Library size: 17KB minimized.
• Pros:
  
  1. Standalone library
• Minuses:
  
  1. Multitouch * and Drag are missing
  
  
  

Thumbs.JS

• Link to the library: http://mwbrooks.imtqy.com/thumbs.js/
• Supported events: touchstart, touchend, touchmove
• Library size: 612B minimized.
• Pros:
  
  1. Standalone library
  2. Small size
• Minuses:
  
  1. Just adds support for standard touchstart, touchend, touchmove events. Gestures need to be handled by yourself.
  
  
  

  *On a note:

  
  The standard Android browser does not support Multitouch to version 3.2. This means that Multitouch will not work on any application running in PhoneGap on Android version up to 3.2.
  
  

  We consider parrots

  
  When selecting items by class, things are as follows:
  
  
  How the raw class is taken is the implementation of Robert Nyman http://code.google.com/p/getelementsbyclassname/
  
  More results: http://jsperf.com/zepto-vs-jquery-selectors/12
  
  

  Total

  
  As you can see from the review of the leaders there is no need for something to be used for each case. Since my application is very actively using gestures and I needed to manage the DOM and send cross-domain requests, I stopped at a bunch of Zepto.JS + Hammer.JS. There were no compatibility issues.