Разработка мобильных приложений на HTML5

Разработка мобильных
приложений на HTML5

Алексей Устинов

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

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

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

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

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

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) {
/*стили*/
}

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

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>

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

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

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

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

● На каждой платформе свои технологии
● Необходимость держать команды разработчиков для
каждой платформы

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

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

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

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

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

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

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

Разработка мобильных приложений на HTML5

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

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

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

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

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

В основном репозитории PhoneGap около 200 плагинов.

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

Производительность

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

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

Проблемы, связанные с особенностями
поведения веб-приложений в браузере

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

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

Чужеродность UI

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

● Appcelerator Titanium

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

Когда стоит использовать?

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

Ссылки
http://phonegap.com/
https://github.com/phonegap/phonegap-plugins

http://caniuse.com/
http://mobilehtml5.org/

http://www.sencha.com/products/touch
http://jquerymobile.com/

Вопросы?

Разработка мобильных приложений на HTML5

Разработка мобильных приложений на HTML5

Related slideshows

More Related Content

Разработка мобильных приложений на HTML5