Navigating Codebase: How to Read a Production-Grade Repository

You need a Map, a Compass and a Guide

Dependency Graph of XlSheets Side Project with max-depth=2

Why Reading Code

🤔 Understand Core Business

🗺 Draw a Map

XlSheets application files directory
Dependency Graph using `dot` Graphviz engine
Dependency Graph using `neato` Graphviz engine
// Install the dev dependency
yarn add -D dependency-cruiser
// Generate dependency-cruiser config file
yarn depcruise --init yes
// Generate the dependency graph and export it to Graphviz to
// transform the output to SVG image
yarn -s depcruise -T dot -x node_modules src/index.tsx | dot -T svg > dependency_graph.svg

👀 Have a Compass

✅ Read Tests

🛠 Use Debuggers

📜 Read Git History

— Final Thoughts

That is the same with writing better code. You have to read a lot of code to get better at writing code!

Web Application Developer. Knowledge hungry always learning. Aspiring to become a Web Unicorn. Find me @abduvik on social platforms.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store