Download - Mobile Web Apps development essentials
Обо мне
Краткая биография● Начинал с Flex 3 & Action Script● Продолжил с браузерными игрушками
под iPhone & iPad● Сейчас делаю приложения для браузеров
под смартфоныКак найти{ Skype : "pavlo.yuriychuck", Email : "[email protected]", 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○ Путь для джедаев, хорош, когда все остальные
исчепаны
Сага об ускорении загрузки ч.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/