Mobile web apps
Upcoming SlideShare
Loading in...5
×
 

Mobile web apps

on

  • 763 views

Presentation

Presentation

Statistics

Views

Total Views
763
Views on SlideShare
755
Embed Views
8

Actions

Likes
2
Downloads
4
Comments
1

1 Embed 8

https://twitter.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile web apps Mobile web apps Presentation Transcript

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