Mobile Web Apps development essentials
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile Web Apps development essentials

  • 545 views
Uploaded on

Presentation performed on UAMobile'2012 conference

Presentation performed on UAMobile'2012 conference

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
545
On Slideshare
544
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 1

https://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. РАЗРАБОТКАПРИЛОЖЕНИЙ ПОДМОБИЛЬНЫЕ БРАУЗЕРЫПавел Юрийчук,GlobalLogic
  • 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. Прототип мобильного приложения● Основа - MVC фреймворк, все зависит от требований к приложению. Backbone - хороший выбор но не единственный● Библиотека для DOM, AJAX, etc - jQuery, можно Zepto.JS, если подойдет● Библиотека для шаблонизации - Underscore.JS, Mustache.JS, больше нв http://microjs.com● Плагины и/или библиотеки для работы с WebStorage / WebSQL / IndexDB● Модульность - Require.JS
  • 6. Backbone● Backbone - хорошая документация, много примеров, свобода выбора для реализации● Сложно писать большие приложения● Адаптация под не REST сервера не тривиальна● Мало идет "с коробки"● Альтеранатив много: Knockout.JS, Angular.JS, Ember.JS
  • 7. jQuery vs Zepto.JS● Zepto - молодая, хороший код, не стабильна, маленькая, только современные браузеры, модульная● jQuery - модульная, стабильная, возможно уменьшение размера за счет собственных сборок
  • 8. Шаблоны underscore● Цель - превращение JSON в HTML● Компилирует фуцнкцию по заданой разметке.● Можно использовать управляющие структуры - циклы, условия● Невозможны вложенные шаблоны● Как хранить шаблоны - додумываем сами
  • 9. Беды
  • 10. Как (не) надо, сервер● Веб приложения имеют собственные требования к серверной части, их нельзя игнорировать ○ JSON & JSON-P ○ REST ○ CORS - cross-origin-resource-sharing ○ Valid Content-Type ○ CDN - content delivery network● API ○ XMLHttpRequest ○ iFrame● Баннеры и трекинговые системы
  • 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. Как хранить данные на клиенте● WebSQL● LocalStorage & SessionStorage● IndexDB
  • 13. Сага об ускорении загрузки ч.11. CORS2. Переход от WebSQL -> WebStorage3. Builder pattern4. ViewPort
  • 14. Сага об ускорении загрузки ч.21. XML to JSON2. Bootstrapping3. Requests Merging4. Embedding Assets - Base64
  • 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. 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. Плюшки● Организация 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. Вопросы?