Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)

837 views

Published on

° С чего мы начинали;
° Все способы адаптации;
° JavaScript-adaptive;
° Опыт создания собственной библиотеки;
° История панели управления;
° Сервис оптимизации изображений;
° Чему мы научились.

Published in: Engineering
  • Be the first to comment

Как мы адаптировали более 150 сайтов по технологии Dynamically-served JavaScript / Артём Цымпов, Евгений Кольцов (eski.mobi)

  1. 1. Как мы адаптировали 150 сайтов по технологии JavaScript-adaptive
  2. 2. Артём Цымпов UX директор и основатель eski.mobi Евгений Кольцов Директор по технологиям eski.mobi 2
  3. 3. Тезисы ● С чего мы начинали. ● Все способы адаптации. ● JavaScript-adaptive. ● Опыт создания собственной библиотеки. ● История панели управления. ● Сервис оптимизации изображений. ● Чему мы научились. 3
  4. 4. 2012 ● Мобильный трафик ~10% ● Сайт специально для мобильных?))))) ● Хорошая шутка! 4
  5. 5. 2012 Первые мобильные сайты мы делали на поддомене с отдельной CMS. Эти сайты всё ещё работают. 5
  6. 6. 2012 Почему не адаптивный дизайн? Всё просто: ● Долго. ● Дорого. ● Мало заказчиков и много конкурентов. 6
  7. 7. 2013 ● Появилось портфолио (5 работ). ● Понимаем, что отдельная CMS — это ад. ● Находим open source проект mobify.js. ● Пробуем технологию JavaScript-adaptive. ● Что-то получается… 7
  8. 8. 2013 Первые сайты по технологии JavaScript- adaptive. 8
  9. 9. 2013 ● Мобильный трафик ~15%. ● Кому-то нужен мобильный сайт? Серьёзно? 9
  10. 10. 2014 ● Мобильный трафик ~25%. ● Стойте, у нас уже каждый четвёртый — мобильный? ● Ничего, потерпят. 10
  11. 11. 2014 Первые сайты на технологии JavaScript- adaptive. 11
  12. 12. 2015 ● Мобильный трафик ~40% ● Яндекс и Google понижают в выдаче немобильных. ● Нужно ли адаптировать? ● Хм… Нужно подумать. 12
  13. 13. 2016 ● Мобильный трафик ~50%. ● Каждый второй — мобильный. ● Ну что, будем ещё думать? 13
  14. 14. 2016 14
  15. 15. 2 способа мобилизации сайта ● Разный HTML ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Единый HTML ○ Обычный адаптивный дизайн ○ JavaScript-adaptive (технология eskimobi) 15
  16. 16. 2 способа мобилизации сайта ● Разный HTML ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Единый HTML ○ Обычный адаптивный дизайн ○ JavaScript-adaptive (технология eskimobi) Ни в коем случае! 16
  17. 17. 2 способа мобилизации сайта ● Разный HTML ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Единый HTML ○ Обычный адаптивный дизайн ○ JavaScript-adaptive (технология eskimobi) Подходит большим проектам: facebook, twitter 17
  18. 18. 2 способа мобилизации сайта ● Разный HTML ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Единый HTML ○ Обычный адаптивный дизайн ○ JavaScript-adaptive (технология eskimobi) Хорошее решение 18
  19. 19. 2 способа мобилизации сайта ● Разный HTML ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Единый HTML ○ Обычный адаптивный дизайн ○ JavaScript-adaptive (технология eskimobi) Очень хорошее решение 19
  20. 20. 2 способа мобилизации сайта ● Разный HTML ○ С отдельной CMS ○ Мобильный, связанный с основным по API ○ Отдельный шаблон для мобильных устройств ● Единый HTML ○ Обычный адаптивный дизайн ○ JavaScript-adaptive (технология eskimobi) Ещё лучше? 20
  21. 21. 21
  22. 22. 22
  23. 23. 23
  24. 24. 24
  25. 25. header footer navigation main template slider ads 25
  26. 26. 26
  27. 27. 27
  28. 28. JavaScript-adaptive ● Единый HTML ● Единый URL ● Контроль над DOM с помощью JS 28
  29. 29. Mobify capture Версия v1 Mobify.js jQuery dust template LESS https://github.com/mobify/mobifyjs 29
  30. 30. Версия v1 Mobify.js 30 Основная библиотека, описывающая взаимодействие между модулями
  31. 31. Mobify capture Версия v1 jQuery dust template LESS 31 Модуль захвата DOM’а исходного сайта
  32. 32. Mobify capture Версия v1 jQuery dust template LESS 32 Шаблонизатор для отображения мобильных шаблонов
  33. 33. Mobify capture Версия v1 jQuery dust template LESS 33 jQuery для выборки данных для шаблонов
  34. 34. Mobify capture Версия v1 jQuery dust template LESS 34 Для стилей
  35. 35. Версия v1 — схема работает!!! Что не нравится: ● Скорость компиляции проекта. ● Обязательное включение jQuery. ● Наличие неиспользуемых компонентов. ● Управление только через командную строку. 35
  36. 36. Ближайшие планы ● Создание панели управления сайтами. ● Оптимизация первоначальной схемы. 36
  37. 37. Eskimobi capture Версия v2 eski.mobi.js jQuery lodash template LESS 37
  38. 38. Сравнение шаблонизаторов Dust.js LoDash 38
  39. 39. Версия v2: результаты ● Для разработчика — ускорили сборку <100ms ● Для пользователя — ускорили загрузку сайтов 39
  40. 40. Версия v2: проблемы ● Нестабильный захват исходного HTML ● Ошибки преобразования элементов DOM ● Запрос лишних ресурсов ● Увеличение размера мобильной версии ● Не работает на Windows Phone и Firefox Mobile 40
  41. 41. Mobify capture Версия v3 eski.mobi.js lodash template LESS Eskimobi resize 41
  42. 42. Версия v3: результаты ● Повыcили стабильность захвата HTML ● Решили ошибки преобразований ● Сохранение дерева DOM без запроса ресурсов ● Маленький размер мобильной версии ● Работает во всех мобильных браузерах 42
  43. 43. Ближайшие планы ● Разработка мощной панели управления ● Сервис оптимизации изображений, css и js 43
  44. 44. Панель v1 44
  45. 45. Панель v2 45
  46. 46. Панель v3 46
  47. 47. Новая проблема 47 Низкая скорость загрузки на сайтах с большим кол-вом изображений.
  48. 48. Варианты решения ● Заказчик оптимизирует изображения ● Заказчик создаёт уменьшенную копию ● Мы делаем всё сами 48
  49. 49. Варианты решения ● Заказчик оптимизирует изображения ↳ Лишняя работа, минимальный эффект ● Заказчик создаёт уменьшенную копию ● Мы делаем всё сами 49
  50. 50. Варианты решения ● Заказчик оптимизирует изображения ↳ Лишняя работа, минимальный эффект ● Заказчик создаёт уменьшенную копию ↳ Очень много лишней работы ● Мы делаем всё сами 50
  51. 51. Варианты решения ● Заказчик оптимизирует изображения ↳ Лишняя работа, минимальный эффект ● Заказчик создаёт уменьшенную копию ↳ Очень много лишней работы ● Мы делаем всё сами ↳ Идеальный вариант 51
  52. 52. Идеальный вариант Модуль оптимизирует все изображения, которые больше, чем размер экрана устройства. ✓ Высокая скорость работы ✓ Поддержка retina ✓ Кэширование 52
  53. 53. desktop eskimobi resize IMG HTML Eskimobi resize IMG mobile mobi mobi m 53
  54. 54. 54
  55. 55. 55
  56. 56. eskimobi resize 56
  57. 57. Идеальный вариант Модуль оптимизирует все изображения, которые больше, чем размер экрана устройства. ✓ Высокая скорость работы ✓ Поддержка retina ✓ Кэширование 57
  58. 58. Сравнение версий resize 200ms обработка img 50ms обработка img 58
  59. 59. Resize OFF — 3.37 MB Resize ON — 2.31 MB Размер сайта с resize и без 59
  60. 60. Трафик resize ~100 Гб в сутки
  61. 61. Трафик resize ~100 Гб в сутки ● Google Cloud = 380 USD/месяц ● Amazon Web Services = 268 USD/месяц ● Selectel = 13 USD/месяц
  62. 62. Библиотека eski.mobi.js 62
  63. 63. Библиотека eski.mobi.js 63
  64. 64. Чему мы научились ✓ Ставьте себя на место покупателя вашего продукта ✓ Используйте готовые решения ✓ Рассчитывайте нагрузку и трафик заранее 64
  65. 65. Ставьте себя на место покупателя ● Потенциальные клиенты думают иначе ● Погрузитесь в их проблемы ● Чем меньше вовлечения требует ваш продукт от заказчика, тем он будет успешнее 65
  66. 66. Используйте готовые решения ● Не пытайтесь написать собственный framework ● Ищите и изучайте готовые решения ● И правильно их комбинируйте 66
  67. 67. Рассчитывайте нагрузку заранее ● Нагрузка может увеличиться многократно внезапно ● Используйте калькулятор хостинга 67
  68. 68. Артём Цымпов UX директор и основатель eski.mobi Евгений Кольцов Директор по технологиям eski.mobi 68

×