Александр Пинчук
Mobile front-end разработчик c 2009 года
Front-end разработчик с 2003 года
С 2013 года работаю в
1
Slides.com/sashapinchuk
С чего все начиналось?
1997 - WAP Forum (Ericsson, Nokia и Unwired Planet)
1999 - WAP 1.1
Предполагал использование WML, основанного на "карточках", по которым переходил пользователь
2002 - WAP 2.0
На замену WML приходить xHTML Mobile Profile
2001 - WebKit
Инженеры Apple создали собственную ветку проекта KHTML и KJS
10
Мобильный браузер
Мобильный браузер — веб-браузер, предназначенный для использования на мобильных устройствах.
11
Мобильные браузеры оптимизированы так, чтобы показывать страницу наиболее эффективно для маленьких экранов портативных устройств.
Мобильная версия
100
Мобильная версия
101
Мобильная версия
110
Мобильные пользователи
111
1000
- Экономьте трафик
- Экономьте время
Цели мобильной версии
Экономия трафика
- Сжатие (gzip, deflate, SVG иконки, webp картинки)
- Кеширование (fingerprint, ajax)
- Системные шрифты
- Картинки по размеру
1001
Делайте все аккуратно, ничего лишнего:
Экономия времени
- Оптимизируйте время старта
- Меньше запросов
- Фокусируйте пользователя
- Поддерживайте возможности телефона
1010
- Предупреждайте об отсутствия сети
- Сохраняйте промежуточный ввод данных
Боритесь с несправедливостью:
Мобильные браузеры
1011
Все супер!
Особенности разработки мобильной версии
- Мобильный интернет (быстрый и нестабильный)
1100
- Мобильные OS (песочницы, активности)
- Мобильные браузеры (могут не обновляться)
- Мультитач
- Мобильные экраны (разные размеры)
- Баги (фичи)
Мобильные OS
Android
iOS
Window Phone
1101
Активности, фрагменты. Жизненный цикл приложения в Android жестко контролируется системой.
Песочницы. Долго исправление багов. Ограниченная память.
Не умеет работать с файлами. Cookies отключены.
Мобильные OS: Android
1111
Жизненный цикл браузера
Мобильные OS: Android
10000
- Android 3- не работает setTimeout, setInterval
Разные браузеры используют разные движки
Фичи:
Мобильные OS: iOS
10001
В iOS 8.0 было сломано:
- загрузка файлов (input.files - undefined)
- скролл после zoom
- window.close
- select multiple
В iOS заморозка браузера:
- input[type=file] + alert === 'freeze'
- заполнение большой формы === 'freeze'
В iOS есть ограничение при работе с файлами или canvas после 1 мегапикселя (решение)
iOS - это Internet Explorer, Safari - это не Webkit
Мобильные браузеры: без обновлений
В Android 4.3+ браузер по умолчанию должен быть Chrome.
В реальности все гораздо хуже. Есть куча устройств со своими "Chrome".
И они не обновляются.
10010
Мобильные браузеры
- Разные режимы (браузер, standalone, webview)
10011
- Однопоточность (не все рисуют асинхронно)
- B/F cache (включен с 2002 года в Webkit, решение - Visibility API)
- Транскодер
Мобильные экраны
- Meta viewport
<meta name="viewport" content="width=device-width,
initial-scale=1,
minimum-scale=1,
maximum-scale=1,
user-scalable=no">- Разная плотность пикселей на 1 css пиксель (Четко и резко)
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">10100
- Навигационные панели
Мобильные экраны: положение устройства
Порядок orientationchange/resize событий
10101
Баго-фичи
Всегда смотрите перед реализацией:
- Баг-трекеры
- Исходный код браузера
- Caniuse.com (раздел known issues)
10110
Возможности
10111
Как проверять?
- Удаленный debug режим (Chrome, Firefox, iOS, Android Browser, OperaMini console)
11000
- Удаленная консоль (jsconcole.com)
- Livereload (статья)
- Встроенный Debug ( javascript протокол )
- Weinre (статья)
Чего ожидать?
- HTTP 2.0 (ресурсы вместе со страницей)
- Новые источники взаимодействия (привет pointer events)
11001
Как быть?
11010
Mobile Front-end Developing
By Sasha Pinchuk
Mobile Front-end Developing
Что такое мобильная разработка? Особенности и проблемы.
