Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad

Цель доклада (о чем доклад?)
Поделиться успешным опытом разработки на JavaScript+HTML+CSS+PhoneGap для iPad
Показать ряд проблемных аспектов и способов их решений
Помочь в принятии верного решения о выборе технологии на старте для мобильного проекта

Содержание доклада
Постановка задачи
Выбор способа решения
Проблемные места и способы их решения
Итоги и выводы

Постановка задачи
Нужен аналог Adobe Digital Publishing Suite
(пример: журнал Wired)
Требования
Листание пальцем (статьи по горизонтали, страницы по вертикали)
Интерактивный контент, аудио/видео
Навигация по журналу
Витрина журналов со скачиванием и локальным хранением контента
XML-формат верстки журналов

Выбор способа реализации
Flash
Есть технология Flash -> iOS
Попробовали – тормозит –> не подходит
iOS
Отсутствуют ресурсы (разработчики) -> не подходит
PhoneGap
Есть значительный опыт JavaScript(GWT)+HTML+CSS
Провели эксперимент – хорошие результаты -> БЕРЕМ В РАБОТУ

Проблемы и решения

1. Листание страниц
Плавное листание страниц (нагруженных графикой) – это самое главное
Стандартные JS/CSS способы не подходят – листание происходит рывками
РЕШЕНИЕ (CSS3, hardware-accelerated):
-webkit-transition-property: -webkit-transform;
-webkit-transform: translate3d(x,y,z) (в JavaScript: WebKitCSSMatrix)

2. Кэширование изображений
ПРОБЛЕМА:
При увеличении количества картинок в журнале приложение вылетает на iPad по памяти
РЕШЕНИЕ:
Реализуем специальную логику «обнуления»
(в одной из промежуточных версий iOS не работает)

3. Большие размеры
ПРОБЛЕМА:
При увеличении «физических» размеров DOM-дерева журнала приложение вылетает на iPad (молча)
РЕШЕНИЕ:
Переделываем логику движка листания: статическое DOM-дерево заменяем динамическим построением (при смене страниц)

4. ChildBrowser plugin
ЗАДАЧА:
Показывать HTML-страницы по ссылкам
РЕШЕНИЕ:
Используем PhoneGap-плагин ChildBrowser
ДОПОЛНИТЕЛЬНАЯ ПРОБЛЕМА (не решена):
В последних версиях iOS при открытом ChildBrowser не отслеживается изменение ориентации окна

5. Загрузка и хранение контента
ЗАДАЧА:
Требуется загружать, хранить и использовать локально данные и файлы с контентом
ПРОБЛЕМЫ:
HTML5 offline cache – отсутствует у PhoneGap-приложения
В PhoneGap отсутствуют «стандартные» средства загрузки файлов из интернета (с сохранением файлов локально)

6. Загрузка и хранение контента
РЕШЕНИЕ:
Для загрузки файлов находим PixFileDownload плагин и докручиваем его сами (чтобы заработал на новом PG)
Доступ к сохраненным файлам имеем через PhoneGap File API, а также работают ссылки из HTML
Для данных используем HTML5 LocalStorage
Реализовали свой менеджер закачек на GWT/JavaScript

7. По мелочам
Мелкие отличия в работе DOM-событий в Chrome и iPad
Успешно использованы несколько CSS3-эффектов в элементах журнала
Успешно использован сторонний компонент iScroll для организации скроллинга (в дополнение к GWT-компоненту)
Осталась нерешенная проблема с включением в страницы журнала «внешнего» HTML

Итоги и выводы

Итог разработки (326 часов)
Мы получили работающий движок, на котором можно делать журналы (и другие продукты)
Пример: http://itunes.apple.com/ru/app/wow-magazine-for-ipad/id488661058
В планах
Расширение функционала (например, InAppPurchase)
Портирование на Android

Модульная структура
Core – модуль абстрактной листалки
Engine – XML-движок
Mag – навигация по журналу
Shell – оболочка с витриной и загрузкой файлов
Модульная структура позволяет легко переиспользовать отдельные компоненты

Портирование на Andriod
Еще только предстоит
Возможные проблемы и трудности:
Плавное листание
Загрузка и хранение файлов
Разные размеры экрана

Процесс разработки
Движок
Основная разработка на Windows + Chrome
Финальная отладка на Маке в эмуляторе и iPad’e
Журнал
Верстальщик руками верстает XML
Смотрит, что получается на Маке в эмуляторе iPad

Выводы
Можно ли использовать PhoneGap-подход?
Стоит ли использовать PhoneGap-подход?
Когда стоит использовать PhoneGap-подход?
Как использовать PhoneGap-подход?