Мобильная веб-разработка: жесты, фреймворки, цифры

Введение.

Продолжая тему веб-разработки мобильных сайтов и приложений под мобильные устройства нельзя не затронуть такую тему как Фреймворки для манипуляции DOM и отправкой асинхронных запросов.
Стандартом на десктопе уже давно стал jQuery, но он никуда не годится для разработки под мобильную платформу. Давайте посмотрим, как jQuery дружит с мобильными устройствами.

jQuery и мобильные устройства.

Первая проблема jQuery – это тачи. Обработка тачей по средством эвента ‘click’ не является лучшей идеей. Благодаря тому, что мобильным браузерам приходиться поддерживать эвент click у нас это получится, но дорогой ценой. На мобильных устройствах click эвент не вызывается пока не пройдет 300мс после того как пользователь коснулся экрана, для определения скроллинг ли это или двойной тап или что-то другое и сработает обработка эвента click, и это может показаться незначительным, но реакция на другое действие через другие 300мс вызовет ощутимую задержку.

Чтобы избежать этого можно использовать тап-эвенты, которые поддерживаются спутником jQuery – jQuery Mobile. Но jQuery Mobile также не лучшее решение. Во первых, он очень большой по размеру, как и jQuery и даже сервисы, которые позволяют вырезать части jQuery не помогают уменьшить его размер в достаточной степени. Второй серьезный недостаток – отсутствие поддержки жестов.

Жесты в теории.

Мобильная версия WebKit (iOS, Android) поддерживает следующие эвенты:

touchstart – инициируется при косании. Аналог — mouseDown
touchmove – Инициируется при движении косания. Аналог — mouseMove
touchend – Инициируется при окончании косания. Аналог — mouseUp
touchcancel – Инициируется при прерывании касания (Пользователь заблокировал экран, нажал кнопку домой, изменил ориентацию экрана)

Итак, чтобы затрекать свайп нам понадобиться следующий код:

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!');     } }

Работающий пример:
http://jsfiddle.net/sagens/zNvtL/2/

Из-за сложности обработки жестов можно обратиться к альтернативам jQuery, которые поддерживают

Альтернативы jQuery

В поисках альтернатив можно выдвинуть следующие требования:

Манипуляции с DOM
Обработка жестов
Асинхронные запросы
Маленький размер

Фреймворки.

Quo.JS.

Ссылка на Фреймворк: http://quojs.tapquo.com/
Поддерживаемые события: 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
Размер Фреймворка: 18KB минимизированный.
Плюсы:
1. Поддерживает помимо событий, CSS селекторы, работу с атрибутами, работу с DOM и AJAX запросы очень похожие на аналоги в jQuery
2. Не требует ничего дополнительного для работы
3. Маленький размер Фреймворка
4. Миграция с jQuery довольно простая, за исключением использования $$ вместо $, чтобы избежать конфликтов, но это легко лечится
Минусы:
1. Отсутствует какая-либо документация

Zepto.JS

Ссылка на Фреймворк: http://zeptojs.com
Поддерживаемые события: Tap, Single Tap, Double Tap, Long Tap, Swipe, SwipeLeft, SwipeRight, SwipeUp, SwipeDown
Размер Фреймворка: 11KB минимизированный.
Плюсы:
1. Фреймворк нацеленный на мобильную разработку. Также имеет JQuery-like стиль и код почти совместим с jQuery
2. Поддерживает только современные браузеры
Минусы:
1. Не поддерживает Drag и Multitouch*

Библиотеки

Hammer.JS

Ссылка на библиотеку: http://eightmedia.github.io/hammer.js
Поддерживаемые события: Hold, Tap, Doubletap, Drag, Dragstart, Dragend, Dragup, Dragdown, Dragleft, Dragright, Swipe, Swipeup, Swipedown, Swipeleft, Swiperight, Transform, Transformstart, Transformend, Rotate, Pinch, Pinchin, Pinchout, Touch, Release
Размер библиотеки: 13KB минимизированная.
Плюсы:
1. Большое количество поддерживаемых жестов включая Touch и Release для трекинга сложных жестов
2. Есть плагин под jQuery
3. Плагин полностью совместим с Zepto.JS
Минусы:
1. Размер. 13 KB – многовато только для жестов

Jester

Ссылка на библиотеку: https://github.com/plainview/Jester
Поддерживаемые события: Tap, Double tap, Swipe, Flick, Pinch, Pinch arrow, Pinch widen, Pinch end
Размер библиотеки: 17KB минимизированная.
Плюсы:
1. Standalone библиотека
Минусы:
1. Отсутствует Multitouch* и Drag

Thumbs.JS

Ссылка на библиотеку: http://mwbrooks.github.io/thumbs.js/
Поддерживаемые события: touchstart, touchend, touchmove
Размер библиотеки: 612B минимизированная.
Плюсы:
1. Standalone библиотека
2. Маленький размер
Минусы:
1. Просто добавляет поддержку стандартных эвентов touchstart, touchend, touchmove. Жесты нужно обрабатывать самим.
*На заметку:

Стандартный браузер Android не поддерживает Multitouch до версии 3.2. Это значит, что Multitouch не будет работать на любом приложении запущенном в PhoneGap на версии Android до 3.2.

Считаем попугаев

При выборке элементов по классу дела обстоят так:

Как raw class взята имплементация Robert Nyman http://code.google.com/p/getelementsbyclassname/

Больше результатов: http://jsperf.com/zepto-vs-jquery-selectors/12

Итого.

Как видно по обзору лидеров нет и для каждого случая нужно использовать что-то свое. Так как мое приложение очень активно использует жесты и мне необходимо было управлять DOM и отправлять кросс-доменные запросы, я остановился на связке Zepto.JS + Hammer.JS. Проблем совместимости не было

ссылка на оригинал статьи http://habrahabr.ru/post/178611/