Мобильная версия e96. Взгляд менеджера и взгляд...
DESCRIPTION
Презентация для доклада на Открытом Семинаре it-people 21 мая 2014: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (http://it-people.ru/mobilnaya-versiya-e96-vzglyad-menedzhera-i-vzglyad-razrabotchika/).TRANSCRIPT
![Page 1: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/1.jpg)
Как мы делаем m.e96.ru
Коньшин Александр и Елькин Сергей
http://m.e96.ru
Dev team Instagram: e96_dev
![Page 2: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/2.jpg)
Мобильная версия сайта e96.ruПьеса в 2-х частях с антрактом
![Page 3: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/3.jpg)
Часть 1. История менеджераВ главной роли – Коньшин Александр
![Page 4: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/4.jpg)
4
Немного о нас
— 13 место в рейтинге «Forbes» среди интернет-магазинов в РФ по итогам 2013 года (ТОП-5 по обороту на одного сотрудника в РФ)
— 18 место в рейтинге крупнейших продавцов Рунета по итогам 2013 года (в составе IQ One Holdings) по мнению «Коммерсанта»
— 3 место в рейтинге эффективности интернет-магазинов электроники и бытовой техники (e-Commerce Website Rank 2014)
![Page 5: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/5.jpg)
5
Цифры
— Оборот более 4,5+ млрд рублей
— Более 3 000+ заказов в день
— Более 1 000 000+ пользователей в неделю
— Более 400 000+ товаров в ассортименте:
бытовая техника, электроника, детские товары, сантехника, инструменты и многое другое
![Page 6: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/6.jpg)
6
География
— 29 подразделений (собственные и франчайзинговые)
— 18 регионов в РФ
— 900+ населенных пунктов
![Page 7: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/7.jpg)
7
Мобильный трафик растет
Мобильный трафик растет!— Рост проникновения интернета в РФ: телефоны +27% за год, планшеты + 147% за год*
— Каждый день 59% российских пользователей Рунета проводят время в мобильном Интернете**
— Лидеры роста мобильной аудитории – населенные пункты с населением меньше 1 миллиона жителей
е96 – не исключение: — Мобильный трафик в апреле 2014 вырос более чем в 3 раза относительно апреля 2013
* TNS Web Index УИ, Россия 100k+, сентябрь 2013, Monthly Reach, % от населения, 12+ лет
** NewMR, Online Market Intelligence (OMI) – Мобильная Россия, лето 2013
![Page 8: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/8.jpg)
8
Проникновение мобильного интернета
![Page 9: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/9.jpg)
9
Прирост мобильных пользователей
![Page 10: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/10.jpg)
10
Трафик есть, но покупают ли?
Мобильные пользователи покупают!— Треть активности мобильных пользователей в США приходится на поиск товаров и услуг*
— В США 87% пользователей используют мобильный интернет для покупок**
— В РФ уже 15% пользователей используют мобильный интернет для оплаты товаров и услуг, а 5% пользуются именно ИМ***
е96 – не исключение: — Количество заказов с мобильных устройств в апреле 2014 выросло в более чем в 2,5 раза по сравнению с апрелем 2013.
* UserZoom - MOBILE BENCHMARK STUDY
** MarksWebb Rank&Report- e-Commerce User Index 2014
*** TNS Web Index УИ, Россия 100k+, сентябрь 2013, Monthly Reach, % от населения, 12+ лет
![Page 11: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/11.jpg)
11
Как покупают?
![Page 12: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/12.jpg)
12
Реакция на мобильный тренд в РФ
![Page 13: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/13.jpg)
13
Проблемы есть у большинства
Любопытные заметки:— Вообще в РФ только 1% интернет-магазинов имеют мобильную версию*
— Лидирующие сегменты «мобилизации» - купонаторы и доставка еды. Хуже всего дела обстоят с продавцами автозапчастей.
— Даже крупный бизнес не до конца понимает как быть.
* по данным исследовательского агентства Data Insight
Кстати, нам тоже гневные письма пишут…
![Page 14: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/14.jpg)
14
Будем делать!
Итак, решили делать мобильную версию,
но:
— А может сделаем приложения вместо мобильного сайта?
— Отдельный поддомен или общий адаптивный сайт?
— Может готовые решения использовать?
— А делать ли весь функционал?
— Какие браузеры и устройства поддерживать?
— А что будет с SEO-оптимизацией?
— На что обратить внимание при разработке?
![Page 15: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/15.jpg)
15
Очевидно!
Очевидно, что все зависит от конкретной
ситуации… Мы лишь расскажем о своей.
![Page 16: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/16.jpg)
16
Приложение для e-commerce?
Приложение лучше делать позже (если у вас покупают
не спонтанно)
Мобильный сайт –
4 млн
пользователей
Приложение –
1 млн
пользователей
![Page 17: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/17.jpg)
17
Еще о приложениях!
Мобильная версия сайта приоритетнее:
— Если у вас значительная доля трафика из поисковых систем и партнерских каналов
— Если у вас недостаточно компетенций в области мобильных приложений
— Если у вас ограниченный бюджет или ресурсы
![Page 18: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/18.jpg)
18
А может адаптив?
Мы решили делать отдельный поддомен.
Плюсы:— Скорость разработки
— Легче поддерживать
— Абсолютное большинство конкурентов делает именно так
— Отдельный robots.txt (и вообще SEO-особенности)
Минусы:— Потенциальные проблемы с кросс-доменными запросами
— Система редиректов (легко сломать)
![Page 19: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/19.jpg)
19
Возьмем лучшее из адаптива
Но совсем от принципов адаптивности мы
не отказались Просто еще допиливаем
![Page 20: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/20.jpg)
20
Готовые решения
Хотя, будем честными, маленьким магазинам они могут подойти…
![Page 21: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/21.jpg)
21
И все-таки почему не готовое?
Плюсы:— Скорость внедрения
— Относительная дешевизна
Минусы:— Страдает скорость загрузки страниц, либо актуальность данных
— Сложность поддержки
— Нет сложного функционала
— Низкое качество интерфейсов
![Page 22: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/22.jpg)
22
Какой нужен функционал?
MVP (Minimum Viable Product)— Определяем пользовательские сценарии
— Собираем статистику по существующим функциям
— Формируем список «фич» и определяем приоритетность
![Page 23: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/23.jpg)
23
А на практике?
Пример базового функционала для ИМ:
— Каталог (+ листинг и простейшая карточка товара)— Возможность оформления заказа (можно без корзины)
— Базовые справочные страницы
— Поиск (если товаров много)
— Геопривязка
![Page 24: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/24.jpg)
24
А что у е96?
Этапы развития мобильной версии е96:
— Каталог, простейшая карточка товара (с характеристиками),
фильтры, покупка в 1 клик, поиск, геопривязка— Корзина, отзывы о товарах, описания товаров, видео
— Справочные разделы (сервисы, производители, отзывы о магазине и др.), личный кабинет
— … Следующие итерации
![Page 25: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/25.jpg)
25
Что поддерживать?
![Page 26: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/26.jpg)
26
Смотрим статистику
Решили
поддерживать:
— Safari 5+ (iOS 5.1+) — Android Browser 2.3+ (2.2*)
— Chrome
— Opera Mobile 11+*
— Opera Mini 6+*
— IE 10+*
* По возможности, но это боль…
конец 2013 года
![Page 27: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/27.jpg)
27
К слову о платформах
![Page 28: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/28.jpg)
28
Купить мультиварку Екатеринбург
Просто знайте, что:
— Google сам поймет, что у вас и как, если вы соблюдаете их требования к мобильным версиям (легко найти в поиске)
— Яндекс интереснее: для «красивой» выдачи нужно писать Платонам (ручное добавление в некий каталог мобильных сайтов)
— Наш опыт показал, что частично открывать мобильную версию для индексации не страшно (если у вас поддомен с редиректами)
![Page 29: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/29.jpg)
29
На что обратить внимание?
Основные требования:
— Скорость загрузки страниц (<9 секунд)
— Кэширование (серверное и локальное)
— Минимум запросов
— Снижение объема трафика
— Учитывать Touch-особенности
— Размеры объектов («правило» 44 пикселей)
— Адаптированный контент
— Лишнее убирать
![Page 30: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/30.jpg)
30
Прототип – вещь!
![Page 31: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/31.jpg)
31
Тестирование
Чем можно проверять верстку и
быстродействие:
— Реальные устройства (у нас уже 7 тестовых девайсов + свои)
— Эмуляторы устройств (в средствах разработки)
— Специализированный софт (Keynote MITE, Opera Mobile Emulator)
— Внешние сервисы (PageSpeed Insights)
![Page 32: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/32.jpg)
32
PageSpeed Insights
![Page 33: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/33.jpg)
33
Первые результаты
Уже при выпуске первой версии:
— Серьезно снизили среднее время загрузки страницы (~5 сек)
— Увеличили конверсию на телефонах более чем на 40%
— 72% мобильных пользователей используют мобильную версию
Хотя есть проблемы:
— 40% заказов мобильных пользователей все еще оформляется на обычной версии
— Есть некоторые проблемы с дублирующими заказами
![Page 34: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/34.jpg)
34
Дубли -> отказы
Появилась
корзина
![Page 35: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/35.jpg)
35
Сейчас
Что хорошо:
— Среднее время загрузки страницы (~4,5 сек)
— Большинство функций доступны в мобильной версии
— 82% мобильных пользователей используют мобильную версию
Все еще есть проблемы:
— 37% заказов мобильных пользователей все еще оформляется на обычной версии
— Мелких багов все еще много
![Page 36: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/36.jpg)
36
Рекламная пауза!
![Page 37: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/37.jpg)
37
Мобильная реклама
![Page 38: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/38.jpg)
38
Дорого и неэффективно?…
CPO мобильной рекламы сопоставимо с
обычной!
Вот некоторые результаты:
— CTR = 0,4% (особо не оптимизировали)
— Конверсия близка к обычной конверсии для смартфонов
— Доля отказных заказов значительно ниже средней
![Page 39: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/39.jpg)
39
Еще немного аналитики
— Большинство заказов совершается в ту же неделю
— Действительно, часть пользователей используют мобильные устройства для уточнения информации, заказывая потом на обычном сайте
![Page 40: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/40.jpg)
40
Ложка дегтя
Не все в наших руках:
— Нужно оперативнее реагировать на мобильные заказы
— Качество мобильного интернета желает лучшего
— Другие сервисы не всегда адаптированы под мобильные устройства
![Page 41: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/41.jpg)
Мобильная версия сайта e96.ruПьеса в 2-х частях с антрактом
![Page 42: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/42.jpg)
Часть 2. История разработчика
В главной роли – Елькин Сергей
![Page 43: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/43.jpg)
43
Наш телефонный зоопарк
![Page 44: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/44.jpg)
44
Наш телефонный зоопарк
Версии ОС:
— Android 2.3 / 4.0/ 4.1 / 4.2 / 4.4— iOS 6 / 7— Windows Phone 8
![Page 45: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/45.jpg)
45
Android 2.3.6 (webkit 533.1)
![Page 46: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/46.jpg)
46
Android 2.3.6 (webkit 533.1)
— Нет HTML5 — Нет CSS3— Тормоза— Старый JS
![Page 47: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/47.jpg)
47
Windows Phone 8 (IE 9-11)
![Page 48: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/48.jpg)
48
Windows Phone 8 (IE 9-11)
— Internet Explorer— Свои events— Глюки браузера (WP)
![Page 49: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/49.jpg)
49
Проблемы?
![Page 50: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/50.jpg)
50
Проблемы?
Большинство проблем решит
MOBILE BOILERPLATE★http://html5boilerplate.com/mobile/
Но не все…
![Page 51: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/51.jpg)
51
Подсветка тача
* {outline: none;-webkit-text-size-adjust: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-focus-ring-color: rgba(0,0,0,0);
}
![Page 52: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/52.jpg)
52
Еще
В CSS :active вместо :hover
Safari:<body ontouchstart="" onmouseover="">
Перестаёт работать скорллинг в IE:
-ms-touch-action: auto !important;
И другие...
![Page 53: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/53.jpg)
53
Events
В нормальных браузерах:
el.addEventListener("touchstart", function(){}, false);el.addEventListener("touchend", function(){}, false);el.addEventListener("touchcancel", function(){}, false);el.addEventListener("touchleave", function(){}, false);el.addEventListener("touchmove", function(){}, false);
![Page 54: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/54.jpg)
54
Events
В IE:
if (window.navigator.msPointerEnabled) { el.addEventListener("MSPointerDown", function(){}, false); el.addEventListener("MSPointerMove", function(){}, false); el.addEventListener("MSPointerUp", function(){}, false);}
![Page 55: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/55.jpg)
55
Hammer.js
![Page 56: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/56.jpg)
56
Hammer.js
Hammer(el).on("tap", function(event) { });
— hold
— tap
— doubletap
— drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
— swipe, swipeup, swipedown, swipeleft, swiperight
— doubletap
— transform, transformstart, transformend
— rotate
— pinch, pinchin, pinchout
— touch
— release
— gesture
![Page 57: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/57.jpg)
57
PreventDefault
Не работает:Hammer(el).on("tap", function(event) { event.preventDefault();});
Работает, но не так:Hammer(el, {prevent_defaults: true }).on("tap", function(event){});
Костыль:$(el).on('click', function(event){ event.preventDefault(); });Hammer(el).on("tap", function(event){});
![Page 58: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/58.jpg)
58
Оптимизация
— AJAX + прелоадеры
— Кешируем почти все
— Кешируем на сервере
— Кешируем на клиенте
— Если не можем кешировать, держим в памяти
— Не строим огромный DOM
![Page 59: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/59.jpg)
59
Mozilla localForage.js
http://mozilla.github.io/localForage/
![Page 60: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/60.jpg)
60
Mozilla localForage.js
Хранилище:
— IndexedDB
— WebSQL
— localStorage
localStorage-like API:
— localforage.setItem('key', 'value', function(){});
— localforage.getItem('key', function(value) {});
— localforage.removeItem('key', function() {});
![Page 61: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/61.jpg)
61
Загрузка статики
— Не используем картинки в интерфейсе
— Минификация, минимизация CSS, JS
— Require.JS
— CDN
![Page 62: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/62.jpg)
62
Require.js
— Быстро
— Зависимости
— Удобная структура
http://requirejs.org/
![Page 63: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/63.jpg)
63
Angular.js
— Работает
— Работает быстро
— Touch events
— Повторное использование кода
— Но нужно быть аккуратнее с uglify
http://angularjs.org
![Page 64: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/64.jpg)
64
Angular.js + Require.js
Вместе?— Можно использовать — Загрузка по требованию
![Page 65: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/65.jpg)
65
Файл конфигурации
define(function (require) {'use strict';var angular = require('angular');
// Controllersangular.module('myModule.controllers',
['myModule.services']).controller('controllerName',
require('modules/myModule/controllers/controller')).controller('controllerName',
require('modules/myModule/controllers/controller'));
![Page 66: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/66.jpg)
66
Файл конфигурации
// Directivesangular.module('myModule.directives', [])
.directive('directiveName', require('modules/myModule/directives/directive'))
.directive('directiveName', require('modules/myModule/directives/directive'))
;
// Filtersangular.module('myModule.filters', [])
.filter('filterName', require('modules/myModule/filters/filter'))
.filter('filterName', require('modules/myModule/filters/filter'))
;
![Page 67: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/67.jpg)
67
Файл конфигурации
// Servicesangular.module('myModule.services', [])
.service('serviceName', require('modules/myModule/services/service'))
.service('serviceName', require('modules/myModule/services/service'))
;
angular.module('myModule', ['myModule.controllers','myModule.filters','myModule.services','myModule.directives'
]);
angular.bootstrap(document, ['myModule']);});
![Page 68: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/68.jpg)
68
Grunt.js
http://gruntjs.com/
![Page 69: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/69.jpg)
69
grunt-webfont
webfont: { icons: { src: 'icons/*.svg', dest: 'build/fonts', destCss: 'build/styles', options: { stylesheet: 'styl', relativeFontPath: '/build/fonts' } }}
![Page 70: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/70.jpg)
70
Спасибо, что пришли
![Page 71: Мобильная версия E96. Взгляд менеджера и взгляд разработчика (Версия для #oseminar)](https://reader035.vdocuments.site/reader035/viewer/2022062220/557f4d02d8b42ac3288b52ad/html5/thumbnails/71.jpg)
Как мы делаем m.e96.ru
Коньшин Александр и Елькин Сергей
http://m.e96.ru
Twitter: @SashaShnur @yamaha252
Dev team Instagram: e96_dev