РАЗРАБОТКА ПРИЛОЖЕНИЙ ПОД МОБИЛЬНЫЕ БРАУЗЕРЫ

Павел Юрийчук, GlobalLogic

Обо мне

Краткая биография● Начинал с Flex 3 & Action Script● Продолжил с браузерными игрушками

под iPhone & iPad● Сейчас делаю приложения для браузеров

под смартфоныКак найти{ Skype : "pavlo.yuriychuck", Email : "pluccky@gmail.com", Twitter : "@pavlo_yuriychuk" }

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

● Приложение !== Мобильная Версия Сайта

● В приложении реализована бизнес логика, которая выполняется как на клиентской, так и на серверной части

● Представление формируется на клиенте● Выполняется в браузене, не нужно

устанавливать

Особенности мобильных браузеров

● Хорошая поддержка HTML5 в целом, но один и тот же API работает по разному на разных платформах

● Медленный JavaScript● Фиксированный размер окна браузера● Touch-events● Качество шрифтов не так заметно как на

десктопе● Запросы не кешируются, если об этом не

указать с помощью cache manifest● Графическое ускорение CSS3 - не всегда

Прототип мобильного приложения

● Основа - MVC фреймворк, все зависит от требований к приложению. Backbone - хороший выбор но не единственный

● Библиотека для DOM, AJAX, etc - jQuery, можно Zepto.JS, если подойдет

● Библиотека для шаблонизации - Underscore.JS, Mustache.JS, больше нв http://microjs.com

● Плагины и/или библиотеки для работы с WebStorage / WebSQL / IndexDB

● Модульность - Require.JS

Backbone

● Backbone - хорошая документация, много примеров, свобода выбора для реализации

● Сложно писать большие приложения● Адаптация под не REST сервера не

тривиальна● Мало идет "с коробки"● Альтеранатив много: Knockout.JS,

Angular.JS, Ember.JS

jQuery vs Zepto.JS

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

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

Шаблоны underscore

● Цель - превращение JSON в HTML● Компилирует фуцнкцию по заданой

разметке.● Можно использовать управляющие

структуры - циклы, условия● Невозможны вложенные шаблоны● Как хранить шаблоны - додумываем сами

Беды

Как (не) надо, сервер

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

● API○ XMLHttpRequest○ iFrame

● Баннеры и трекинговые системы

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

исчепаны

Как хранить данные на клиенте

● WebSQL● LocalStorage & SessionStorage● IndexDB

Сага об ускорении загрузки ч.1

1. CORS2. Переход от WebSQL -> WebStorage3. Builder pattern4. ViewPort

Сага об ускорении загрузки ч.2

1. XML to JSON2. Bootstrapping3. Requests Merging4. Embedding Assets - Base64

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

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

Плюшки

● Организация 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/

Вопросы?