Download to read offline
Uploaded byPavlo Iuriichuk
Mobile web apps
Документ описывает аспекты разработки мобильных веб-приложений, выделяя их отличия от сайтов и подчеркивая важность HTML5. Основные темы включают технологии, используемые для создания приложений, методы оптимизации производительности и лучшие практики разработки. Также обсуждаются фреймворки, инструменты тестирования и ресурсы для дальнейшего изучения.
More Related Content
Mobile web apps
- 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.
- 18.
- 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.