15

GitHub - Bogdan-Lyashenko/codecrumbs: Learn, design or document codebase by putt...

 5 years ago
source link: https://github.com/Bogdan-Lyashenko/codecrumbs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

npm version Open Source Love 68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f626c69617368656e6b6f2e7376673f6c6162656c3d5374617925323054756e6564267374796c653d736f6369616c

logo-sm.png

What · Demo · Get started · Features · Case studies · Support

What

Have you ever got lost in a big or unknown codebase? This tool will help you to solve that. Also, it will increase your development speed and give more knowledge about your application architecture.

How it works? You run codecrumbs command for a codebase, it analyzes source code and builds its visual representation. Write down a codecrumb-comment and codebase state will be reflected by visual client in browser on the fly.

-@bliashenko

Demo

Check out the example of standalone version running here.

main-ui.png

Get started

Install and run

Pre-condition: update/install NodeJS version to be >= 8.11.1

  1. Install codecrumbs globally (yarn gloabl add codecrumbs)
  2. Run codecrumbs -d project-src-dir -e project-src-dir/index.js. Change parameters to match your project:-d is directory with source code, -e is entry point file .
  3. Go to http://localhost:2018 in the browser to check it out.

CLI

Parameter Description Example -e, --entry Path to project source entry point file -e src/app.js -d, --dir Path to project source code directory -d src -p, --port Port for Codecrumbs client (optional, default 2018) -p 2019 -n, --projectName Project name alias (optional, default same as -d value) -n my-hello-world -f, --parserFallback AST parser fallback, applicable only for JavaScript project, use it when @babel-parse fails (optional, default false) -f true

Features

Breadcrumbs and trails

cc-ui.png

UI explained:

  1. Enable "Codecrumbs" to have codecrumbs tree on the scheme (drop-down contains extra configuration)
  2. Choose "current" codecrumbs flow to display (can be either trail or all other "simple" codecrumbs)
  3. Codecrumb details
  4. Folder is in "active only" state, you can expand to show all children

How to get there? Leave breadcrumb in code by writing down a comment: //cc:[parameters;].

cc (stands for "CodeCrumb") is a prefix which used by the parser; check example of parameters in the table below:

Example Description Use case //cc:remember place simple breadcrumb, remember place is a title of our first breadcrumb Mark an important place to not forget where it was //cc:here is bug;well, seems like a bug in logic simple breadcrumb, well, seems like a bug in logic is details for breadcrumb, separated by ; Add extra information, will be rendered in popups //cc:signin#3;enable route trail of breadcrumbs,signin is the trail ID, #3 is order number of step, enable route is a title describing the step. A sequence of codecrumbs, use to describe some data flow (e.g. user login, or form submit, etc.). //cc:signin#1;firebase sign in;+2;do call to firebase with credentials trail of breadcrumbs,+2 is number of lines to highlight, separated by ; Use number of lines to highlight the code related to breadcrumb

Note: current version supports single line comments only.

Multi-codebase integration

You might be interested to study connections between several codebases (sub-modules), codecrumbs supports that. Simply start codecrumbs multiple times (once for each codebase), it all will be synced in one picture inside the browser tab. To control a diagram UI - select it by clicking on it :)

E.g. for server-client application, go to the source directory for your server code and run codecrumbs -e your-server-src/index.py -d your-server-src, same for client codecrumbs -e src-client/index.js -d src-client.

Note: codebases can be located wherever you want (no need to have them like mono-repo, etc.), simply run codecrumbs for directory you need.

multi-l-c.png

Multi-language support

Current version supports next programming languages:

  • JavaScript
  • TypeScript
  • Python
  • PHP
  • Java
  • C++
  • and others which use // as a comment :)

Please file an issue to support other language you would like to have.

Download & Upload (learn and share your knowledge)

You can take a snapshot of application state at any point of time and share it with others. Simply download the json file of codecrumbs store (top-right corner, "setup -> download"). This json file can be then uploaded to codecrumbs (top-right corner, "setup -> upload") to represent exactly same picture, even without having that project locally!

upload-feature-2.gif

Dependencies

Note: In current version only JavaScript offers this feature

dep-ui.png

UI explained:

  1. Enable "Dependencies"
  2. Select connection between modules
  3. All involved files (two or more) will be opened in "Sidebar", so you can see “what is imported” and “its implementation”.

Flowchart

Note: In current version only JavaScript offers this feature

flow-ui.png

js2flowchart is used in the sidebar to draw flowchart for the selected file code.

Case studies

The tool (codecrumbs) allows us to learn, document and explain a codebase much faster. Also, with Download & Upload feature it becomes super easy to collect and share your "investigation results".

The ultimate goal is to have many case studies hosting at https://codecrumbs.io. The library of projects "explained with codecrumbs", the place for collaborative learning. More features around that coming soon, stay tuned.

Support

Any support is very much appreciated! ??❤️ If you like this project, please, put a ⭐️ and tweet about it. Thanks!

Please, consider making financial donation, it will help further development of more cool features! We'll thank you by including your name/company logo here ☺️. Feel free to ping me for discussion.

68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f636f64656372756d62732f646f6e6174652f627574746f6e4032782e706e673f636f6c6f723d626c7565

Contribute

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owner of this repository before making a change. Ideas and suggestions are welcome. To start development environment, clone the repo & run:

yarn && yarn start

WIP

Next features are developing:

  • eject codecrumbs - ability to remove all "breadcrumbs" from source code in "one click"
  • data transferring between cc trail steps
  • VS Code extension - some neat features right inside the code editor. Checkout the repo here.

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK