Embed Size (px)
Citation preview
Интерактивные картыпланировок на сайтах торговых
центров.Производительность, грабли, интеграция с
CMS 1C-Битрикс
О чем пойдет речь?• Как делать фронт для корпоративного сегмента и не сойти с ума
• Порция страданий от IE8
• Немного оптимизации
2
Почему это актуально?3
Почему интерактивные?1. Реагируют на поведение пользователя
2. Возможен поиск по карте
3. Могут подстраиваться под особенности экрана пользователя
4. Информацию на карте можно менять без участия специалистов
4
Требования1. Максимальный охват браузеров и OS
2. Высобкая скорость работы (реакция на действия пользователя)
3. Удобный и привычный интерфейс
4. Сокращение времени на разработку и поддержку
5
Стек технологий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
<img> + <map>1. Очень высокая производительность
2. Просто в реализации
3. Сложно выстрелить себе в ногу
4. Отличная поддержка браузерами
7
<img> + <map>1. Сложности с адаптивом
2. Дисплеи повышенность четкости
3. Органичения на манипуляции с картой
4. Резкое повышение трудоемкости при незначительном увеличении
сложности
8
<img> + <map>9
<img> + <map>10
SVG, Canvas1. Ограниченно быстро
2. Практически любые манипуляции пользователя с картой
3. Retina - OK
4. манипуляции на js
11
12
SVG, Canvas1. Raphael.js
2. excanvas.js
Получаем VML в старых IE
Получаем проблемы с производительностью
14
Raphael.js (http://raphaeljs.com/)• Автоматически конвертировать в Raphael.js можно не все директивы
SVG
• То, что сконвертировано - работает даже на мобильных платформах (с
исключениями)
• Из ~800кб SVG файла получаем 2.5Мб js кода
• За это получаем API для работы с тем, что нагенерировано
15
SVG, Canvas• Делай два варианта карт
• Оптимизируй
16
Что?
Оптимизация до того, как все плохо• Проанализировать картинку
• Отбросить статические элементы
• Отказаться от нестандартных шрифтов (?)
• Не переводить шрифты в кривые
• Все что только возможно перевести в растр
18
Оптимизация до того как все плохоИначе
1. Эти точки нужно описать кодом на js
2. Этот код все равно нужно грузить клиенту
3. Эти точки нужно отрисовать браузеру
19
20
Открой карту в IE821
Производительность
Главный цикл браузера. Основной поток• Занимается отрисовкой DOM, работой с DOM и обработкой JS
• Один поток
• Обработчики и события выстраиваются в очередь
• Обрабатываются по очереди
• Загрузка и исполнение JS блокирующие
23
Оптимизация1. Всегда использовать preloader
2. Вынести часть кода в ленивую загрузку
3. Использовать псевдомногопоточность SetTimeout 0,
window.setImmediate()
24
Yandex MAP
26
Что мы получаем?1. "Богатая" поддерживаемая платформа
2. Обширное API
3. Хороший стек браузеров, в том числе и мобильные
4. Хорошая производительность
5. Имеет доверие у пользователей
27
Как работает1. Фон - растр
2. Карта рисуется и режется на тайлы (прямоугольные области)
3. Поверх основного (рисованного) слоя карты накладываются активные
области
4. Пользователь взаимодействует не с растром, а с активными областями
- ИНТЕРАКТИВНОСТЬ
28
29
Вот оно, да?
Yandex, Google, etc.1. Иногда сложно вписать в общую идею сайта
2. Ограничения по расширению функционала
3. Зависимость от сторонней платформы
31
32
Что выбрать?33
Что выбрать?34
Получение данных• Компактность
• Кешируемость
• Возможность ленивой загрузки
• Версионность
35
{
"uid":"5",
"name":"",
"shop_name":"Федя Модный",
"floor":"2",
"coordinats":"...",
"category":"10",
"logo":__PATH_TO_LOGO__,
"description":"",
...
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
36
JSON, JSONP• Нативно
• Быстро парсится
• Можно хранить в Local Storage, APP Cache, Browser Cache
• Хорошо сжимается
37
А чтона сервере?
Например, Bitrix• Структура карты хорошо "ложится" с структуру инфоблоков
• Источником данных для карты могут служить json файлы
• Не нужно каждый раз обращаться к данным на сервере
• Данные в json изменяются только по:
• OnAfterIBlockElementAdd
• OnAfterIBlockElementDelete
• OnAfterIBlockElementUpdate
39
Спасибо!Денис Завгородний, веб-технолог Digital-агентства AlterEgo
https://twitter.com/DenisZavgorodny
40
