РАЗРАБОТКАПРИЛОЖЕНИЙ ПОДМОБИЛЬНЫЕ БРАУЗЕРЫПавел Юрийчук,GlobalLogic
Обо мнеКраткая биография● Начинал с Flex 3 & Action Script● Продолжил с браузерными игрушками   под iPhone & iPad● Сейчас ...
Приложение для браузера?● Приложение !== Мобильная  Версия Сайта● В приложении реализована бизнес  логика, которая выполня...
Особенности мобильныхбраузеров● Хорошая поддержка HTML5 в целом, но  один и тот же API работает по разному на  разных плат...
Прототип мобильного приложения● Основа - MVC фреймворк, все зависит от  требований к приложению. Backbone - хороший  выбор...
Backbone● Backbone - хорошая документация, много  примеров, свобода выбора для  реализации● Сложно писать большие приложен...
jQuery vs Zepto.JS● Zepto - молодая, хороший код, не  стабильна, маленькая, только  современные браузеры, модульная● jQuer...
Шаблоны underscore● Цель - превращение JSON в HTML● Компилирует фуцнкцию по заданой  разметке.● Можно использовать управля...
Беды
Как (не) надо, сервер● Веб приложения имеют собственные  требования к серверной части, их  нельзя игнорировать  ○   JSON &...
XML как с ним быть● jQuery selectors  ○ Шелковый путь● SAX  ○ http://code.google.com/p/jssaxparser/  ○ https://github.com/...
Как хранить данные на клиенте● WebSQL● LocalStorage & SessionStorage● IndexDB
Сага об ускорении загрузки ч.11.   CORS2.   Переход от WebSQL -> WebStorage3.   Builder pattern4.   ViewPort
Сага об ускорении загрузки ч.21.   XML to JSON2.   Bootstrapping3.   Requests Merging4.   Embedding Assets - Base64
HTML5● CSS3 3d Transformations  ○ На iOS быстрее чем Javascript● Audio Object  ○ Два потока на iOS, загрузка с секундной  ...
HTML5● CSS Sprites - да, но есть ограничение на  iPhone 3, размер <= 1024 x 1024 x 32● Теги для семантики - да● Canvas - д...
Плюшки●   Организация LocalStorage    ○ https://github.com/jeromegn/Backbone.localStorage    ○ https://github.com/knadh/lo...
Вопросы?
Mobile Web Apps development essentials
Mobile Web Apps development essentials
Mobile Web Apps development essentials
Upcoming SlideShare
Loading in …5
×

Mobile Web Apps development essentials

408
-1

Published on

Presentation performed on UAMobile'2012 conference

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
408
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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. Вопросы?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×