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!