Presentation

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

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

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

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

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

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

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

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

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

13. Клиент

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

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

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

17. Builder

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

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

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

21. Шаблоны

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

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

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

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

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

27. Эмуляторы

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

29. Утилиты

30. Сборщики

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

32. Книженции

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

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

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

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

37. Вопросы ?