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

    Продолжая тему веб-разработки мобильных сайтов и приложений под мобильные устройства нельзя не затронуть такую тему как Фреймворки для манипуляции 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


    В поисках альтернатив можно выдвинуть следующие требования:
    1. Манипуляции с DOM
    2. Обработка жестов
    3. Асинхронные запросы
    4. Маленький размер


    Фреймворки.


    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. Проблем совместимости не было

    Share post

    Comments 20

      +3
      Зачем же сразу отказываться от jQuery? Есть плагин jQuery Touchwipe, который позволяет работать с событиями жестов. Сам использовал его для нескольких проектов — отлично работает.
        0
        jQuery массивен из-за того, что пытается поддерживать все. Пытался уменьшить размер с помощью сервисов для создания кастомных сборок jQuery, все равно выходит большой размер библиотеки
        Да и тесты показывают, что zepto шустрее
          +3
          Я согласен, возможно не всегда удобно использовать именно jQuery, но мне кажется было бы справедливо указать jQuery + Touchwipe как один из способов. Всё-таки jQuery, прямо скажем, довольно распространённый фреймворк :)
            +1
            «jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)»
            Should work портит всю малину и поддерживает он только swipe
              +1
              Уж лучше «Should work», чем «Work 100%» когда оно, честно говоря, не очень 100%.
              Много головной боли из-за непредвидинных мелочей.
            +3
            Если отказаться от системы виджетов, то jQM занимает не так много. Никакие сторонние сервисы для кастомных сборок не нужны. Достаточно установленного Node.js и модуля Grunt.

            По поводу тестов. В тестах нужно смотреть не только результаты, но и уметь их интерпретировать. Даже самые медленные либы выдают 15К+ результатов в секунду. При этом они предоставляют синтаксический сахар для дальнейшей удобной работы с результатами выборки. В общем я бы не был так категоричен при выборе мобильного фреймворка.
              0
              Эти сервисы тоже основаны на Grunt

              В выводе написал, что для каждого случая надо подбирать что-то свое.
              0
              А что по поводу jQuery 2.0? Использовал старый jQuery для проекта, обновил до версии 2.0 без каких либо проблем, для обработки всех событий использую только touchstart, touchmove, touchend(cancel), остальные события складываются из этих (как наверное и в других библиотеках), интересно услышать опыт использования этих библиотек для написания сложных интерфейсов, в которых есть куча объектов которые должны реагировать и на swipe и на tap
            0
            Мультитач в андроиде появился с версии 2.2
            –11
            Использую очень давно JQuery, все нормально пишется и сжимается и работает, нареканий нет.
            А Вы не пробовали нормально изучить JQuery? — А не как белка с одного фреймворка прыгать на другой, урывая там часть, в другом часть, а в голову не закладывая знаний.

            Кури спецуху по JQuery мой тебе совет!
              –9
              Б… ть хомячков развелось! Минусуют еще — пиздюки! Если нет мозгов сделать что то на JQuery, на чем то другом тоже через жопу получиться! Сука кури JQuery!
                0
                Рыдалъ. +10 (не могу нормально приплюсить)
                +2
                  +1
                  JQuery был и остается отличным фреймверком, спору нет, но для мобильной разработки, а также разработки под Smart TV он излишен. Не нужно тыкать людей в мануалы, JQuery уже давно всеми изучен и используется повсеместно. В этом топике речь идет исключительно о том, что есть более «легкие» решения для низко-производительных устройств и соединений.

                  К примеру, когда я только начал писать под Smart TV, я сперва использовал JQuery, но очень быстро понял, что для телевизора это пока слишком. Тормоза были заметные. Сейчас стараюсь писать либо с использованием Zepto либо вообще на чистом JS. Для различного рода Web-клиентов (сайтов, приложений etc) все еще юзаю JQuery, так что не волнуйтесь вы так! )))
                  0
                  От концептуального дизайна сайта Hammer.js рыдал просто. Шедевр, однозначно. «U can touch this» :-D
                    +2
                    Забыли Sencha Touch в обзоре. Размер, конечно, великоват, но и функционал громаден
                      0
                      Пример из статьи не работает на iOS 6. Всегда выскакивает «tap».
                        0
                        При оценке размера решения jQuery + плагины, нужно иметь в виду, что если тянуть jQuery, например, с Гугловых серверов, то с очень большой долей вероятности сама библиотека уже окажется в кеше браузера.
                          +1
                          С недавних пор использую Quo.JS для мобильной разработки. Полет нормальный, работает шустро, размер устраивает. Также рассматривал вариант Zepto + Hammer, то в Quo мне нравиться что все в одном.

                          Only users with full accounts can post comments. Log in, please.