Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Web Apps development essentials

593 views

Published on

Presentation performed on UAMobile'2012 conference

  • Be the first to comment

  • Be the first to like this

Mobile Web Apps development essentials

  1. 1. РАЗРАБОТКАПРИЛОЖЕНИЙ ПОДМОБИЛЬНЫЕ БРАУЗЕРЫПавел Юрийчук,GlobalLogic
  2. 2. Обо мнеКраткая биография● Начинал с Flex 3 & Action Script● Продолжил с браузерными игрушками под iPhone & iPad● Сейчас делаю приложения для браузеров под смартфоныКак найти{ Skype : "pavlo.yuriychuck", Email : "pluccky@gmail.com", Twitter : "@pavlo_yuriychuk" }
  3. 3. Приложение для браузера?● Приложение !== Мобильная Версия Сайта● В приложении реализована бизнес логика, которая выполняется как на клиентской, так и на серверной части● Представление формируется на клиенте● Выполняется в браузене, не нужно устанавливать
  4. 4. Особенности мобильныхбраузеров● Хорошая поддержка HTML5 в целом, но один и тот же API работает по разному на разных платформах● Медленный JavaScript● Фиксированный размер окна браузера● Touch-events● Качество шрифтов не так заметно как на десктопе● Запросы не кешируются, если об этом не указать с помощью cache manifest● Графическое ускорение CSS3 - не всегда
  5. 5. Прототип мобильного приложения● Основа - MVC фреймворк, все зависит от требований к приложению. Backbone - хороший выбор но не единственный● Библиотека для DOM, AJAX, etc - jQuery, можно Zepto.JS, если подойдет● Библиотека для шаблонизации - Underscore.JS, Mustache.JS, больше нв http://microjs.com● Плагины и/или библиотеки для работы с WebStorage / WebSQL / IndexDB● Модульность - Require.JS
  6. 6. Backbone● Backbone - хорошая документация, много примеров, свобода выбора для реализации● Сложно писать большие приложения● Адаптация под не REST сервера не тривиальна● Мало идет "с коробки"● Альтеранатив много: Knockout.JS, Angular.JS, Ember.JS
  7. 7. jQuery vs Zepto.JS● Zepto - молодая, хороший код, не стабильна, маленькая, только современные браузеры, модульная● jQuery - модульная, стабильная, возможно уменьшение размера за счет собственных сборок
  8. 8. Шаблоны underscore● Цель - превращение JSON в HTML● Компилирует фуцнкцию по заданой разметке.● Можно использовать управляющие структуры - циклы, условия● Невозможны вложенные шаблоны● Как хранить шаблоны - додумываем сами
  9. 9. Беды
  10. 10. Как (не) надо, сервер● Веб приложения имеют собственные требования к серверной части, их нельзя игнорировать ○ JSON & JSON-P ○ REST ○ CORS - cross-origin-resource-sharing ○ Valid Content-Type ○ CDN - content delivery network● API ○ XMLHttpRequest ○ iFrame● Баннеры и трекинговые системы
  11. 11. 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 ○ Путь для джедаев, хорош, когда все остальные исчепаны
  12. 12. Как хранить данные на клиенте● WebSQL● LocalStorage & SessionStorage● IndexDB
  13. 13. Сага об ускорении загрузки ч.11. CORS2. Переход от WebSQL -> WebStorage3. Builder pattern4. ViewPort
  14. 14. Сага об ускорении загрузки ч.21. XML to JSON2. Bootstrapping3. Requests Merging4. Embedding Assets - Base64
  15. 15. 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
  16. 16. 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
  17. 17. Плюшки● Организация 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/
  18. 18. Вопросы?

×