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

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

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

О себе

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

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

Преимущества разработки приложений на HTML5

● Кроссплатформенность (мобильные платформы, браузеры, Windows 8, etc)

● Одна кодовая база● Популярность стека технологий HTML, JavaScript, CSS

(армия "jQuery-программистов")

Возможности современных web-приложений

● Canvas● Web Workers● WebSocket● WebRTC● Video● Web Storage● WebGL● Шаблонизация в браузере

● Touch-события● Viewport● Media queries● Geolocation API

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

}

CSS Media Queries

Фреймворки?

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 TouchExt.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● Android● Blackberry● Windows Phone 7,8

● Tizen● WebOS● Bada● Symbian

PhoneGap API

● Accelerometer● Camera● Capture● Compass● Connection● Contacts● Device● Events

● Globalization● InAppBrowser● Media● Notification● Splashscreen● Storage● File● Geolocation

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/touchhttp://jquerymobile.com/

Вопросы?

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