/
Рекомендации для JavaScript разработчика

Рекомендации для JavaScript разработчика

Рекомендации, для сохранения обратной совместимости при обновлении платформы:

  1. По максимуму используйте встроенный в платформу функционал и минимизируйте количество JS кода. Через JS можно получить доступ во внутренние структуры системы, у которых нет обратной совместимости и они могут быть изменены в любой момент.
  2. Минимизируйте в JS коде обращение к DOM элементам, стилям, CSS классам. Эти сущности могут измениться в любой момент.
  3. Используйте JS API, везде где это возможно. Например, для получения данных виджета можно залезть во внутренние структуры объектов, а можно вызвать функцию API. Вызывайте функцию. Мы поддерживаем обратную совместимость всех функций. Либо обязательно предупредим, если поведение функции изменилось.
  4. Пишите валидный JS/HTML код, чтобы избежать undefined behavior, в противном случае, после обновления поведение может измениться.
  5. Читайте особенности обновления, где мы предупреждаем о вероятных проблемах, которые выявили.
  6. Если много JS/Python кода, то нужно тестировать результат после обновления. Мы используем для этого автоматическое сравнение скриншотов дашбордов инструментом BackstopJS.

Общие рекомендации:

  1. Для установки фильтра в виджет не нужно добавлять еще один виджет «Фильтр», чтобы повлиять на третий виджет. Достаточно установить фильтр (visApi.setFilterSelectedValues(id виджет, где происходит клик)) в виджет, где происходит клик. Например, если есть карта, в которой вы хотите повлиять на другой виджет, то в коде карты нужно написать visApi.setFilterSelectedValues(id карты).
  2. Для показа числа из данных (рисунок 1) не нужно использовать «Пользовательский» виджет. Достаточно использовать виджет «Текст», в форматировании которого можно взять числа из данных и отобразить нужным образом. Например: @array[0] + @array[1]. Таким образом, мы взяли и сложили первые два числа из данных. В форматировании можно использовать JS код. Например, Math.round(@array[2]). Округление третьего числа из данных. Рисунок 1
  3. Если отредактировали код, а потом решили его оставить стандартным, то лучше сбрасывать код на стандартный в настройках виджета и запрещать редактирование кода. Если добавится какое-то новое поле в платформе у этого типа виджета в коде, то у отредактированного кода этого поля не будет, а у стандартного оно появится и виджет сможет использовать какой-то новый функционал.
  4. Старайтесь не добавлять JS файлы библиотек, которые уже используются платформой, в противном случае возможны конфликты. Список используемых платформой библиотек можно посмотреть в руководстве разработчика.
  5. Не использовать кастомные ajax запросы в коде для установки фильтра, получения данных и т.д., так как это может привести к непредвиденным последствиям, после которых платформа может работать нестабильно. Для таких случаев есть функция visApi(), в которой есть все необходимые функции: установка фильтра, запрос данных по виджету, drilldown, drillup, подписка по установке фильтра и многое другое.
  6. Старайтесь не добавлять JS файлы от разных версий одних и тех же библиотек, в противном случае возможны конфликты.
  7. Когда вы используете одинаковую логику для многих виджетов, то лучше создать JS файл на сервере, в файле которого создать глобальную функцию, например (window.myAdditionalLogic = function (parameter1, parameter2, ...) {}), и внутри нее написать всю логику. А в самом виджете просто вызывать эту функцию с нужными параметрами (window.myAdditionalLogic()).
  8. Не используйте в коде виджета получение данных от другого виджета (visApi.getWidgetData()), если эти полученные данные далее не будут использоваться. Лишние запросы нагружают систему.
  9. Для получения выбранных значений в виджете, используйте функцию visApi.getSelectedValues() вместо visApi.getWidgetData(). Так как visApi.getWidgetData() запрашивает данные с сервера, таким образом, идет излишняя нагрузка на сервер.
  10. Не выносите неиспользуемые виджеты за границу дашборда. Вместо этого удаляйте их, если они больше не используются. Из-за таких виджетов дашборд загружается дольше.
  11. Не добавляйте в проекты JS и CSS библиотеки, если вы не уверены в том, что они ничего не поломают на существующем проект.
  12. Старайтесь всегда добавлять в проект только минифицированные файлы JS или CSS. Обычно они называются с приставкой min. Например, tippy.min.js.
  13. Не добавляйте в проекты большие JS и CSS файлы, так как каждый добавленный JS или CSS файл увеличивает время загрузки дашборда.
  14. Старайтесь не оставлять в коде вывод в консоль (console.log, console.warn, console.error и т.д.). Если при работе дашборда возникают какие-то проблемы и разработчикам приходится исследовать код виджетов, то в консоль будет сыпаться лишняя информация, которая затруднит поиск проблемы.
  15. Не используйте стандартные виджеты («Гистограма», «Текст», «Круговая» и т.д.), чтобы отрисовать кастомный виджет (например, Dragon D3). Вместо этого используйте «Пользовательский виджет». У стандартных виджетов есть свои настройки (легенда, ось Х, ось Y, настройки фильтра, таблицы и так далее), которые, скорее всего, не будут влиять на отрисованный виджет Дракон, к примеру. Тут спорный момент. Конечно, ничего не мешает подстроить Дракон таким образом, чтобы он использовал настройки другого типа виджета. Но лучше использовать свой «пользовательский» виджет, который будет добавляться на дашборды с помощью Ribbon.
  16. Не редактируйте код виджета «Фильтр», чтобы отрисовать заголовок слева. Вместо этого добавьте слева виджет «Текст».
  17. Старайтесь использовать фильтры в настройках «OLAP», где это необходимо. Не используйте вместо этого виджет «Фильтр», который будет вынесен за границы дашборда, и применять фильтры по умолчанию.
  18. Старайтесь не редактировать название серий в коде виджета. Вместо этого редактируйте название серии в настройках виджета «Настройка серий и сегментов».
  19. Старайтесь не добавлять все файлы JS и CSS сторонней библиотеки. Внимательно читайте документацию и используйте только те файлы, которые необходимы для работы библиотеки. Обычно такие файлы лежат в папке dist. Например, для библиотеки Leaflet достаточно добавить только dist/leaflet.js, все остальные файлы не нужны (например, папка src) – это исходные файлы.

Related content

Рекомендации для JavaScript разработчика
Рекомендации для JavaScript разработчика
More like this
Рекомендации для JavaScript разработчика
Рекомендации для JavaScript разработчика
More like this
Рекомендации для JavaScript разработчика
Рекомендации для JavaScript разработчика
More like this
Рекомендации для JavaScript разработчика
Рекомендации для JavaScript разработчика
More like this
Рекомендации для JavaScript разработчика
Рекомендации для JavaScript разработчика
More like this
Рекомендации для JavaScript разработчика
Рекомендации для JavaScript разработчика
More like this