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

2.
О себе
• 3 года опыта в качестве html5
разработчика
– Мобильные веб игрушки
– Мобильные веб приложения
• 2 года занимался Flex/Flash
– Игрушки
– RIA

3.
Веб приложения
• Что это такое?
• HTML5
• Как делать?
• С помощью чего делать?

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

5.
Еще отличия
• Веб приложение !== мобильная версия
сайта
• Веб приложение !== phone gap,
appcelerator (native обертки)
• Веб приложение, как правило,
одностраничное, веб сайт -
многостраничный

6.
Ограничения
• Множество размеров экрана
• Скорость анимации
• Скорость javascript
• Качество картинок и шрифтов не так
важно
• Медленное соединение
– Чем меньше запросов, тем лучше
– Чем меньше размер ресурсов, тем лучше
– Чем меньше запросов на один домен, тем лучше

7.
Роль HTML5
• HTML5 - это не только верстка
• Набор технологий позволяющие в
браузере выполнять задачи без плагинов
и нативного кода
• На мобильных браузерах поддержка в
целом лучше чем на десктопных

8.
Схема работы

9.
По полочкам - сервер
• JSON
• WebSockets
• REST
• CORS
• Content-Type
• CDN
• GZip/BZip/Deflate

10.
Клиент

11.
По полочкам - клиент
• MV* - каркас для приложения
• Application cache - кешируем ресурсы
• Offline storage - кешируем данные
• Templating - шаблонизаторы на стороне клиента
• Interaction - протокол взаимодействия с сервером
• CSS3 - позволяет реализовать львиную долю UI
эффектов
• Локализация - рано или поздно она будет нужна

12.
По полочкам - клиент
• Анимация
• События ввода пользователя
• Медиа контент
• Шрифты
• Баннера
• Трекинговые системы

13.
Best practices
• Builder pattern
• ViewPort
• Bootstrapping
• Requests Merging
• Data-attributes
• AMD / LMD

14.
Builder

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

16.
Как выбирать
• Предметная область
• Взаимодействие с сервером
• Пользовательский интерфейс
• Опыт предыдущей разработки
• Документация
• Поддержка сообщества

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

18.
Шаблоны

19.
Шаблоны - на строках
• Underscore templating
• Handlebars
• Moustache.JS
• Dust.JS
• jQuery templates
• Benchmark
• Как создать велосипед самому
• Помощник по выбору

20.
Шаблоны на DOM-tree
• Transparency
• Pure
• Plates
• Distal
• Soma
• Почему?

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

22.
Отладка
• Отладка на iOS шаг за шагом
• Удаленная отладка на Chrome
• Удаленная отладка на Firefox
• Удаленная отладка Mobile Opera
• Weinre - универсальный отладчик

23.
Тестирование
• Хороший обзор и анализ фреймворков дл
я тестирования
• Тестирование приложений на Backbone с
использованием Jasmine
• Sinon.JS

24.
Эмуляторы

25.
Android
• Способы ускорения эмулятора Android
• Установка Android на VirtualBox
• Детальнее расписано

26.
Утилиты

27.
Сборщики

28.
Библиотеки
• Каталоги библиотек
– Micro.JS
– Jster
– Backbone plugins
• Move.JS
• Zepto.JS
• LoDash
• Backbone marionette

29.
Книженции

30.
Книженции
• Patterns for Large-Scale JS apps
• Backbone fundamentals
• Backbone patterns

31.
Рассылки
• Responsive web design weekly
• HTML5 Weekly
• JavaScript weekly
• NoSQL weekly

32.
Презентации
• Оптимизация загрузки
• Кросс-платформенность и кросс-браузерн
ость
• Оптимизация энергопотребления
• Общие рекомендации по разработке кода

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

34.
Вопросы ?