• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Web Apps development essentials
 

Mobile Web Apps development essentials

on

  • 445 views

Presentation performed on UAMobile'2012 conference

Presentation performed on UAMobile'2012 conference

Statistics

Views

Total Views
445
Views on SlideShare
445
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Web Apps development essentials Mobile Web Apps development essentials Presentation Transcript

    • РАЗРАБОТКАПРИЛОЖЕНИЙ ПОДМОБИЛЬНЫЕ БРАУЗЕРЫПавел Юрийчук,GlobalLogic
    • Обо мнеКраткая биография● Начинал с Flex 3 & Action Script● Продолжил с браузерными игрушками под iPhone & iPad● Сейчас делаю приложения для браузеров под смартфоныКак найти{ Skype : "pavlo.yuriychuck", Email : "pluccky@gmail.com", 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 ○ Путь для джедаев, хорош, когда все остальные исчепаны
    • Как хранить данные на клиенте● 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, загрузка с секундной задержкой, решение аудиоспрайты - 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/
    • Вопросы?