Масштабируемые кроссплатформенные веб-приложения / Илья Пухальский (Epam)
0 likes814 views
Документ обсуждает современные тенденции в разработке кроссплатформенных веб-приложений, подчеркивая необходимость масштабируемой архитектуры и адаптивного дизайна. Он рассматривает проблемы существующих решений и предлагает подходы к созданию компонентов, которые обеспечивают высокий уровень взаимодействия с пользователем на разных устройствах. Включены также примеры и рекомендации по использованию техник, позволяющих улучшить производительность и опыт пользователей.
Масштабируемые кроссплатформенные веб-приложения / Илья Пухальский (Epam)
- 3. @witchfinderx 2 Илья Пухальский, EPAM Mobile Competency Center
- 5. 1. Ситуация в вебе на сегодняшний день 2. Почему отзывчивый веб-дизайн не панацея 3. Веб-приложения? 4. Задача и проблемы существующих решений 5. Идея и реализация 6. Возможные дополнения к реализации 4
- 7. 6 IBM 7094, 1966 год 0.122 Мб, 3 134 500 $, вес около тонны, вычислительная мощность микроволновки
- 8. 7 iPhone, первое поколение 128 Мб, 399 $, 135 грамм, вычислительная мощность NASA начала 70-х
- 9. 8 +4% +52% +138% -12% NetBiscuits latest Web Trends Report Мобильный трафик (ИЮЛЬ 2012 - ЯНВАРЬ 2013) Смартфоны Планшетные компьютеры Smart TV, приставки Мобильные телефоны
- 10. 9
- 11. 10 7% 3% 5% 8% 13% 27% 37% Android iOS Series 40 Symbian Samsung Bada BlackBerry OS Other StatCounter Global Stats Мобильные ОС (МАРТ 2013)
- 12. 11 The Many Faces of Little Green Robot Несколько фактов об Android
- 13. 12 The Many Faces of Little Green Robot Несколько фактов об iOS
- 14. 13 Что общего у всех устройств? The Simpsons: Tapped Out Game
- 15. 14
- 17. 16 Проблемы с адаптацией макета страницы 1. Изображения 2. Навигация 3. Таблицы 4. Аудио и видео 5. Ваш вариант
- 19. 18 "Если твой вебсайт размером 15 Мб, "то это не HTML5, это глупость." — Кристиан Хейлман
- 20. 19 Проблемы опыта взаимодействия от контекста до персонализации
- 22. 21 "Отзывчивый вебсайт по умолчанию не адаптирован под конкретные мобильные устройства." — Jon Arne Sæterås
- 23. 22 "Отзывчивый вебсайт по умолчанию не адаптирован под конкретные устройства.
- 24. 23
- 25. 24 Отзывчивый веб-дизайн — это компромисс
- 26. 25 Не работает для веб-приложений*
- 28. 27 ?
- 30. Задача 29
- 31. Веб-приложение, работающее на максимальном количестве платформ и браузеров 1. Возможность предоставлять разный контент и функционал для различных устройств, групп и типов устройств 2. Нужный уровень опыта взаимодействия для разных типов устройств 3. Повтороное использование кода 30
- 33. 32 + ...
- 35. Масштабируемая архитектура приложения 1. Модульность; бибиотека реиспользуемых компонентов 2. Асинхронная загрузка компонентов 3. Набор готовых элементов интерфейса 4. Гибкий уровень представления для различных flow 5. Поддержка тач-событий, gestures и D-pad, а также других возможностей устройств; анимации; утилиты 34
- 36. Идея 35
- 42. index.html! Root component! Component #3! Component #4! Component #2! Component #1! Component #3! Component #4! Component #2! Component #1! ! Component #4! Component #2! ! Component #1! Component #3! tmpl/mobile/* tmpl/desktop/* tmpl/tablet/*
- 43. 42 Ядро + хелперы и утилиты Модули / компоненты + библиотека переиспользуемых компонентов Элементы интерфейса + набор готовых элементов интерфейса
- 45. 44 Из чего состоит? 1. Загрузчик и регистратор компонентов 2. Описание интерфейса компонента, модели, представления 3. Роутинг и история 4. Страницы, навигация между страницами* 5. Механизм кеширования 6. Анимации, поддержка тач-событий, утилиты и хелперы
- 46. 45 Разметка компонентов <div data-id="app-smart-component" data-component="smart-component"> ! <script> ! ! APP.setOptionsByID( ! ! ! 'app-smart-component', ! ! ! { ! ! ! ! prop: 'value' ! ! ! } ! ! ); ! </script> </div>
- 47. 46 Хаки JQuery / Zepto var _oldshow = $.fn.show; ! $.fn.show = function(speed, callback) { ! ! var res = _oldshow.apply(this,arguments); ! ! $(this).trigger('APP:show'); ! ! return res; };
- 48. Компоненты 47
- 50. Модель Получение и хранение данных и предыдущих значений — Оповещение об изменении — Синхронизация с сервером — Настройки получения данных 49
- 51. Представление Хранение, компиляция и рендеринг шаблона — DOM-манипуляции — Автоматическое обновление после изменения данных 50
- 54. 53 Компонент? Элемент интерфейса? Компонент Элемент интерфейса
- 55. 54 Подход к созданию элементов интерфейса <label for="wifi-switch">Wi-Fi Switch</label> <input type="checkbox" data-role="switch" id="wifi-switch" />
- 56. 55 Подход к созданию элементов интерфейса <div class="app-switch"> ! <label class="app-switch-control" for="wifi-switch"> ! ! <input type="radio" name="wifi-switch" id="wifi-switch"> ! ! <span class="app-switch-track"> ! ! ! <span class="app-switch-track-wrap"> ! ! ! ! <span class="app-switch-thumb"></span> ! ! ! </span> ! ! </span> ! </label> ! <label class="app-switch-label" for="wifi-switch">Wi-Fi Switch</label> </div>
- 58. 57 Автороутинг APP.start({ settings: { // ... }, router: { routes: { '/': 'home' }, handlers: { home: function () { // ... } } } }); <div data-page="home"> <!-- HTML, компоненты, элементы интерфейса --> </div>
- 59. 58 Анимация переключения страниц 1. СSS трансформации 2. JavaScript 3. Трюки (фиксированная высота, translateZ, backface-visibility) 4. # и History API ...различаются в зависимости от типа устройства.
- 61. 60 Кеширование 1. Нескомпилированные шаблоны и определение компонентов храним в localStorage 2. При смене версии приложения обновляем кеш 3. Крем из manifest добавить по вкусу
- 62. 61 Прозрачная поддержка различных способов ввода... ...единое событие — "tap". 1. FastClick от Financial Times Labs
- 63. 62
- 64. 63 Области с прокруткой... CSS трансформации + JavaScript. 1. iScroll 4 от Cubiq 2. FTScroller от Financial Times Labs
- 65. 64 Мелочи 1. Скрытие адресной строки на смартфонах 2. Информация об устройстве 3. Дебаггер
- 68. 67 События 1. Глобальный контроллер событий 2. События используются на различных уровнях приложения (глобальный, модульный, модель, предствление, страница)
- 69. 68 Функции обратного вызова и хуки 1. Все функции обратного вызова заменяем на события (постояноство и логичность) 2. Хуки используем для асинхронных публичных методов везде, где это возможно и необходимо
- 70. Вариации 69
- 71. Определение возможностей и браузера устройства на сервере 70
- 73. Определение возможностей устройства — хорошо, определение браузера — необходимое зло 72
- 74. 73 21 "Чем более опытен мобильный веб-разработчик, тем больше он полагается на определение браузера и возможностей устройства на сервере." — PPK в "The Mobile Book"
- 75. 74 Библиотеки определения устройств 1. WURFL 2. WURFL Cloud от Scientia Mobile 3. OpenDDR* 4. Device Atlas 5. 51 Degrees
- 77. 76 Кеширование 1. Используем тот же шаблонизатор на сервере 2. Передаем готовый HTML вместо шаблона 3. Вместо JSON-данных получаем также готовый HTML 4. Представление компонента используем только для привязки к DOM (DOM-binding)
- 78. Вопросы? 77
- 79. Вопросы? 77
- 80. @witchfinderx 78
- 81. @witchfinderx 78