TL; DR В этой статье я хочу осветить проблему навигации по большой кодовой базе и показать небольшую демонстрацию codecrumbs - визуального инструмента, который поможет вам изучить кодовая база быстрее. Вы можете увидеть автономную онлайн-версию здесь. Цените ваши ранние отзывы!

Идея

Мы, как программисты, оказываемся сверхнеэффективными, когда переходим к большой базе кода или базе кода, о которой ничего не знаем. Это лабиринт кода. Мы легко теряемся и начинаем перемещаться между файлами в полной темноте. Слишком много бесполезного шума, слишком много деталей, которые затуманивают наше видение и понимание кода. Вы можете ознакомиться с моей недавней статьей, где я выделил проблему чтения кода с некоторыми другими мыслями.

Итак, нам нужен способ:

  • уменьшить шум большой кодовой базы
  • выделить важные места в большой кодовой базе
  • и даже проведет нас через большую кодовую базу

Визуальный инструмент - хороший способ решить эту проблему, если:

  • он дает правильную перспективу (а не просто заставляет его выглядеть модно)
  • по сути, уменьшает ненужные детали (и не добавляет еще одну, визуальную)
  • его легко использовать с существующими кодовыми базами без необходимости переписывать код

Все это, как мне кажется, можно решить с помощью кодовых крошек. Еще предстоит много работы, но основные функции уже реализованы. Давайте посмотрим!

Супер простая интеграция

Итак, давайте возьмем какой-нибудь проект, который мы можем использовать, например. Я выбрал Приложение Todo с Create React App, React Redux и Firebase », потому что оно достаточно простое, чтобы не быть перегруженным, и в то же время в нем достаточно структуры файлов (55 файлов , 20 папок), чтобы он выглядел как настоящий проект.

Установить codecrumbs глобально или devDependencies:

yarn add codecrumbs -D

Добавьте команду с записью файл и исходный каталог в раздел scripts вашего package.json:

“start:cc”: “codecrumbs -e src/index.js -d src”

Запустите yarn start:cc из терминала. Теперь он работает и наблюдает за изменениями кода! Откройте http: // localhost: 2018 / # в браузере, чтобы увидеть, что у вас получилось.

Панировочные сухари в лабиринте кода

«Убийственная функция» инструмента скрывается за переключателем «CodeCrumbs». Давайте включим это. Теперь мы можем оставить панировочные сухари в коде, и они появятся на схеме. На лету. Для этого просто запишите комментарий.

Пример размещения первой хлебной крошки

Откроем src/view/app/app.js и напишем //cc:here. В этом примере cc (обозначает CodeCrumb) - это префикс, используемый синтаксическим анализатором, а «здесь» - это заголовок нашей первой навигационной цепочки.

Вы можете видеть, что в схему был добавлен еще один файл, который мы пометили как «важный», записав туда код-крошку. Кроме того, я хочу подчеркнуть, что вся кодовая база все еще существует, вы можете расширять папки и просматривать другие файлы, но вы всегда можете закрыть их, чтобы фильтровать только ключевые файлы для нас. . Это то, что я называю «уменьшение шума».

Пример нанесения следа из панировочных сухарей

Кроме того, вы можете создать «след из хлебных крошек» - по сути, последовательность кодовых крошек, которые следуют за некоторым потоком данных (например, логин пользователя, отправка формы и т. Д.). Давайте посмотрим на пример со входом в систему.

Чтобы создать codecrumb как часть следа, вы пишете: //cc:signin#0;dispatch action где signin - идентификатор следа, #0 порядковый номер шага, действие отправки - это заголовок, описывающий шаг. Давайте добавим еще несколько. Вы можете увидеть их все здесь.

Другие особенности

Давайте быстро рассмотрим другие основные функции.

Зависимости

Еще одна «важная вещь» - это дерево Зависимостей. Когда вы выбираете узел (файл), запрос будет отправлен на локальный сервер, возвращен с сгенерированным деревом зависимостей для точки входа. Вы можете выбрать соединения и посмотреть, «что импортировано» и «как реализовано».

Схема

Js2flowchart используется на боковой панели для рисования блок-схемы для выбранного кода файла.

Легко учиться - легко делиться знаниями

Допустим, вы собрали некий след кодовых крошек, описывающий некий важный поток внутри проекта. Как вы можете поделиться этим с другими? Просто загрузите файл json из магазина codecrumbs, отправьте его другу, он / она загрузит его в codecrumbs и видно то же самое вы только что видели!

Скачать

Загрузить

Еще не все

Сейчас я работаю над несколькими важными функциями, но скоро они будут закончены. А пока загляните на https://github.com/Bogdan-Lyashenko/codecrumbs и дайте мне знать, что вы думаете. Идеи и улучшения приветствуются. Спасибо.

Если вам понравился этот пост и вы хотите получать новости о моих следующих статьях, подпишитесь на меня в твиттере @bliashenko!