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

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

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

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

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

Спасибо! ВОПРОСЫ ? Олег Неклюдов