Задание 1 — найди ошибки

Запуск

npm i
npm start

При каждом запуске тестовые данные генерируются заново случайным образом.

Описание выполненных действий

1. Object() is not a function at ymaps.ready, index.js:6 (проблема с initMap)

Достаточно очевидная ошибка, обнаружил сразу, как только перешел из index.js в map.js — отсутствовал экспорт функции initMap.

2. Нулевые размеры блока #map (контейнера)

Согласно документации, в таком случае карта не будет отображаться (фактически карта нулевого размера просто невидна). Именно так и было. Обнаружил после инспектирования DOM дерева - у карты была нулевая высота. Исправил, установив значения ширины и высоты для #map.

3. Отсутствующее добавление objectManager'а к карте (отрисовка)

Просмотрел код и не нашел никакой связки между objectManager и экземпляром карты myMap - единственная связь, это их создание через методы объекта ymaps.

В песочнице с примерами для Яндекс Карт, обратил внимание на способ создания objectManager’а, добавление к нему геообъектов, а после добавление менеджера на карту.

После вызова метода add коллекции геообъектов карты, станции отобразились на карте.

4. Нарушение порядка координат в mapper.js для базовых станций

Обратил внимание на расположение объектов отличное от условий задания ("... карта Москвы").

Предположил, что очевидной допущенной ошибкой здесь могли быть либо неверная с математической точки зрения генерация координат, либо их координаты местами поменяли. Если одно из двух не окажется верным, то придется искать что-то еще.

Проверил какие данные возвращаются при запросе по /api/stations - в массиве объектов геокоординаты возвращались, к сожалению, корректные.

Решил проверить второй вариант следующим образом: если координаты центра карты (Москва) поменять местами, получится (приблизительно) место, где сейчас отображаются станции дронов.

Воспользовался инструментом Яндекса с координатами метки - приблизительно совпало.

Значит объекты располагались где нужно, только широта и долгота местами поменялись. Нашел место установки: при маппинге массива данных с FeatureCollection - поменял координаты местами, станции переехали в Москву.

5. Статичная цветная иконка кластера, вместо круговой диаграммы

В песочнице Яндекса был пример для создания кластера в виде круговой диаграммы. Код в приложении соответствовал примеру.

Обратил внимание, что ниже происходит добавление опции preset для кластера, несмотря на то, что у него уже была установлена иконка в виде pieChart.

Предположил, что опция preset переопределяет отображение для кластера. Предположение оказалось верным.

6. Ошибка в файле detail.js при создании макета для балуна с помощью фабрики

В стрелочной функции ключевое слово this ссылается на undefined, так как this соответствует this'у лексического контекста объявления функции и, следовательно, ссылка такая же, как и вне объектного литерала, а это undefined (не window, ведь в модулях по умолчанию используется strict режим).

Ошибку обнаружил, воспользовавшись методом проб и ошибок:

1. Проверил, появляется ли балун без кастомного layout'а - сработало.

2. Вернул кастомный layout, но в функции getDetailsContentLayout удалил все, кроме кода с разметкой (т.е. удалил второй аргумент) - снова сработало.

3. Вернул второй аргумент с функциями build и clear балун снова не появлялся.

После внимательного инспектирования кода details.js заметил использование в во втором аргументе функции createClass использование arrow functions вместо варианта ES6 method definition (или обычного function expression). Предложил, что есть проблема с контекстом в результате использования стрелочных функций в объектном литерале.

Проверил код с помощью Chrome Dev Tools, дополнив webpack-конфиг свойством devtool: source-map.

Ключевое слово this в функциях build и clear давало undefined. Из-за стрелочных функций контекст исполнения не верный. Заменил на вариант с методами. Балун начал открываться в штатном режиме.

7. Пустой график нагрузки

В графике нагрузки отображались только точки в 0 у дефектных станций. Заметил, что на графике ось ординат отображается в диапазоне от -1.0 до 0.

Проверил, какие данные генерируются в качестве точек для графика - от 2 до 8, а также ноль. Данные в порядке, следовательно, проблема с графиком.

Значит, необходимо найти место установки диапазона значений для осей и указать его в ручную (или установить какой-нибудь адаптирующийся вариант).

В chart.js, в chart.options.scales обнаружил указанное константное значение y.max: 0. Очевидно, что верхняя граница для оси Y - не то, что требуется в графике нагрузки.

8. Не используемый файл popup.js

Файл popup.js никуда не импортировался, также в нем использовалось свойство obj.drones, которое не содержалось в возвращаемых по API данных. Также не были нигде описаны классы, встречающиеся в разметке функции getPopupContent.

Выполнил поиск в проекте по слову "getPopupContent" и по drones. Совпадений не было — удалил неиспользуемый файл.

9. Отсутствие styleguide и линтеров в проекте

Не консистентный JS код был исправлен при помощи eslint (Airbnb config).

CSS код приведен к единому стилю с помощью stylelint (standard cofig + stylelint-order plugin).

Используемые инструменты

1. git (git-bash) - версионирование кода и публикация в репозиторий
2. ssh - управление удаленным сервером
3. node-forever - для запуска приложения в постоянном режиме на удаленном сервере
4. Postman - проверка работоспособности API бэкенд-заглушки
5. Chrome Dev Tools - отладка ошибок в коде

Используемая литература

1. "Exploring ES6" by Alex Rauschmayer (главы, посвященные arrow function, async programming, OOP) - потрясающая книга. К тому же, она выступает не плохим справочником (не какой-нибудь The Definitive Guide, но все же)

2. "You don't know JS" by Kyle Simpson (1 и 2 книги из серии)