Mobile web apps

810 views

Published on

Presentation

Published in: Self Improvement
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
810
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
9
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile web apps

  1. 1. Мобильныевеб приложенияАспекты разработки
  2. 2. О себе• 3 года опыта в качестве html5 разработчика – Мобильные веб игрушки – Мобильные веб приложения• 2 года занимался Flex/Flash – Игрушки – RIA
  3. 3. Веб приложения• Что это такое?• HTML5• Как делать?• С помощью чего делать?
  4. 4. Отличия от сайта• Сайт ориентирован на представление некоей информации. Основная задача - удобный доступ к содержимому и навигация.• Веб-приложение - приложение, выполняемое в браузере.
  5. 5. Еще отличия• Веб приложение !== мобильная версия сайта• Веб приложение !== phone gap, appcelerator (native обертки)• Веб приложение, как правило, одностраничное, веб сайт - многостраничный
  6. 6. Ограничения• Множество размеров экрана• Скорость анимации• Скорость javascript• Качество картинок и шрифтов не так важно• Медленное соединение – Чем меньше запросов, тем лучше – Чем меньше размер ресурсов, тем лучше – Чем меньше запросов на один домен, тем лучше
  7. 7. Роль HTML5• HTML5 - это не только верстка• Набор технологий позволяющие в браузере выполнять задачи без плагинов и нативного кода• На мобильных браузерах поддержка в целом лучше чем на десктопных
  8. 8. Схема работы
  9. 9. По полочкам - сервер• JSON• WebSockets• REST• CORS• Content-Type• CDN• GZip/BZip/Deflate
  10. 10. Клиент
  11. 11. По полочкам - клиент• MV* - каркас для приложения• Application cache - кешируем ресурсы• Offline storage - кешируем данные• Templating - шаблонизаторы на стороне клиента• Interaction - протокол взаимодействия с сервером• CSS3 - позволяет реализовать львиную долю UI эффектов• Локализация - рано или поздно она будет нужна
  12. 12. По полочкам - клиент• Анимация• События ввода пользователя• Медиа контент• Шрифты• Баннера• Трекинговые системы
  13. 13. Best practices• Builder pattern• ViewPort• Bootstrapping• Requests Merging• Data-attributes• AMD / LMD
  14. 14. Builder
  15. 15. Каркасы приложенийSpine.JS
  16. 16. Как выбирать• Предметная область• Взаимодействие с сервером• Пользовательский интерфейс• Опыт предыдущей разработки• Документация• Поддержка сообщества
  17. 17. МодульностьКак работает и примеры
  18. 18. Шаблоны
  19. 19. Шаблоны - на строках• Underscore templating• Handlebars• Moustache.JS• Dust.JS• jQuery templates• Benchmark• Как создать велосипед самому• Помощник по выбору
  20. 20. Шаблоны на DOM-tree• Transparency• Pure• Plates• Distal• Soma• Почему?
  21. 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. 22. Отладка• Отладка на iOS шаг за шагом• Удаленная отладка на Chrome• Удаленная отладка на Firefox• Удаленная отладка Mobile Opera• Weinre - универсальный отладчик
  23. 23. Тестирование• Хороший обзор и анализ фреймворков дл я тестирования• Тестирование приложений на Backbone с использованием Jasmine• Sinon.JS
  24. 24. Эмуляторы
  25. 25. Android• Способы ускорения эмулятора Android• Установка Android на VirtualBox• Детальнее расписано
  26. 26. Утилиты
  27. 27. Сборщики
  28. 28. Библиотеки• Каталоги библиотек – Micro.JS – Jster – Backbone plugins• Move.JS• Zepto.JS• LoDash• Backbone marionette
  29. 29. Книженции
  30. 30. Книженции• Patterns for Large-Scale JS apps• Backbone fundamentals• Backbone patterns
  31. 31. Рассылки• Responsive web design weekly• HTML5 Weekly• JavaScript weekly• NoSQL weekly
  32. 32. Презентации• Оптимизация загрузки• Кросс-платформенность и кросс-браузерн ость• Оптимизация энергопотребления• Общие рекомендации по разработке кода
  33. 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. 34. Вопросы ?

×