Upload
devday
View
5.560
Download
9
Embed Size (px)
DESCRIPTION
Citation preview
Разработка мобильных приложений на 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Алексей Устинов