Разработка мобильных приложений на 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

Recommended

More Related Content

What's hot (20)

Viewers also liked (18)

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

More from DevDay (20)

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