Как сделать навигацию по торговому центру удобной? Какие инструменты доступны разработчику, обзор сильных и слабых сторон основных технологий. – map vs SVG vs Яндекс.Карты/Google.Maps – SVG и IE – Что же выбрать в итоге?

1. Интерактивные карты
планировок на сайтах торговых
центров.
Производительность, грабли, интеграция с
CMS 1C-Битрикс

2. О чем пойдет речь?
• Как делать фронт для корпоративного сегмента и не сойти с ума
• Порция страданий от IE8
• Немного оптимизации
2

3. Почему это актуально?
3

4. Почему интерактивные?
1. Реагируют на поведение пользователя
2. Возможен поиск по карте
3. Могут подстраиваться под особенности экрана пользователя
4. Информацию на карте можно менять без участия специалистов
4

5. Требования
1. Максимальный охват браузеров и OS
2. Высобкая скорость работы (реакция на действия пользователя)
3. Удобный и привычный интерфейс
4. Сокращение времени на разработку и поддержку
5

6. Стек технологий
1. <img> + <map>
2. SVG + Canvas + FabricJS + excanvas.js (old IE)
3. SVG + VML + Raphael.JS
4. Yandex MAP
5. Google MAP https://www.google.com/maps/about/partners/indoormaps/
6. somename MAP
6

7. <img> + <map>
1. Очень высокая производительность
2. Просто в реализации
3. Сложно выстрелить себе в ногу
4. Отличная поддержка браузерами
7

8. <img> + <map>
1. Сложности с адаптивом
2. Дисплеи повышенность четкости
3. Органичения на манипуляции с картой
4. Резкое повышение трудоемкости при незначительном увеличении
сложности
8

9. <img> + <map>
9

10. <img> + <map>
10

11. SVG, Canvas
1. Ограниченно быстро
2. Практически любые манипуляции пользователя с картой
3. Retina - OK
4. манипуляции на js
11

12. 12

14. SVG, Canvas
1. Raphael.js
2. excanvas.js
Получаем VML в старых IE
Получаем проблемы с производительностью
14

15. Raphael.js (http://raphaeljs.com/)
• Автоматически конвертировать в Raphael.js можно не все директивы
SVG
• То, что сконвертировано - работает даже на мобильных платформах (с
исключениями)
• Из ~800кб SVG файла получаем 2.5Мб js кода
• За это получаем API для работы с тем, что нагенерировано
15

16. SVG, Canvas
• Делай два варианта карт
• Оптимизируй
16

17. Что?

18. Оптимизация до того, как все плохо
• Проанализировать картинку
• Отбросить статические элементы
• Отказаться от нестандартных шрифтов (?)
• Не переводить шрифты в кривые
• Все что только возможно перевести в растр
18

19. Оптимизация до того как все плохо
Иначе
1. Эти точки нужно описать кодом на js
2. Этот код все равно нужно грузить клиенту
3. Эти точки нужно отрисовать браузеру
19

20. 20

21. Открой карту в IE8
21

22. Производительность

23. Главный цикл браузера. Основной поток
• Занимается отрисовкой DOM, работой с DOM и обработкой JS
• Один поток
• Обработчики и события выстраиваются в очередь
• Обрабатываются по очереди
• Загрузка и исполнение JS блокирующие
23

24. Оптимизация
1. Всегда использовать preloader
2. Вынести часть кода в ленивую загрузку
3. Использовать псевдомногопоточность SetTimeout 0,
window.setImmediate()
24

25. Yandex MAP

26. 26

27. Что мы получаем?
1. "Богатая" поддерживаемая платформа
2. Обширное API
3. Хороший стек браузеров, в том числе и мобильные
4. Хорошая производительность
5. Имеет доверие у пользователей
27

28. Как работает
1. Фон - растр
2. Карта рисуется и режется на тайлы (прямоугольные области)
3. Поверх основного (рисованного) слоя карты накладываются активные
области
4. Пользователь взаимодействует не с растром, а с активными областями
- ИНТЕРАКТИВНОСТЬ
28

29. 29

30. Вот оно, да?

31. Yandex, Google, etc.
1. Иногда сложно вписать в общую идею сайта
2. Ограничения по расширению функционала
3. Зависимость от сторонней платформы
31

32. 32

33. Что выбрать?
33

34. Что выбрать?
34

35. Получение данных
• Компактность
• Кешируемость
• Возможность ленивой загрузки
• Версионность
35

36. 01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
{
"uid":"5",
"name":"",
"shop_name":"Федя Модный",
"floor":"2",
"coordinats":"...",
"category":"10",
"logo":__PATH_TO_LOGO__,
"description":"",
...
}
36

37. JSON, JSONP
• Нативно
• Быстро парсится
• Можно хранить в Local Storage, APP Cache, Browser Cache
• Хорошо сжимается
37

38. А что
на сервере?

39. Например, Bitrix
• Структура карты хорошо "ложится" с структуру инфоблоков
• Источником данных для карты могут служить json файлы
• Не нужно каждый раз обращаться к данным на сервере
• Данные в json изменяются только по:
• OnAfterIBlockElementAdd
• OnAfterIBlockElementDelete
• OnAfterIBlockElementUpdate
39

40. Спасибо!
Денис Завгородний, веб-технолог Digital-агентства AlterEgo
denis.zavgorodny@gmail.com
https://twitter.com/DenisZavgorodny
40