Presentation performed on UAMobile'2012 conference

1. РАЗРАБОТКА
ПРИЛОЖЕНИЙ ПОД
МОБИЛЬНЫЕ БРАУЗЕРЫ
Павел Юрийчук,
GlobalLogic

2. Обо мне
Краткая биография
● Начинал с Flex 3 & Action Script
● Продолжил с браузерными игрушками
под iPhone & iPad
● Сейчас делаю приложения для браузеров
под смартфоны
Как найти
{ Skype : "pavlo.yuriychuck",
Email : "pluccky@gmail.com",
Twitter : "@pavlo_yuriychuk" }

5. Приложение для браузера?
● Приложение !== Мобильная
Версия Сайта
● В приложении реализована бизнес
логика, которая выполняется как на
клиентской, так и на серверной части
● Представление формируется на клиенте
● Выполняется в браузене, не нужно
устанавливать

6. Особенности мобильных
браузеров
● Хорошая поддержка HTML5 в целом, но
один и тот же API работает по разному на
разных платформах
● Медленный JavaScript
● Фиксированный размер окна браузера
● Touch-events
● Качество шрифтов не так заметно как на
десктопе
● Запросы не кешируются, если об этом не
указать с помощью cache manifest
● Графическое ускорение CSS3 - не всегда

8. Прототип мобильного приложения
● Основа - MVC фреймворк, все зависит от
требований к приложению. Backbone - хороший
выбор но не единственный
● Библиотека для DOM, AJAX, etc - jQuery, можно
Zepto.JS, если подойдет
● Библиотека для шаблонизации - Underscore.JS,
Mustache.JS, больше нв http://microjs.com
● Плагины и/или библиотеки для работы с WebStorage
/ WebSQL / IndexDB
● Модульность - Require.JS

9. Backbone
● Backbone - хорошая документация, много
примеров, свобода выбора для
реализации
● Сложно писать большие приложения
● Адаптация под не REST сервера не
тривиальна
● Мало идет "с коробки"
● Альтеранатив много: Knockout.JS,
Angular.JS, Ember.JS

10. jQuery vs Zepto.JS
● Zepto - молодая, хороший код, не
стабильна, маленькая, только
современные браузеры, модульная
● jQuery - модульная, стабильная,
возможно уменьшение размера за счет
собственных сборок

11. Шаблоны underscore
● Цель - превращение JSON в HTML
● Компилирует фуцнкцию по заданой
разметке.
● Можно использовать управляющие
структуры - циклы, условия
● Невозможны вложенные шаблоны
● Как хранить шаблоны - додумываем сами

12. Беды

13. Как (не) надо, сервер
● Веб приложения имеют собственные
требования к серверной части, их
нельзя игнорировать
○ JSON & JSON-P
○ REST
○ CORS - cross-origin-resource-sharing
○ Valid Content-Type
○ CDN - content delivery network
● API
○ XMLHttpRequest
○ iFrame
● Баннеры и трекинговые системы

14. XML как с ним быть
● jQuery selectors
○ Шелковый путь
● SAX
○ http://code.google.com/p/jssaxparser/
○ https://github.com/isaacs/sax-js
● XPath
○ http://www.nczonline.net/blog/2009/03/17/xpath-in-
javascript-part-1/ - в 10 раз быстрее на iOS, на
Android - нету совсем.
● DOM API
○ Путь для джедаев, хорош, когда все остальные
исчепаны

15. Как хранить данные на клиенте
● WebSQL
● LocalStorage & SessionStorage
● IndexDB

16. Сага об ускорении загрузки ч.1
1. CORS
2. Переход от WebSQL -> WebStorage
3. Builder pattern
4. ViewPort

17. Сага об ускорении загрузки ч.2
1. XML to JSON
2. Bootstrapping
3. Requests Merging
4. Embedding Assets - Base64

18. HTML5
● CSS3 3d Transformations
○ На iOS быстрее чем Javascript
● Audio Object
○ Два потока на iOS, загрузка с секундной
задержкой, решение аудиоспрайты - http:
//remysharp.com/2010/12/23/audio-sprites/
● Video Object
○ На iOS & Android работают совершенно по
разному
● WebStorage
● Шрифты - shadow, outline, blur

19. HTML5
● CSS Sprites - да, но есть ограничение на
iPhone 3, размер <= 1024 x 1024 x 32
● Теги для семантики - да
● Canvas - да, для небольших размеров,
быстрее на Android
● Ресурсы:
○ http://html5doctor.com/
○ http://diveinto.html5doctor.com/
○ https://developer.mozilla.org/en-US/docs/JavaScript
○ https://developer.apple.com/devcenter/safari/index.
action

20. Плюшки
● Организация LocalStorage
○ https://github.com/jeromegn/Backbone.localStorage
○ https://github.com/knadh/localStorageDB
○ http://www.taffydb.com/
● Локализация http://momentjs.com/
● Автоматизация билдов
○ Grunt.JS
○ Require.JS - R.js
○ ANT
● Игры http://www.limejs.com/

21. Вопросы?