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

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

  • Upload
    devday

  • View
    5.560

  • Download
    9

Embed Size (px)

DESCRIPTION

 

Citation preview

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

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

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

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

О себе

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

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

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

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

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

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

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

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

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

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

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

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

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

Viewport

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

/>

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

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

}

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

CSS Media Queries

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

Фреймворки?

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

jQuery Mobile

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

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

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>

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

Sencha Touch

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

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

Sencha TouchExt.create('Ext.form.Panel', {

fullscreen: true,

items: [

{

xtype: 'sliderfield',

label: 'Percentage',

value: 50,

minValue: 0,

maxValue: 100

}

]

});

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

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

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

Нативные приложения

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

возможности платформы

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

каждой платформы

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

Adobe AIR

● ActionScript 3

● Возможность вызова нативного кода

● Аппаратное ускорение Stage3D (Starling, Feathers UI)

● Платформы: iOS, Android, BlackBerry, Windows

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

Mono

● C#

● Нативный UI

● Платформы: iOS, Android, Windows, Linux, Mac OS, Wii, XBox 360

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

Веб-приложения

● JavaScript/HTML/CSS3

● Запуск в браузере

● Нет доступа к функциям устройств

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

Компилируемые веб-приложения

● JavaScript/HTML/CSS3

● Платформоно-независимый API для работы с функциями устройств

● PhoneGap○ iOS, Android, Blackberry, Windows Phone 7,8,

Tizen, WebOS, Bada, Symbian

● Appcelerator Titanium○ iOS, Android, BlackBerry, Windows

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

PhoneGap

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

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

Поддерживаемые платформы

● iOS● Android● Blackberry● Windows Phone 7,8

● Tizen● WebOS● Bada● Symbian

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

PhoneGap API

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

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

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

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

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

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

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

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

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

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

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

PhoneGap: плагины

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

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

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

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

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

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

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

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

Зоопарк платформ

● Доминирует WebKit● Windows Phone = IE● Разные размеры экранов

○ телефоны○ планшеты

● Разные требования к UI● Различные используемые кодеки● Баги

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

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

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

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

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

в браузере

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

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

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

● Appcelerator Titanium

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

Слабая поддержка мобильными браузерами

новых стандартов● Нет поддержки или поддерживается не всеми

устройствами:○ WebSocket○ Web Worker○ WebGL

● Неудовлетворительная поддержка тэга video в WebView на Android

● Медленное внедрение новых возможностей● Решается с помощью PhoneGap-плагинов

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

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

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

● Когда нет жестких требований к UI и производительности

● Когда нет разработчиков под нативные платформы

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

Вопросы?

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