37
Мобильные веб приложения Аспекты разработки

Mobile web apps

Embed Size (px)

DESCRIPTION

Presentation

Citation preview

Page 1: Mobile web apps

Мобильные веб приложенияАспекты разработки

Page 2: Mobile web apps

О себе

• 3 года опыта в качестве html5 разработчика– Мобильные веб игрушки– Мобильные веб приложения

• 2 года занимался Flex/Flash– Игрушки– RIA

Page 3: Mobile web apps

Веб приложения

• Что это такое?

• HTML5

• Как делать?

• С помощью чего делать?

Page 4: Mobile web apps
Page 5: Mobile web apps

Отличия от сайта

• Сайт ориентирован на представление некоей информации. Основная задача - удобный доступ к содержимому и навигация.

• Веб-приложение - приложение, выполняемое в браузере.

Page 6: Mobile web apps

Еще отличия

• Веб приложение !== мобильная версия сайта

• Веб приложение !== phone gap, appcelerator (native обертки)

• Веб приложение, как правило, одностраничное, веб сайт - многостраничный

Page 7: Mobile web apps
Page 8: Mobile web apps

Ограничения

• Множество размеров экрана

• Скорость анимации

• Скорость javascript

• Качество картинок и шрифтов не так важно

• Медленное соединение– Чем меньше запросов, тем лучше– Чем меньше размер ресурсов, тем лучше– Чем меньше запросов на один домен, тем лучше

Page 9: Mobile web apps

Роль HTML5

• HTML5 - это не только верстка

• Набор технологий позволяющие в браузере выполнять задачи без плагинов и нативного кода

• На мобильных браузерах поддержка в целом лучше чем на десктопных

Page 10: Mobile web apps
Page 11: Mobile web apps

Схема работы

Page 12: Mobile web apps

По полочкам - сервер

• JSON

• WebSockets

• REST

• CORS

• Content-Type

• CDN

• GZip/BZip/Deflate

Page 13: Mobile web apps

Клиент

Page 14: Mobile web apps

По полочкам - клиент

• MV* - каркас для приложения

• Application cache - кешируем ресурсы

• Offline storage - кешируем данные

• Templating - шаблонизаторы на стороне клиента

• Interaction - протокол взаимодействия с сервером

• CSS3 - позволяет реализовать львиную долю UI эффектов

• Локализация - рано или поздно она будет нужна

Page 15: Mobile web apps

По полочкам - клиент

• Анимация

• События ввода пользователя

• Медиа контент

• Шрифты

• Баннера

• Трекинговые системы

Page 16: Mobile web apps

Best practices

• Builder pattern

• ViewPort

• Bootstrapping

• Requests Merging

• Data-attributes

• AMD / LMD

Page 17: Mobile web apps

Builder

Page 18: Mobile web apps

Каркасы приложенийSpine.JS

Page 19: Mobile web apps

Как выбирать

• Предметная область

• Взаимодействие с сервером

• Пользовательский интерфейс

• Опыт предыдущей разработки

• Документация

• Поддержка сообщества

Page 20: Mobile web apps

МодульностьКак работает и примеры

Page 21: Mobile web apps

Шаблоны

Page 22: Mobile web apps

Шаблоны - на строках

• Underscore templating

• Handlebars

• Moustache.JS

• Dust.JS

• jQuery templates

• Benchmark

• Как создать велосипед самому

• Помощник по выбору

Page 24: Mobile web apps

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– Путь для джедаев, хорош, когда все остальные исчепаны

Page 25: Mobile web apps

Отладка

• Отладка на iOS шаг за шагом

• Удаленная отладка на Chrome

• Удаленная отладка на Firefox

• Удаленная отладка Mobile Opera

• Weinre - универсальный отладчик

Page 26: Mobile web apps

Тестирование

• Хороший обзор и анализ фреймворков для тестирования

• Тестирование приложений на Backbone с использованием Jasmine

• Sinon.JS

Page 27: Mobile web apps

Эмуляторы

Page 28: Mobile web apps

Android

• Способы ускорения эмулятора Android

• Установка Android на VirtualBox

• Детальнее расписано

Page 29: Mobile web apps

Утилиты

Page 30: Mobile web apps

Сборщики

Page 31: Mobile web apps

Библиотеки

• Каталоги библиотек– Micro.JS– Jster– Backbone plugins

• Move.JS

• Zepto.JS

• LoDash

• Backbone marionette

Page 32: Mobile web apps

Книженции

Page 33: Mobile web apps

Книженции

• Patterns for Large-Scale JS apps

• Backbone fundamentals

• Backbone patterns

Page 34: Mobile web apps

Рассылки

• Responsive web design weekly

• HTML5 Weekly

• JavaScript weekly

• NoSQL weekly

Page 35: Mobile web apps

Презентации

• Оптимизация загрузки

• Кросс-платформенность и кросс-браузерность

• Оптимизация энергопотребления

• Общие рекомендации по разработке кода

Page 36: Mobile web apps

Обзорные ресурсы• 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

Page 37: Mobile web apps

Вопросы ?