html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

2

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • habrahabr.ru
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции