Павел Юрийчук - Разработка приложений под мобильные браузеры

692 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
692
On SlideShare
0
From Embeds
0
Number of Embeds
106
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Павел Юрийчук - Разработка приложений под мобильные браузеры

  1. 1. РАЗРАБОТКАПРИЛОЖЕНИЙ ПОДМОБИЛЬНЫЕ БРАУЗЕРЫПавел Юрийчук, Ciklum
  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. Как (не) надо, сервер● Веб приложения имеют собственные требования к серверной части, их нельзя игнорировать ○ JSON & JSON-P ○ REST ○ CORS - cross-origin-resource-sharing ○ Valid Content-Type ○ CDN - content delivery network● API ○ XMLHttpRequest ○ iFrame● Баннеры и трекинговые системы
  6. 6. Почему ?● На организацию работы с унаследованым back-end уходит большая часть Front-end работы● Необходимо разбираться с Back-end кодом и особенностями его работы● Отвлекает от насущных проблем● Стабильность работы● Код полон заплаток которые не сработают во время рефакоринга серверной части
  7. 7. Подготовка● Автоматизированные сборки, пусть даже в самом зачаточном виде● Дизайнеры, художники и взаимодействие с ними● Тестовый сервер● Coding guidelines● Исследование фреймворков и библиотек: ○ Код ○ Документация ○ Поддержка ○ Цена
  8. 8. Потом● Code-review - без комментариев● Unit-testing - когда стабилизируется архитектура● Регулярные теги для билдов● Рефакторинг - планируйте и назначайте цели
  9. 9. Прототип мобильного приложения● Основа - MVC фреймворк, все зависит от требований к приложению. Backbone - хороший выбор но не единственный● Библиотека для DOM, AJAX, etc - jQuery, можно Zepto.JS, если подойдет● Библиотека для шаблонизации - Underscore.JS, Mustache.JS, больше нв http://microjs.com● Плагины и/или библиотеки для работы с WebStorage / WebSQL / IndexDB● Модульность - Require.JS
  10. 10. Backbone● Backbone - хорошая документация, много примеров, свобода выбора для реализации● Сложно писать большие приложения● Адаптация под не REST сервера не тривиальна● Мало идет "с коробки"● Альтеранатив много: Knockout.JS, Angular.JS, Ember.JS
  11. 11. jQuery vs Zepto.JS● Zepto - молодая, хороший код, не стабильна, маленькая, только современные браузеры, модульная● jQuery - модульная, стабильная, уменьшение размера за счет собственных сборок
  12. 12. Zepto.JS● Совместима с jQuery только на повехностном уровне● Не все анимации работают правильно● Events: on/off● $ не работает для XMLDocument● $ не все селекторы, querySelector, querySelectorAll● Хороша для старта (размер!)
  13. 13. 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 ○ Путь для джедаев, хорош, когда все остальные исчепаны
  14. 14. Как хранить данные на клиенте● WebSQL ○ медленная ○ не стабильна ○ почти на всех браузерах● LocalStorage & SessionStorage ○ Key-Value ○ Быстрая, до 10мс на выборку или запись ○ Везде работает ○ Нету в Private Mode● IndexDB ○ NoSQL ○ API богаче чем WebSQL & WebStorage ○ не везде есть
  15. 15. Шаблоны underscore● Цель - превращение JSON в HTML● Компилирует фуцнкцию по заданой разметке.● Можно использовать управляющие структуры - циклы, условия● Невозможны вложенные шаблоны● Как хранить шаблоны - додумываем сами
  16. 16. Сага об ускорении загрузки ч.11. CORS - Accept Access Allow Origin2. Переход от WebSQL -> WebStorage - надежнее и быстрее3. Builder & Placeholders & Inheritance - унификация кода DRY4. ViewPort & inview - хорошо действует для активных елементов а-ля виджеты
  17. 17. Сага об ускорении загрузки ч.21. XML to JSON - да да и еще раз да2. Bootstrapping - чем меньше запросов тем лучше3. Requests Merging - несколько запросов можно объединить в один4. Embedding Assets - Base64
  18. 18. 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
  19. 19. 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
  20. 20. Плюшки● Организация 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/
  21. 21. Вопросы?

×