Как, черт возьми, надо ревьювить

Пришла большая задача...

• Шесть человекомесяцев
• 225 files changed, 5506 insertions(+), 659 deletions(-)
• Очень хочется разобраться, как работает, но не знаю как 😞

Как ревьювил раньше

1. Приехала ссылка в чат
2. Открыл дифф на github/stash/etc
3. Файл за файлом, строка за строкой пытаюсь разобрать дифф

Метод

1. Понять задачу (Что нужно было сделать?)
2. Потрогать реализацию (Что сделано?)
3. Понять код (Как сделано?)

1. Понять задачу

Шаг 1 - Понять задачу

1. Открыть задачу в JIRA/Redmine/Pivotal Tracker/etc
2. Прочитать описание
3. Ответить на вопросы:
   • Что это?
   • Зачем это нужно?
   • Как делать? (спеки, макеты)

2. Потрогать реализацию

Шаг 2 - Потрогать реализацию

1. git checkout <ветка-пуллреквеста>
2. npm start | gulp | webpack
3. Открыть в браузере
4. Прокликать основные сценарии

3. Понять код

Как разобраться?

component-inspector

React Developer Tools

Классика отладки

• Поменять стили (background, outline)
• Поменять разметку (добавить что-то к строке)

Не всегда возможно

Метод от противного

1. Попытаться угадать компонент по коду
2. Проверить, что угадали правильно (см. предыдущий пункт)
3. Если не угадали, проверяем, что код не мертвый
   • console.log();
   • debugger;
4. Если код оказался мертвым - уточняем у автора, где он используется
5. Если код все же используется - угадываем дальше

Теперь можно смотреть

Лучше открывать код в редакторе

1. файловая структура
2. grep
3. возможности IDE
4. возможность отладки

Лучше открывать код в редакторе

К слову о комментариях...

Гордыня

Только объективные замечания

1. Баги в реализации
2. Мертвый код
3. Названия, которые вводят в заблуждение

Названия, которые вводят в заблуждение

      .close
      {
        position: absolute;
        right: 10px;
        top: 5px;
        cursor: pointer;
        opacity: 0.5;
      }
    

Названия, которые вводят в заблуждение

      <a href="{viewLink}" class="item {selected}">
        <span class="close" event-click="toggleMenu">☰</span>
      </a>
    

Чем кончилось

• 6 человекомесяцев
• Просмотрено за 2-2.5 дня
• Замечания отписал за 1.5 часа

Цель ревью - понять код

Что это дает?

• Нахождение багов, недоступных тестировщикам
• Полное владение кодом
• Возможность разобраться лучше, чем автор

Ссылки

1. https://github.com/lahmatiy/component-inspector
2. https://github.com/facebook/react-devtools
3. Открытие файла из пуллреквеста:
   • User-script (нужен Tampermonkey): https://goo.gl/07JiZy
   • Приложение: https://github.com/DKunin/menubar-helper