1. Разработка мобильных
приложений на HTML5
Алексей Устинов

2. О себе
Алексей Устинов
разработчик компании "Enterra"
3 года разработки веб-приложений
1.5 года разработки PhoneGap-версии мобильного
покерного клиента на HTML5

3. Зачем разрабатывать приложения на
HTML?

4. Преимущества разработки
приложений на HTML5
● Кроссплатформенность (мобильные платформы,
браузеры, Windows 8, etc)
● Одна кодовая база
● Популярность стека технологий HTML, JavaScript, CSS
(армия "jQuery-программистов")

5. Возможности современных web-
приложений
● Canvas ● Touch-события
● Web Workers ● Viewport
● WebSocket ● Media queries
● WebRTC ● Geolocation API
● Video
● Web Storage
● WebGL
● Шаблонизация в браузере

6. Viewport
<meta name="viewport" content="user-scalable=no, width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1, target-
densityDpi=device-dpi"
/>

7. CSS Media Queries
@media only screen and (min-height: 641px) and (min-width: 961px) {
/*стили*/
}
@media screen and (min-aspect-ratio: 3/4) {
/*стили*/
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
/*стили*/
}

8. CSS Media Queries

9. Фреймворки?

10. jQuery Mobile
● Адаптивные мобильные компоненты
● Декларативное описание
● Поддержка тач-событий
● Поддержка страниц
● Темы

11. jQuery Mobile
<form>
<label for="slider-1">Slider:</label>
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50"
>
</form>

12. Sencha Touch
● Адаптивные мобильные компоненты
● Императивный подход к созданию компонентов
● Анимация
● Native Packaging

13. Sencha Touch
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'sliderfield',
label: 'Percentage',
value: 50,
minValue: 0,
maxValue: 100
}
]
});

14. Приложение в браузере?

15. Нативные приложения
● Objective C/Java/C#/JavaScript
● Лучшая производительность и наиболее полные
возможности платформы
● На каждой платформе свои технологии
● Необходимость держать команды разработчиков для
каждой платформы

16. Adobe AIR
● ActionScript 3
● Возможность вызова нативного кода
● Аппаратное ускорение Stage3D (Starling, Feathers UI)
● Платформы: iOS, Android, BlackBerry, Windows

17. Mono
● C#
● Нативный UI
● Платформы: iOS, Android, Windows, Linux, Mac OS,
Wii, XBox 360

18. Веб-приложения
● JavaScript/HTML/CSS3
● Запуск в браузере
● Нет доступа к функциям устройств

19. Компилируемые веб-приложения
● JavaScript/HTML/CSS3
● Платформоно-независимый API для работы с
функциями устройств
● PhoneGap
○ iOS, Android, Blackberry, Windows Phone 7,8,
Tizen, WebOS, Bada, Symbian
● Appcelerator Titanium
○ iOS, Android, BlackBerry, Windows

20. PhoneGap
Фреймворк для создания мобильных приложений с
использованием стека JavaScript, HTML, CSS.
Основан на Apache Cordova. Разработан компанией
Nitobi. Куплен Adobe Systems.
Облачный сервис PhoneGap Build.

21. Поддерживаемые платформы
● iOS ● Tizen
● Android ● WebOS
● Blackberry ● Bada
● Windows Phone 7,8 ● Symbian

22. PhoneGap API
● Accelerometer ● Globalization
● Camera ● InAppBrowser
● Capture ● Media
● Compass ● Notification
● Connection ● Splashscreen
● Contacts ● Storage
● Device ● File
● Events ● Geolocation

24. PhoneGap: Структура проекта

25. PhoneGap: Инициализация
приложения

26. PhoneGap: Инициализация
JavaScript-приложения

27. PhoneGap: Пример работы с API

28. PhoneGap: плагины
Позволяют реализовать не поддерживаемые HTML5
возможности на конкретной платформе.
В основном репозитории PhoneGap около 200 плагинов.

29. Проблемы при разработке
мобильных HTML5-приложений

30. Производительность
● Однопоточность
● Скорость исполнения JavaScript
● Рендеринг DOM
● Загрузка графики

31. Зоопарк платформ
● Доминирует WebKit
● Windows Phone = IE
● Разные размеры экранов
○ телефоны
○ планшеты
● Разные требования к UI
● Различные используемые кодеки
● Баги

32. Проблемы, связанные с особенностями
поведения веб-приложений в браузере
● Выделение текста
● Возможность сохранения графики
● Zoom
● Нет чувства контроля над приложением

33. Решение проблем, связанных с
особенностями поведения веб-приложений
в браузере

34. Чужеродность UI
● Приложение - всего лишь HTML-страница
● Проблемы при публикации в store
● Sencha Touch, jQuery Mobile лишь внешне похожи
● Appcelerator Titanium

35. Слабая поддержка
мобильными браузерами
новых стандартов
● Нет поддержки или поддерживается не всеми
устройствами:
○ WebSocket
○ Web Worker
○ WebGL
● Неудовлетворительная поддержка тэга video в
WebView на Android
● Медленное внедрение новых возможностей
● Решается с помощью PhoneGap-плагинов

36. Когда стоит использовать?
● Когда необходимо иметь кросплатформенную
версию, охватывающая наибольшее количество
платформ
● Когда нет жестких требований к UI и
производительности
● Когда нет разработчиков под нативные платформы

37. Ссылки
http://phonegap.com/
https://github.com/phonegap/phonegap-plugins
http://caniuse.com/
http://mobilehtml5.org/
http://www.sencha.com/products/touch
http://jquerymobile.com/

38. Вопросы?
Разработка мобильных приложений на HTML5
Алексей Устинов