Upload
paul-yuriychuck
View
852
Download
0
Embed Size (px)
DESCRIPTION
Presentation
Citation preview
Мобильные веб приложенияАспекты разработки
О себе
• 3 года опыта в качестве html5 разработчика– Мобильные веб игрушки– Мобильные веб приложения
• 2 года занимался Flex/Flash– Игрушки– RIA
Веб приложения
• Что это такое?
• HTML5
• Как делать?
• С помощью чего делать?
Отличия от сайта
• Сайт ориентирован на представление некоей информации. Основная задача - удобный доступ к содержимому и навигация.
• Веб-приложение - приложение, выполняемое в браузере.
Еще отличия
• Веб приложение !== мобильная версия сайта
• Веб приложение !== phone gap, appcelerator (native обертки)
• Веб приложение, как правило, одностраничное, веб сайт - многостраничный
Ограничения
• Множество размеров экрана
• Скорость анимации
• Скорость javascript
• Качество картинок и шрифтов не так важно
• Медленное соединение– Чем меньше запросов, тем лучше– Чем меньше размер ресурсов, тем лучше– Чем меньше запросов на один домен, тем лучше
Роль HTML5
• HTML5 - это не только верстка
• Набор технологий позволяющие в браузере выполнять задачи без плагинов и нативного кода
• На мобильных браузерах поддержка в целом лучше чем на десктопных
Схема работы
По полочкам - сервер
• JSON
• WebSockets
• REST
• CORS
• Content-Type
• CDN
• GZip/BZip/Deflate
Клиент
По полочкам - клиент
• MV* - каркас для приложения
• Application cache - кешируем ресурсы
• Offline storage - кешируем данные
• Templating - шаблонизаторы на стороне клиента
• Interaction - протокол взаимодействия с сервером
• CSS3 - позволяет реализовать львиную долю UI эффектов
• Локализация - рано или поздно она будет нужна
По полочкам - клиент
• Анимация
• События ввода пользователя
• Медиа контент
• Шрифты
• Баннера
• Трекинговые системы
Best practices
• Builder pattern
• ViewPort
• Bootstrapping
• Requests Merging
• Data-attributes
• AMD / LMD
Builder
Каркасы приложенийSpine.JS
Как выбирать
• Предметная область
• Взаимодействие с сервером
• Пользовательский интерфейс
• Опыт предыдущей разработки
• Документация
• Поддержка сообщества
МодульностьКак работает и примеры
Шаблоны
Шаблоны - на строках
• Underscore templating
• Handlebars
• Moustache.JS
• Dust.JS
• jQuery templates
• Benchmark
• Как создать велосипед самому
• Помощник по выбору
Шаблоны на DOM-tree
• Transparency
• Pure
• Plates
• Distal
• Soma
• Почему?
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– Путь для джедаев, хорош, когда все остальные исчепаны
Отладка
• Отладка на iOS шаг за шагом
• Удаленная отладка на Chrome
• Удаленная отладка на Firefox
• Удаленная отладка Mobile Opera
• Weinre - универсальный отладчик
Тестирование
• Хороший обзор и анализ фреймворков для тестирования
• Тестирование приложений на Backbone с использованием Jasmine
• Sinon.JS
Эмуляторы
Android
• Способы ускорения эмулятора Android
• Установка Android на VirtualBox
• Детальнее расписано
Утилиты
Сборщики
Библиотеки
• Каталоги библиотек– Micro.JS– Jster– Backbone plugins
• Move.JS
• Zepto.JS
• LoDash
• Backbone marionette
Книженции
Книженции
• Patterns for Large-Scale JS apps
• Backbone fundamentals
• Backbone patterns
Рассылки
• Responsive web design weekly
• HTML5 Weekly
• JavaScript weekly
• NoSQL weekly
Презентации
• Оптимизация загрузки
• Кросс-платформенность и кросс-браузерность
• Оптимизация энергопотребления
• Общие рекомендации по разработке кода
Обзорные ресурсы• http://html5doctor.com/ • Хорошая обзорная книга по HTML5• Возможности HTML5• http://alistapart.com/• https://developer.mozilla.org/en-US/docs/Jav
aScript• https://developer.apple.com/devcenter/safari/
index.action
Вопросы ?