Документ представляет собой руководство по разработке мобильных приложений для браузеров, описывающее ключевые аспекты и технологии, необходимые для создания эффективных веб-приложений. Автор делится опытом, включая выбор фреймворков и библиотек, требования к серверной части и методы оптимизации загрузки. Обсуждаются как преимущества, так и сложности, с которыми сталкиваются разработчики, а также ресурсы для дальнейшего изучения.

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

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

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

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

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

6. Почему ?
● На организацию работы с унаследованым
back-end уходит большая часть Front-end
работы
● Необходимо разбираться с Back-end
кодом и особенностями его работы
● Отвлекает от насущных проблем
● Стабильность работы
● Код полон заплаток которые не
сработают во время рефакоринга
серверной части

7. Подготовка
● Автоматизированные сборки, пусть даже
в самом зачаточном виде
● Дизайнеры, художники и взаимодействие
с ними
● Тестовый сервер
● Coding guidelines
● Исследование фреймворков и библиотек:
○ Код
○ Документация
○ Поддержка
○ Цена

8. Потом
● Code-review - без комментариев
● Unit-testing - когда стабилизируется
архитектура
● Регулярные теги для билдов
● Рефакторинг - планируйте и назначайте
цели

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

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

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

12. Zepto.JS
● Совместима с jQuery только на
повехностном уровне
● Не все анимации работают правильно
● Events: on/off
● $ не работает для XMLDocument
● $ не все селекторы, querySelector,
querySelectorAll
● Хороша для старта (размер!)

13. 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
○ Путь для джедаев, хорош, когда все остальные
исчепаны

14. Как хранить данные на клиенте
● WebSQL
○ медленная
○ не стабильна
○ почти на всех браузерах
● LocalStorage & SessionStorage
○ Key-Value
○ Быстрая, до 10мс на выборку или запись
○ Везде работает
○ Нету в Private Mode
● IndexDB
○ NoSQL
○ API богаче чем WebSQL & WebStorage
○ не везде есть

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

16. Сага об ускорении загрузки ч.1
1. CORS - Accept Access Allow Origin
2. Переход от WebSQL -> WebStorage -
надежнее и быстрее
3. Builder & Placeholders & Inheritance -
унификация кода DRY
4. ViewPort & inview - хорошо действует для
активных елементов а-ля виджеты

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. Вопросы?